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

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

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

先上效果图：

　　水波动画：

　　边框动画：

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>

服务器托管 idc机房托管边框闪烁动画 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
前端每日实战：137# 视频演示如何用纯 CSS 创作一个抽象的水波荡漾的动画

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

yeyan1996 2019-08-05 14:59 评论0 收藏0
mask-image的应用

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

HollisChuang 2019-08-30 11:19 评论0 收藏0
android动画交互 - 收藏集 - 掘金

摘要：项目地址这交互炸了二爱范儿是如何让详情页缩小为横向列表的掘金本文同步自的地方酒馆写在前面写这段话的时候，已经是夜里点了。【Android】给我一个Path，还你一个动画View - 掘金本篇文章已授权微信公众号 hongyangAndroid （鸿洋）独家发布转载请标明出处：http://gold.xitu.io/post/581c...本文出自:【张旭童的稀土掘金】(http:...

dabai 2019-06-25 11:14 评论0 收藏0