1.前言
在自己的專欄上寫了十幾篇文章了，都是與js有關的。暫時還沒有寫過關於css3的文章。css3，給我的感覺就是，不難，但是很難玩轉自如。今天，就用css3來實現三個特效，希望這三個特殊能讓大家受到啟發，利用css3做出更好，更炫的動畫效果，並且對比這三個特效和JS特效的對比，希望能幫助到是大家學到CSS3的一些知識。今天這三個案例可以說是一個預習或者熱身吧，以後也會寫關於CSS3更好的作品或者文章，最近我也是在編寫一個css3的動畫庫！
2.過渡與動畫概念理解
css3過渡
化用菜鳥教程的說法，CSS3過渡是元素從一種樣式逐漸改變為另一種的效果。要實現這一點，必須規定兩項內容：1.指定要新增效果的CSS屬性。2.指定效果的持續時間。
css3動畫
化用菜鳥教程的說法，CSS3動畫是根據@keyframes規則內指定一個CSS樣式和動畫將逐步從目前的樣式更改為新的樣式。指定至少這兩個CSS3的動畫屬性繫結向一個選擇器：1.規定動畫的名稱。2.規定動畫的時長。
3.過渡案例-炫酷下拉
3-1原理分析
1.首先就是一個導航下拉，就是滑鼠放上去出現一個下拉選單
2.然後發現，下拉里面，每一個選項是從不同的兩個方向出現的
3.出現的方式是奇數項從左邊進，偶數項從右邊進，進入方式是滑動淡入。
3-2實現過程
1.首先頁面的佈局，這個應該大家都知道，選單無非就是一個ul-li列表，下拉選單就是li下面的一個ul-li。
reset.css（樣式重置表和個人常用樣式封裝）
|
1 |
*{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}ol,ul{list-style:none}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400}fieldset,img{border:0}textarea{resize:none}a{color:#000;text-decoration:none}.fontsize24,h1{font-size:24px}.fontsize20,h2{font-size:20px}.fontsize18,h3{font-size:18px}.fontsize16,h4{font-size:16px}.fontsize14,h5{font-size:14px}.fontsize12,h6{font-size:12px}.bold{font-weight:700}.fllil li{float:left}.fllir li{float:right}.fl{float:left}.fr{float:right}.radius{border-radius:100%}.positionCenterLeft{left:0;right:0;margin:auto}.positionCenterTop{top:0;bottom:0;margin:auto}.positionCenter{top:0;bottom:0;left:0;right:0;margin:auto}.distable{display:table}.distablecell{display:table-cell;vertical-align:middle}.textels{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.marginCenter{margin:0 auto}.t_l{text-align:left}.t_c{text-align:center}.t_r{text-align:right}.unLine{text-decoration:underline}.fiexd{position:fixed}.absolute{position:absolute}.relative{position:relative}.wrapper{clear:both;overflow:hidden}.o-hidden{overflow:hidden}.hidden{display:none}.block{display:block}.lblock{display:inline-block}.clear{clear:both}.pointer{cursor:pointer}img{border:0;vertical-align:middle} |
html程式碼如下
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<div class="demo-nav"> <!--.fllil,.clear是在樣式重置表（reset.css）上寫好的樣式，.fllil li{fload:left;}.clear{clear:both;}--> <ul class="menu fllil"> <li>HTML5 <ul class="sub-menu"> <li>article</li> <li>section</li> <li>menu</li> <li>nav</li> </ul> </li> <li>CSS3 <ul class="sub-menu"> <li>動畫</li> <li>過渡</li> <li>圓形</li> <li>邊框</li> </ul> </li> <li>Javascript <ul class="sub-menu"> <li>字串</li> <li>陣列</li> <li>物件</li> <li>布林</li> </ul> </li> <li>Jquery <ul class="sub-menu"> <li>動畫</li> <li>特效</li> <li>AJAX</li> </ul> </li> <li>VUE</li> </ul> <div class="clear"></div> </div> |
css程式碼如下
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
.demo-nav { width: 500px; margin: 0 auto; } .demo-nav li { line-height: 40px; padding: 0 10px; background: #09f; color: #fff; position: relative; } .demo-nav li ul { position: absolute; left: 0; top: 40px; height: 0; overflow: hidden; } .demo-nav li ul li { float: none; /*過渡程式碼*/ transition: all .3s; background: #f90; opacity: 0; } /*奇數項初始往右邊偏移100%*/ .demo-nav li ul li:nth-of-type(1n) { transform: translate3d(100%, 0, 0); } /*偶數項初始往左邊偏移100%*/ .demo-nav li ul li:nth-of-type(2n) { transform: translate3d(-100%, 0, 0); } .demo-nav li:hover ul { overflow: visible; } /*透明度和互動同時進行*/ .demo-nav li:hover ul li { opacity: 1; transform: translate3d(0, 0, 0); } |
注意1：在顯示下拉選單的操作上，剛開始隱藏子選單ul的樣式，不能這樣寫
.demo-nav li ul{display:none;}。要這樣寫.demo-nav li ul{height: 0;overflow:hidden;}，滑鼠放上父級li的時候，顯示ul不能這樣寫.demo-nav li:hover ul{display:block;}，要這樣寫，.demo-nav li:hover ul{overflow: visible;}因為一開始如果子選單ul是隱藏的，滑鼠放到父級li的時候，子選單ul就顯示出來，這樣是看到子選單ul下面li的動畫的。
注意2：子選單ul要用
.demo-nav li ul{height: 0;overflow:hidden;}隱藏，在顯示的時候再設定.demo-nav li:hover ul{overflow: visible;}。這一步不能省，否則會出問題。如果不加，實際上子選單ul，以及子選單ul下面的li一直在頁面上，如果滑鼠移上去子選單ul，以及子選單ul下面的li。那麼實際上也會觸發父級li的hover。
3-3與JS實現對比
這個效果js也是能實現，實現上也不難，無非就是呼叫定時器的問題。但是寫的肯定比css3多，邏輯也會比css3複雜。
1.首先，父級li必須要繫結一個滑鼠移出和移入事件，也要定義一個屬性，記錄定時器（不同的父級li不能共用一個定時器，不然會受到干擾，必須每一個父級li下面都要有一個屬性記錄定時器）。obj.timer=setInterval(function(){},100)
2.用js實現，實際上也是操作class或者css。所以效能上css3是比js好！
3.針對這個動畫，css3也比js好控制。
3-4完整程式碼
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ec-css導航欄</title> <link rel="stylesheet" href="reset.css"> <style> .demo-nav { width: 500px; margin: 0 auto; } .demo-nav li { line-height: 40px; padding: 0 10px; background: #09f; color: #fff; position: relative; } .demo-nav li ul { position: absolute; left: 0; top: 40px; /*height: 0;*/ /*overflow: hidden;*/ } .demo-nav li ul li { float: none; transition: all .3s; background: #f90; opacity: 0; } .demo-nav li ul li:nth-of-type(1n) { transform: translate3d(100%, 0, 0); } .demo-nav li ul li:nth-of-type(2n) { transform: translate3d(-100%, 0, 0); } .demo-nav li:hover ul { /*overflow: visible;*/ } .demo-nav li:hover ul li { opacity: 1; transform: translate3d(0, 0, 0); } /*最多10級，超過10級的，得寫js*/ .demo-nav li ul li:nth-of-type(2) { transition-delay: .1s; } .demo-nav li ul li:nth-of-type(3) { transition-delay: .2s; } .demo-nav li ul li:nth-of-type(4) { transition-delay: .3s; } .demo-nav li ul li:nth-of-type(5) { transition-delay: .4s; } .demo-nav li ul li:nth-of-type(6) { transition-delay: .5s; } .demo-nav li ul li:nth-of-type(7) { transition-delay: .6s; } .demo-nav li ul li:nth-of-type(8) { transition-delay: .7s; } .demo-nav li ul li:nth-of-type(9) { transition-delay: .8s; } .demo-nav li ul li:nth-of-type(10) { transition-delay: .9s; } </style> </head> <body> <div class="demo-nav"> <ul class="menu fllil"> <li>HTML5 <ul class="sub-menu"> <li>article</li> <li>section</li> <li>menu</li> <li>nav</li> </ul> </li> <li>CSS3 <ul class="sub-menu"> <li>動畫</li> <li>過渡</li> <li>圓形</li> <li>邊框</li> </ul> </li> <li>Javascript <ul class="sub-menu"> <li>字串</li> <li>陣列</li> <li>物件</li> <li>布林</li> </ul> </li> <li>Jquery <ul class="sub-menu"> <li>動畫</li> <li>特效</li> <li>AJAX</li> </ul> </li> <li>VUE</li> </ul> <div class="clear"></div> </div> </body> </html> |
4.過渡案例-手風琴
4-1原理分析
這個看著就不難，也是一個ul-li，滑鼠移入li，li下面的標題顏色，背景色，箭頭改變，li下面的div的高度改變！
4-2實現過程
1.首先，排版ul-li，li下面又有一個標題（這個用h3）,和內容（div）
html如下
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div class="demo-slide-tab"> <ul> <li> <h3>title 1</h3> <div>content1</div> </li> <li> <h3>title 2</h3> <div>content2conte nt2content2content2content2conten t2content2content2content2content2conte nt2content2content2content2conte nt2content2content2content2 content2content2content 2content2content2content2content2conten t2content2c ontent2content2content2</div> </li> <li> <h3>title 3</h3> <div>content3</div> </li> <li> <h3>title 4</h3> <div>content4.</div> </li> </ul> </div> |
css程式碼如下
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
<style> .demo-slide-tab { width: 500px; margin: 0 auto; } .demo-slide-tab ul { width: 100%; margin: 0; padding: 0; } .demo-slide-tab li { list-style: none outside none; display: block; margin: 0; padding: 0; height: 40px; width: 100%; overflow: hidden; background: #f0f0f0; transition: height 0.3s ease-in-out; } .demo-slide-tab h3 { margin: 0; padding: 10px; height: 19px; border-top: 1px solid #f0f0f0; color: #000; background: #ccc; background: linear-gradient(#0099ff, #71d1fd); custor: pointer; position: relative; } .demo-slide-tab h3:before { content: ""; border-width: 5px; border-color: transparent transparent transparent #000; position: absolute; right: 10px; top: 15px; width: 0; height: 0; } .demo-slide-tab div { margin: 0; voerflow: auto; padding: 10px; max-height: 220px; } //滑鼠移入li，高度改變 .demo-slide-tab li:hover { height: 280px; } //滑鼠移入li，h3背景顏色和字型顏色改變 .demo-slide-tab li:hover h3 { color: #fff; background: #000; background: linear-gradient(#faa305, #fcc054); } //滑鼠移入li，箭頭方向改變 .demo-slide-tab li:hover h3:before{ border-color: transparent transparent transparent #fff; transform: rotate(90deg); } </style> |
由於這栗子，li裡面的div在樣式上，設定了padding。所以建議我的做法是改變li設定overflow: hidden;height:40px;/*高度等於標題的高度，初始就是隱藏div*/。因為如果滑鼠移入li，是操作div的話。
會有一個小問題！如下栗子！
部分程式碼改成如下
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.demo-slide-tab li { display: block; margin: 0; padding: 0; width: 100%; background: #f0f0f0; } .demo-slide-tab div { margin: 0; height: 0; overflow: hidden; transition: height 0.3s ease-in-out; } .demo-slide-tab li:hover div { padding: 10px; height: 220px; } |
大家看可以看到，滑鼠移出的那一瞬間，看到div裡面的內容也貼邊了！我就是為了避免這個，才通過操作li的高度來控制div的高度！
4-3與JS實現對比
1.這個動畫，我感覺雖然效能上css3是比js要好一些。畢竟js也是控制css或者class來實現！
2.靈活性的話，這個就要比js差了，比如div的顯示與隱藏，我不想通過滑鼠移入移出的方式控制，如果我想通過點選的方式控制div的顯示與隱藏呢。對於js的方式來說，這個就是觸發的事件就可以了，對於外掛來說，可能就改一個外掛就行了！對於css3實現的話，這個就不但要改css樣式了，也要改html結構了！
這裡，我的建議就是，這個動畫最理想的還是用js和css3結果，結果是最好的。如果針對靈活性不高的需求，可以只用css3。
4-4完整程式碼
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ec-css手風琴</title> <link rel="stylesheet" href="reset.css"> <style> .demo-slide-tab { width: 500px; margin: 0 auto; } .demo-slide-tab ul { width: 100%; margin: 0; padding: 0; } .demo-slide-tab li { list-style: none outside none; display: block; margin: 0; padding: 0; height: 40px; width: 100%; overflow: hidden; background: #f0f0f0; transition: height 0.3s ease-in-out; } .demo-slide-tab h3 { margin: 0; padding: 10px; height: 19px; border-top: 1px solid #f0f0f0; color: #000; background: #ccc; background: linear-gradient(#0099ff, #71d1fd); custor: pointer; position: relative; } .demo-slide-tab h3:before { content: ""; border-width: 5px; border-color: transparent transparent transparent #000; position: absolute; right: 10px; top: 15px; width: 0; height: 0; } .demo-slide-tab div { margin: 0; voerflow: auto; padding: 10px; max-height: 220px; } .demo-slide-tab li:hover { height: 280px; } .demo-slide-tab li:hover h3 { color: #fff; background: #000; background: linear-gradient(#faa305, #fcc054); } .demo-slide-tab li:hover h3:before{ border-color: transparent transparent transparent #fff; transform: rotate(90deg); } </style> </head> <body> <div class="demo-slide-tab"> <ul> <li> <h3>title 1</h3> <div>content1</div> </li> <li> <h3>title 2</h3> <div>content2conte nt2content2content2content2conten t2content2content2content2content2conte nt2content2content2content2conte nt2content2content2content2 content2content2content 2content2content2content2content2conten t2content2c ontent2content2content2</div> </li> <li> <h3>title 3</h3> <div>content3</div> </li> <li> <h3>title 4</h3> <div>content4.</div> </li> </ul> </div> </body> </html> |
5.動畫案例-無縫滾動
如上圖，無縫滾動也稱跑馬燈，就是一些內容，然後向左移動。滑鼠放上去的時候，動畫停止！互動就這樣，下面來看實現過程！
5-1原理分析
1.首先，初始狀態就是如下圖，然後向右慢慢移動（黑框部分為可視區域）
2.但是這樣，滾動到最後一張的時候，就會出現問題！如下圖
3.所以正確的姿勢應該是，這樣就需要對滾動內容進行復制一次了！
4.但還是避免不了第二步的問題
5.這裡就需要做一步了，就是在剛滾動到下輪第一張的時候。如下圖（用這個案例說，不包括複製出來的4個li，就總共有4個，每個200px，那麼就是方ul滾動了800px的時候）
6.滾動到這裡，就瞬間拉回來，回到原來的位置，再進行滾動操作（當ul滾動了800px的時候，瞬間拉回原來位置，相當於還沒有開始滾動）
5-2實現過程
1.首先佈局，就是在一個黑框就是一個div,橙色裝著1234的就是ul-li佈局！
看下面的程式碼註釋，再結合上面的原理，大家就很好理解了！
html程式碼如下
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<div class="demo-marquee"> <ul class="fllil"> <li><img src="image/1.jpg"/> </li> <li><img src="image/2.jpg"/> </li> <li><img src="image/3.jpg"/> </li> <li><img src="image/4.jpg"/> </li> <!--下面的四個li是複製內容--> <li><img src="image/1.jpg"/> </li> <li><img src="image/2.jpg"/> </li> <li><img src="image/3.jpg"/> </li> <li><img src="image/4.jpg"/> </li> </ul> <div class="clear"></div> </div> |
css程式碼
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<style> .demo-marquee { width: 400px; margin: 20px auto; overflow: hidden; } .demo-marquee ul { /*這個案例ul寬度應該為li個數*li寬度*/ width: 1600px; /*執行動畫*/ animation: ec-marquee-move 6s infinite linear; } .demo-marquee ul:hover { /*滑鼠放上去的時候，動畫暫停*/ animation-play-state: paused; } /*定義動畫*/ /*當向左滾動了800px的時候，這個時候結束，然後順便回到起點，進行下一次的動畫*/ @keyframes ec-marquee-move { 0% { transform: translateX(0px); } 100% { transform: translateX(-800px); } } </style> |
5-3與JS實現對比
1.這個動畫，效能上當然是css3比較好，而靈活性上也肯定是。比如做到下面這個圖這樣效果。點選左右箭頭切換方向！
還有一個就是，比如上面案例中，li的個數是變化的，那麼ul的寬度也是要用js計算，以及ul的內容要進行復制的話，以程式設計師的思維，理應也是用js，而不是手動複製！
2.所以，這個動畫，建議的還是用js和css3結合使用，這樣結果最好，效能上和靈活上都得到折中，價效比無疑是最好的！
5-4完整程式碼
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ec-css無縫滾動</title> <link rel="stylesheet" href="reset.css"> <style> .demo-marquee { width: 400px; margin: 20px auto; overflow: hidden; } .demo-marquee ul { width: 1600px; animation: ec-marquee-move 6s infinite linear; } .demo-marquee ul:hover { animation-play-state: paused; } @keyframes ec-marquee-move { 0% { transform: translateX(0px); } 100% { transform: translateX(-800px); } } </style> </head> <body> <div class="demo-marquee"> <ul class="fllil"> <li><img src="image/1.jpg"/> </li> <li><img src="image/2.jpg"/> </li> <li><img src="image/3.jpg"/> </li> <li><img src="image/4.jpg"/> </li> <li><img src="image/1.jpg"/> </li> <li><img src="image/2.jpg"/> </li> <li><img src="image/3.jpg"/> </li> <li><img src="image/4.jpg"/> </li> </ul> <div class="clear"></div> </div> </body> </html> |
5.總結
關於css3，我的開發小原則就是能用css3解決的，我不會寫js，但是如果要寫js的，我也不會吝嗇到不寫js，只用css3寫出退而求之的效果！css3跟js搭配，能做出很多意想不到的震撼效果，這個就得看大家腦洞有多大了！
好了，今天通過三個案例帶大家初步認識了css3的過渡和動畫。希望能給大家起一個熱身的作用，或者是大家看了這三個案例，知道怎麼去開發其它的案例，發散思維！但是這個只是css3過渡和動畫的冰山一角而已，css3就算沒有其他的新特性，就說過渡和動畫，魅力就足夠大，大家也可以到網上搜下css3的案例！就知道css3的魅力了！關於css3的新特性，以後我會繼續寫文章。
最後還是那句老話，如果覺得我哪裡寫得不好，寫錯了，歡迎指點！讓大家相互學習，相互幫助！