<style> .animation { width: 30px; height: 30px; animation: change 5s infinite; } /*动画相比过渡可以控制更多细节，可以将一个动画拆成多个步骤*/ @keyframes change { 0% { width: 30px; height: 30px; background-color: yellow; } /*25% { width: 300px; background-color: blue; }*/ 50% { width: 30px; height: 300px; background-color: green; } 100% { width: 300px; height: 300px; background-color: pink; } } </style> </head> <body> <div class="animation"></div> </body> </html>
跳动的球：
1 <style> 2 .ball { 3 width: 200px; 4 height: 200px; 5 margin-left: -100px; 6 border-radius: 100px; 7 background-color: blue; 8 background-image: radial-gradient(140px at center 40px, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6)); 9 position: absolute; 10 left: 50%; 11 top: 30px; 12 animation: move 1.5s infinite; 13 } 14 15 .ball-wrap::after { 16 content: ‘‘; 17 display: block; 18 position: absolute; 19 left: 50%; 20 bottom: 200px; 21 width: 200px; 22 height: 10px; 23 margin-left: -100px; 24 border-radius: 100px/5px; 25 background-color: #CCC; 26 } 27 28 29 @keyframes move { 30 0% { 31 top: 30px; 32 } 33 34 50% { 35 top: 180px; 36 } 37 38 100% { 39 top: 30px; 40 } 41 } 42 </style> 43 </head> 44 <body> 45 <div class="rotate"></div> 46 <div class="ball-wrap"> 47 <div class="ball"></div> 48 </div> 49 </body>
倾斜45的矩形变圆
1 <style> 2 .rotate { 3 width: 200px; 4 height: 200px; 5 margin: 200px auto; 6 background-color: yellow; 7 transform: rotate(45deg); 8 animation: move 2s infinite; 9 } 10 11 @keyframes move { 12 0% { 13 top: 30px; 14 } 15 16 50% { 17 top: 180px; 18 } 19 20 55% { 21 top: 190px; 22 } 23 24 65% { 25 top: 190px; 26 } 27 28 95% { 29 height: 190px; 30 border-radius: 100px/95px; 31 top: 30px; 32 } 33 34 100% { 35 height: 190px; 36 border-radius: 100px/95px; 37 top: 30px; 38 } 39 40 } 41 </style> 42 </head> 43 <body> 44 <div class="rotate"></div> 45 </body>
旋转/缩放/倾斜/移动
1 .wrapper .wrap-box { 2 padding: 20px; 3 } 4 5 .box { 6 width: 200px; 7 height: 200px; 8 background-color: yellow; 9 transition: all 1s; 10 11 } 12
通过 rotate() 方法，元素可以实现旋转效果，允许负值，元素将逆时针旋转。
使用方法如：transform: rotate(45deg)、transform: rotate(-90deg)
13 /*旋转*/ 14 .rotate:hover .box { 15 transform: rotate(360deg); 16 } 17 18 /*缩放*/ 19 .scale:hover .box { 20 transform: scale(0.5); 21 } 22 23 /*倾斜*/ 24 .skew .box { 25 transform: skew(45deg); 26 } 27 28 /*移动*/ 29 .translate:hover .box { 30 transform: translate(400px) rotate(90deg) scale(1.5); 31 }
点击按钮，增加样式做动画
1 <style> 2 body { 3 margin: 0; 4 padding: 0; 5 } 6 7 .demo { 8 width: 200px; 9 height: 200px; 10 background-color: blue; 11 12 } 13 14 .child { 15 width: 30px; 16 height: 30px; 17 background-color: yellow; 18 transition: all 1s; 19 } 20 21 .current .child { 22 width: 120px; 23 height: 120px; 24 } 25 </style> 26 </head> 27 <body> 28 <div class="demo"> 29 <div class="child"></div> 30 </div> 31 <button id="btn">换色</button> 32 <script> 33 var button = document.getElementById(‘btn‘); 34 var demo = document.querySelector(‘.demo‘); 35 36 button.addEventListener(‘click‘, function () { 37 demo.classList.add(‘current‘); 38 }) 39 </script>
动态进度条：改变left值；
1 <style> 2 body { 3 margin: 0; 4 padding: 0; 5 } 6 7 .demo { 8 width: 200px; 9 height: 200px; 10 background-color: blue; 11 12 } 13 14 .child { 15 width: 30px; 16 height: 30px; 17 background-color: yellow; 18 transition: all 1s; 19 } 20 21 .current .child { 22 width: 120px; 23 height: 120px; 24 } 25 </style> 26 </head> 27 <body> 28 <div class="demo"> 29 <div class="child"></div> 30 </div> 31 <button id="btn">换色</button> 32 <script> 33 var button = document.getElementById(‘btn‘); 34 var demo = document.querySelector(‘.demo‘); 35 36 button.addEventListener(‘click‘, function () { 37 demo.classList.add(‘current‘); 38 }) 39 </script>
GET()将jq对象转换为dom;
音乐键盘：
1 <script type="text/javascript"> 2 $(function() { 3 $("nav li:last").css("border",0); 4 // 隐式迭代 5 // a.append(b) // 把 b 放到 a 里面 6 $("nav li").append("<ins></ins>"); 7 var arr = new Array("red","blue","green","yellow","pink","deeppink","orange","purple"); 8 $("nav li ins").each(function(index,ele) { // for 9 $(this).css("background-color",arr[index]); 10 }) 11 12 $("nav li").mouseenter(function() { 13 $(this).children("ins").stop().animate({top:0},200); 14 $("audio").get($(this).index()).load(); // 加载 15 $("audio").get($(this).index()).play(); // 播放 16 }).mouseleave(function() { 17 $(this).children("ins").stop().animate({top:35},200); 18 }) 19 // 键盘事件 20 $(window).keydown(function(event) { // 事件对象 21 // alert(event.keyCode); // 返回该键盘的 unicode 编码 22 /* if(event.keyCode == 13) 23 { 24 alert("您按了回车") 25 }*/ 26 var num = 0 ; 27 if(event.keyCode>=49 && event.keyCode<=56) { 28 /*比如 我按了 1 键盘 应该 第 0 个li操作 29 比如 我按了 2 键盘 应该 第 1 个li操作 */ 30 num = event.keyCode - 49; 31 32 $("nav li").eq(num).trigger("mouseenter"); // 事件触发 33 setTimeout(function() { 34 $("nav li").eq(num).trigger("mouseleave"); // 事件触发 35 } ,300) 36 37 } 38 }) 39 40 }) 41 </script>
泡泡上下切换：
1 v <style> 2 body { 3 background-color: pink; 4 } 5 .pop { 6 width: 350px; 7 height: 100px; 8 margin: 100px auto; 9 background: url(images/paopao.png) no-repeat top left, 10 url(images/paopao.png) no-repeat right bottom #369; 11 border-radius: 15px; 12 transition: all 1s; 13 } 14 15 .pop:hover { 16 background-position: right bottom, top left; 17 } 18 </style> 19 </head> 20 <body> 21 <div class="pop"></div> 22 </body>
360度旋转：
1 <style> 2 div { 3 display: inline-block; 4 transition: all 0.5s; 5 } 6 .rotateDiv { 7 transform: rotate(360deg); 8 } 9 </style> 10 <script src="jquery-1.11.1.min.js"></script> 11 <script type="text/javascript"> 12 $(function() { 13 $("div").on("click",function() { 14 $(this).toggleClass("rotateDiv"); 15 }) 16 }) 17 </script> 18 </head>
3D转换音乐盒：
1 <style> 2 body { 3 margin: 0; 4 padding: 0; 5 background-color: #FFF; 6 } 7 8 .music-box { 9 width: 300px; 10 height: 300px; 11 margin: 50px auto; 12 position: relative; 13 } 14 15 .music-box::after, .music-box::before { 16 content: ‘‘; 17 position: absolute; 18 width: 100%; 19 height: 100%; 20 border-radius: 150px; 21 } 22 23 .music-box::after { 24 background: url(./images/musicb.jpg); 25 border-radius: 150px; 26 border: 1px solid #CCC; 27 transform-origin: center bottom; 28 transition: all 1s; 29 } 30 31 .music-box::before { 32 background: url(./images/musict.jpg); 33 } 34 35 .music-box:hover::after { 36 transform: rotateX(-180deg); 37 } 38 </style> 39 </head> 40 <body> 41 <div class="music-box"></div> 42 </body>
百度钱包：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3 3D转换</title> <style> body { margin: 0; padding: 0; background-color: #B3C04C; } .wallet { width: 300px; height: 300px; margin: 50px auto; position: relative; } .wallet::before, .wallet::after { content: ‘‘; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 150px; backface-visibility: hidden;
定义和用法
backface-visibility 属性定义当元素不面向屏幕时是否可见。
如果在旋转元素不希望看到其背面时，该属性很有用。
transition: all 0.6s; } .wallet::before { background: url(./images/bg.png) left top; transform: rotateY(0deg); } .wallet::after { background: url(./images/bg.png) right top; transform: rotateY(180deg); } .wallet:hover::before { transform: rotateY(180deg); } .wallet:hover::after { transform: rotateY(0deg); } </style> </head> <body> <div class="wallet"></div> </body> </html>
