像360deg过渡效果,做专题的同学应该是经常做的.
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>360deg过渡效果</title> 6 <style type="text/css"> 7 div{ 8 cursor:pointer; 9 width:100px; 10 height:40px; 11 background:#92B901; 12 font-size:14px; 13 opacity:0.5; 14 transition-property:width,height,background,font-size,opacity,transform; 15 transition-duration:1s,1s,1s,1s,1s,1s; 16 border-radius:5px; 17 font-weight:bold; 18 color:#FFF; 19 padding:10px; 20 } 21 div:hover{ 22 width:120px; 23 height:60px; 24 background:#1ec7e6; 25 font-size:20px; 26 opacity:1; 27 transform:rotate(360deg); 28 } 29 </style> 30 </head> 31 <body> 32 <div>CSS3 transition</div> 33 </body> 34 </html>
其实触发过渡效果有很多种方式,今天总结一下:
1.最常见的hover触发过渡效果
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>hover过渡效果</title> 6 <style type="text/css"> 7 div{cursor:pointer;width:100px;height:40px;background:#92b901;transition:width 0.5s;} 8 div:hover{width:200px;} 9 </style> 10 </head> 11 <body> 12 <div></div> 13 </body> 14 </html>
2.js添加操作来触发
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js添加样式来触发过渡效果</title> 6 <style type="text/css"> 7 div{width:100px;height:40px;background:#92b901;transition:width 0.5s;} 8 .change{width:200px;} 9 </style> 10 <script type="text/javascript"> 11 setTimeout(function(){ 12 var div = document.querySelector("div"); 13 div.classList.add("change"); 14 }); 15 </script> 16 </head> 17 <body> 18 <div></div> 19 </body> 20 </html>
比如直接修改style属性来触发
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js直接修改style属性来触发过渡效果</title> 6 <style type="text/css"> 7 div{width:100px;height:40px;background:#92b901;transition:width 0.5s;} 8 </style> 9 <script type="text/javascript"> 10 setTimeout(function(){ 11 var div = document.querySelector("div"); 12 div.style.width="200px"; 13 }); 14 </script> 15 </head> 16 <body> 17 <div></div> 18 </body> 19 </html>
3.通过伪类触发
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js直接修改伪类属性来触发过渡效果</title> 6 <style type="text/css"> 7 div{width:100px;height:40px;background:#92b901;transition:width 0.5s;} 8 input:focus ~ div{width:200px;} 9 </style> 10 </head> 11 <body> 12 <input> 13 <div></div> 14 </body> 15 </html>
利用input获得焦点,可以把一些相应提示信息显示出来
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>input获得焦点,可以把一些相应提示信息显示出来</title> 6 <style type="text/css"> 7 input:focus ~ p{width:200px;transform:scale(1);} 8 p{transform:scale(0);transition:transform 0.2s;} 9 </style> 10 </head> 11 <body> 12 <input> 13 <p>请输入数字</p> 14 </body> 15 </html>
通过active来触发
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>active来触发</title> 6 <style type="text/css"> 7 button:active ~ p{width:200px;transform:scale(1);} 8 p{transform:scale(0);transition:transform 0.2s;} 9 </style> 10 </head> 11 <body> 12 <button>hold me</button> 13 <p>hahah</p> 14 </body> 15 </html>
开关按钮
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 input{display:none;} 8 label{width:100px;height:50px;background:#ADC14E;display:block;border-radius:25px;} 9 div{width:50px;height:50px;border-radius:50%;background:#FFF;border:1px solid silver;position:relative;left:0;transition: left 0.5s;} 10 input:checked ~ div{left:50px;} 11 </style> 12 </head> 13 <body> 14 <label> 15 <input type="checkbox"> 16 <div></div> 17 </label> 18 </body> 19 </html>
如果上面要模拟开关,需要把主要的样式都放在input的兄弟元素上.