您好,登錄后才能下訂單哦!
本文小編為大家詳細(xì)介紹“css3代碼如何實現(xiàn)一個垂直下拉動畫菜單”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“css3代碼如何實現(xiàn)一個垂直下拉動畫菜單”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學(xué)習(xí)新知識吧。
代碼如下:
<nav> <ul class="mcd-menu"> <li> <a href=""> <i class="fa fa-home"></i> <strong>Home</strong> <small>sweet home</small> </a> </li> <li> <a href="" class="active"> <i class="fa fa-edit"></i> <strong>About us</strong> <small>sweet home</small> </a> </li> <li> <a href=""> <i class="fa fa-gift"></i> <strong>Features</strong> <small>sweet home</small> </a> </li> <li> <a href=""> <i class="fa fa-globe"></i> <strong>News</strong> <small>sweet home</small> </a> </li> <li> <a href=""> <i class="fa fa-comments-o"></i> <strong>Blog</strong> <small>what they say</small> </a> <ul> <li><a href="#"><i class="fa fa-globe"></i>Mission</a></li> <li> <a href="#"><i class="fa fa-group"></i>Our Team</a> <ul> <li><a href="#"><i class="fa fa-female"></i>Leyla Sparks</a></li> <li> <a href="#"><i class="fa fa-male"></i>Gleb Ismailov</a> <ul> <li><a href="#"><i class="fa fa-leaf"></i>About</a></li> <li><a href="#"><i class="fa fa-tasks"></i>Skills</a></li> </ul> </li> <li><a href="#"><i class="fa fa-female"></i>Viktoria Gibbers</a></li> </ul> </li> <li><a href="#"><i class="fa fa-trophy"></i>Rewards</a></li> <li><a href="#"><i class="fa fa-certificate"></i>Certificates</a></li> </ul> </li> <li> <a href=""> <i class="fa fa-picture-o"></i> <strong>Portfolio</strong> <small>sweet home</small> </a> </li> <li> <a href=""> <i class="fa fa-envelope-o"></i> <strong>Contacts</strong> <small>drop a line</small> </a> </li> <li class="float"> <a class="search"> <input type="text" value="search ..."> <button><i class="fa fa-search"></i></button> </a> <a href="" class="search-mobile"> <i class="fa fa-search"></i> </a> </li> </ul> </nav>
這里用ul構(gòu)造了菜單的基本結(jié)構(gòu)。
接下來就利用CSS3代碼來實現(xiàn)菜單的下拉和動畫效果。
這是鼠標(biāo)滑過菜單項時的動畫代碼:
.mcd-menu li a i, .mcd-menu li a strong, .mcd-menu li a small { position: relative; transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; -moz-transition: all 300ms linear; -webkit-transition: all 300ms linear; } .mcd-menu li:hover > a i { opacity: 1; -webkit-animation: moveFromTop 300ms ease-in-out; -moz-animation: moveFromTop 300ms ease-in-out; -ms-animation: moveFromTop 300ms ease-in-out; -o-animation: moveFromTop 300ms ease-in-out; animation: moveFromTop 300ms ease-in-out; } .mcd-menu li:hover a strong { opacity: 1; -webkit-animation: moveFromLeft 300ms ease-in-out; -moz-animation: moveFromLeft 300ms ease-in-out; -ms-animation: moveFromLeft 300ms ease-in-out; -o-animation: moveFromLeft 300ms ease-in-out; animation: moveFromLeft 300ms ease-in-out; } .mcd-menu li:hover a small { opacity: 1; -webkit-animation: moveFromRight 300ms ease-in-out; -moz-animation: moveFromRight 300ms ease-in-out; -ms-animation: moveFromRight 300ms ease-in-out; -o-animation: moveFromRight 300ms ease-in-out; animation: moveFromRight 300ms ease-in-out; }</p> <p>.mcd-menu li:hover > a { color: #e67e22; }
以下定義了鼠標(biāo)滑過后文字圖標(biāo)滑過的動畫,分別是從頂部劃入,從左側(cè)劃入,從右側(cè)劃入:
@-webkit-keyframes moveFromTop { from { opacity: 0; -webkit-transform: translateY(200%); -moz-transform: translateY(200%); -ms-transform: translateY(200%); -o-transform: translateY(200%); transform: translateY(200%); } to { opacity: 1; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } } @-webkit-keyframes moveFromLeft { from { opacity: 0; -webkit-transform: translateX(200%); -moz-transform: translateX(200%); -ms-transform: translateX(200%); -o-transform: translateX(200%); transform: translateX(200%); } to { opacity: 1; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } } @-webkit-keyframes moveFromRight { from { opacity: 0; -webkit-transform: translateX(-200%); -moz-transform: translateX(-200%); -ms-transform: translateX(-200%); -o-transform: translateX(-200%); transform: translateX(-200%); } to { opacity: 1; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } }
css的基本語法是:
1、css規(guī)則由選擇器和一條或多條聲明兩個部分構(gòu)成;
2、選擇器通常是需要改變樣式的HTML元素;
3、每條聲明由一個屬性和一個值組成;
4、屬性和屬性值被冒號分隔開。
讀到這里,這篇“css3代碼如何實現(xiàn)一個垂直下拉動畫菜單”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會,如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。