首页 > > 网页制作 > css >

css动画Demo---水波动画和边框动画

2018-06-24 02:27:21来源：未知阅读 ()

先上效果图：

　　水波动画：

　　边框动画：

1.水波动画

　　实现代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>水波动画</title>
 6     <style>
 7         .water{
 8             width: 50px;
 9             height: 50px;
10             position: relative;
11         }
12         .point{
13             position: absolute;
14             border-radius: 50%;
15             animation:border 2s linear infinite;
16         }
17         .point2{
18             -webkit-animation-delay:.5s;
19         }
20         .point3{
21             -webkit-animation-delay:1s;
22         }
23         .point4{
24             -webkit-animation-delay:1.5s;
25         }
26 
27         @keyframes border{
28             from { 
29                 width:0;  
30                 height:0;  
31                 top:50%;  
32                 left:50%;  
33                 background-color: rgba(235, 51, 36, 1);
34             }  
35             to { 
36                 width:100%;  
37                 height:100%;  
38                 top:0;  
39                 left:0;  
40                 background-color: rgba(235, 51, 36, 0);
41             }
42         }
43     </style>
44 </head>
45 <body>
46     <div class="water">
47         <div class="point point1"></div>
48         <div class="point point2"></div>
49         <div class="point point3"></div>
50         <div class="point point4"></div>
51     </div>
52 </body>
53 </html>

2.边框动画:

　　实现代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>边框动画</title>
 6     <style>
 7         .block{
 8             width: 100px;
 9             height: 50px;
10             position: relative;
11             background-color: #fcfcfc;
12             overflow: hidden;
13         }
14         .block:before{
15             content: '';
16             width: 0;
17             height: 0;
18             top: 0;
19             left: -1px;
20             display: block;
21             border-top: 1px solid red;
22             border-right: 1px solid red;
23             position: absolute;
24             z-index: 1;
25         }
26         .block:hover:before{
27             content: '';
28             width: 100%;
29             height: 100%;
30             border-radius: 5px;
31             animation: border .5s linear 1;
32         }
33         .block:after{
34             content: '';
35             width: 0;
36             height: 0;
37             bottom: 0;
38             right: -1px;
39             display: block;
40             position: absolute;
41             z-index: 1;
42             border-bottom: 1px solid red;
43             border-left: 1px solid red;
44         }
45         .block:hover:after{
46             content: '';
47             width: 100%;
48             height: 100%;
49             border-radius: 5px;
50             animation: border2 1s linear 1;
51         }
52         @keyframes border{
53             0%{
54                 width: 0;
55                 height: 0;
56             }
57             50%{
58                 width: 100%;
59                 height: 0;
60             }
61             100%{
62                 width: 100%;
63                 height: 100%;
64             }
65 
66         }
67         @keyframes border2{
68             0%{
69                 width: 0;
70                 height: 0;
71             }
72             50%{
73                 width: 0;
74                 height: 0;
75             }
76             75%{
77                 width: 100%;
78                 height: 0;
79             }
80             100%{
81                 width: 100%;
82                 height: 100%;
83             }
84         }
85     </style>
86 </head>
87 <body>
88     <div class="block"></div>
89 </body>
90 </html>