怎么用纯CSS实现抽象的水波荡漾的动画
这篇文章主要为大家展示了“怎么用纯CSS实现抽象的水波荡漾的动画”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“怎么用纯CSS实现抽象的水波荡漾的动画”这篇文章吧。
站在用户的角度思考问题,与客户深入沟通,找到洛隆网站设计与洛隆网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:网站设计、成都网站建设、企业官网、英文网站、手机端网站、网站推广、域名与空间、网页空间、企业邮箱。业务覆盖洛隆地区。
代码解读
定义dom,容器中包含9个元素:
居中显示:
body{
margin:0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background-color:black;
}
定义容器尺寸:
.container{
width:30em;
height:30em;
font-size:10px;
}
用grid布局把9个子元素排列成3*3的网格状:
.container{
display:grid;
grid-template-columns:repeat(3,1fr);
}
设置容器内子元素的样式,是通过伪元素来设置的:
.containerspan{
position:relative;
}
.containerspan::before,
.containerspan::after
{
content:'';
position:absolute;
box-sizing:border-box;
border-style:nonesolidsolidnone;
border-width:1em;
border-color:gold;
width:100%;
height:100%;
}
旋转容器,让它的尖端朝上:
.container{
transform:rotate(-135deg);
}
增加子元素尺寸由小到大变化的动画:
.containerspan::before,
.containerspan::after
{
animation:
animate-scale1.6slinearinfinite;
}
@keyframesanimate-scale{
from{
width:1%;
height:1%;
}
to{
width:100%;
height:100%;
}
}
增加子元素边框色变化的动画:
.containerspan::before,
.containerspan::after
{
animation:
animate-border-color1.6slinearinfinite,
animate-scale1.6slinearinfinite;
}
@keyframesanimate-border-color{
0%,25%{
border-color:tomato;
}
50%,75%{
border-color:gold;
}
100%{
border-color:black;
}
}
增加子元素边框宽度变化的动画:
.containerspan::before,
.containerspan::after
{
animation:
animate-border-width2.6slinearinfinite,
animate-border-color1.6slinearinfinite,
animate-scale1.6slinearinfinite;
}
最后,让::after伪元素的动画时间慢半拍:
.containerspan::after{
animation-delay:-0.8s;
}
@keyframesanimate-border-width{
0%,100%{
border-width:0.1em;
}
25%{
border-width:1.5em;
}
}
以上是“怎么用纯CSS实现抽象的水波荡漾的动画”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
网站题目:怎么用纯CSS实现抽象的水波荡漾的动画
当前链接:http://myzitong.com/article/jhhosd.html