CSS3动画 

    <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>




 







            

            
posted @ 
2018-03-01 21:12 
前端极客 
阅读(300) 
评论(0) 
编辑 
收藏 
举报