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

先上效果图：

　　水波动画：

　　边框动画：

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>

转载于:https://www.cnblogs.com/lyyyyy/p/9149746.html

css动画Demo---水波动画和边框动画相关推荐

html边框环绕一周动画,环绕式CSS边框动画
我正在尝试使用纯CSS获得类似环绕效果的边框动画. 现在我在做它的方式是:before和:after伪元素大小发生变化.一个用于顶部和右侧边框,一个用于底部和左侧边框. 但是,由于宽度和高度的差异,我 ...
CSS 奇思妙想边框动画
} 由于 border 和 background 在盒子模型上位置的差异,视觉上会有一个很明显的错位的感觉: 要想解决这个问题,我们可以把 border 替换成 outline,因为 outline ...
【纯CSS】CSS奇思妙想边框动画
今天逛博客网站 -- shoptalkshow,看到这样一个界面,非常有意思: 觉得它的风格很独特,尤其是其中一些边框. 嘿嘿,所以来一篇边框特辑,看看运用 CSS,可以在边框上整些什么花样. bor ...
html div 虚线边框样式,纯CSS实现渐变虚线框和边框滚动动画
渐变虚线边框如果对边框的样式细节不是很在意,我们可以借助反向镂空的方法实现,也就是虚线原本实色的地方和周围颜色融为一体,看上去透明,而原来虚框透明的部分透出渐变背景色,于是看上去像是渐变色. 以下是 ...
html 边框效果,css实现边框动画效果
最近写了几个页面都用到css动画,以及很多before,after伪类.在此记录一下成果. css边框循环动画,页面效果如下: 1.沿着边框动画的图形使用before,after伪类写的.当时想用切图 ...
css实现画面转场以及边框线条动画
效果预览在实现转场效果之前,需要先了解css的clip-path属性,该属性就是实现转场的核心属性,clip-path属性可以使用裁剪方式创建元素的可显示区域.区域内的部分显示,区域外的隐藏.也就是 ...
div 设置 hover时边框颜色_CSS 奇思妙想边框动画
border 属性谈到边框,首先会想到 border,我们最常用的莫过于 solid,dashed,上图中便出现了 dashed. 除了最常见的 solid,dashed,CSS border 还支 ...
HTML5: 利用SVG动画动态绘制文字轮廓边框线条
DEMO: 点击这里看效果简要教程这是一款很酷的html5 svg线条动态绘制文字轮廓边框动画特效.SVG路径动画在网页设计中是一项热门的技术,它允许我们绘制各种简单.精美的图标和文字.关于使用S ...
纯CSS实现帅气的SVG路径描边动画效果
一.应该人人皆会的基础技术简而言之,就是让SVG的描边像是有人绘制一样的动画效果. 国外很多相关介绍的文章,来看看一些效果gif吧~ 纯CSS实现帅气的SVG路径描边动画效果纯CSS实现帅气的SV ...

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

css动画Demo---水波动画和边框动画相关推荐

最新文章

热门文章