2024年12月04日 建站教程
如何利用css3实现一个由内往外水波纹动态效果？下面web建站小编带大家了解一下，代码如下：
1、定义一个div命名为ripple
2、css3样式如下：
body {
height:100%;
background:#121212;
display:flex;
justify-content:space-around;
align-items:center;
}
.ripple{
position:relative;
display:block;
width:100px;
height:100px;
margin:160px auto;
animation:ripple 0.6s linear infinite;
border-radius:50px;
}
@keyframes ripple {
0% {
box-shadow:0 0 0 0 rgba(0,128,0,0.1),0 0 0 20px rgba(0,128,0,0.1),0 0 0 40px rgba(0,128,0,0.1),0 0 0 60px rgba(0,128,0,0.1);
}
100% {
box-shadow:0 0 0 20px rgba(0,128,0,0.1),0 0 0 40px rgba(0,128,0,0.1),0 0 0 60px rgba(0,128,0,0.1),0 0 0 80px rgba(0,128,0,0);
}
}
本文链接：http://so.lmcjl.com/news/18947/