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

dongfangyiyu 发布于2019-04-23 13:39 / 2322人阅读

摘要：先上效果图水波动画边框动画水波动画实现代码水波动画边框动画实现代码边框动画

先上效果图：

　　水波动画：

　　边框动画：

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>

云服务器 GPU云服务器边框闪烁动画 css3动画高性能css3动画事件和动画

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2156.html

前端每日实战：137# 视频演示如何用纯 CSS 创作一个抽象的水波荡漾的动画

摘要：效果预览按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。可交互视频此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。 showImg(https://segmentfault.com/img/bVbg3CU?w=400&h=301); 效果预览按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。 https://codepen.io/comehop...

yck 2019-08-02 16:05 评论0 收藏0
前端每日实战：137# 视频演示如何用纯 CSS 创作一个抽象的水波荡漾的动画

摘要：效果预览按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。可交互视频此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。 showImg(https://segmentfault.com/img/bVbg3CU?w=400&h=301); 效果预览按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。 https://codepen.io/comehop...

rottengeek 2019-08-30 15:54 评论0 收藏0
mask-image的应用

摘要：大概的效果就是被遮罩层与遮罩层不透明的部分重叠的部分是可见的，而遮罩层是不显示的。利用能做出一些不错的效果，比如。想到用这个属性正合适，于是要来了心型图片，拿到设计师导出的文件，用压缩下得到一个。遮罩层，如果学过Flash的同学应该都听过，跟PS的剪切蒙版差不多。大概的效果就是被遮罩层与遮罩层不透明的部分重叠的部分是可见的，而遮罩层是不显示的。类似于现实世界中一张A4卡纸剪了个洞，我...

HollisChuang 2019-08-30 11:19 评论0 收藏0