html 图片波纹,【CSS】波纹效果

微信订阅号：rabbit_svip

纯CSS3做动画，完全不兼容IE10之前的浏览器

微信订阅号：rabbit_svip

gif录得有点卡，拷个代码在本地体验一下。

HTML代码

CSS代码

#container {

width: 500px;

height: 500px;

position: relative;

margin: 100px auto 0;

transition: opacity 1s;

}

.circle {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

border-radius: 50%;

animation: pulse 3s infinite ease-in-out;

background: #487ad3;

}

.circle--1 {

opacity: 1;

animation-delay: 0.12s;

}

.circle--2 {

opacity: 0.5;

animation-delay: 0.24s;

}

.circle--3 {

opacity: 0.3333;

animation-delay: 0.36s;

}

.circle--4 {

opacity: 0.25;

animation-delay: 0.48s;

}

.circle--5 {

opacity: 0.2;

animation-delay: 0.6s;

}

.circle--6 {

opacity: 0.1666;

animation-delay: 0.72s;

}

.circle--1 {

width: 10%;

height: 10%;

}

.circle--2 {

width: 20%;

height: 20%;

}

.circle--3 {

width: 30%;

height: 30%;

}

.circle--4 {

width: 40%;

height: 40%;

}

.circle--5 {

width: 50%;

height: 50%;

}

.circle--6 {

width: 60%;

height: 60%;

}

@keyframes pulse {

0% {

transform: translate(-50%, -50%) scale(1);

}

25% {

transform: translate(-50%, -50%) scale(1.3);

}

50% {

transform: translate(-50%, -50%) scale(0.70);

}

75% {

transform: translate(-50%, -50%) scale(1);

}

}

section {

width: 500px;

height: 40px;

margin: 10px auto 0;

display: flex;

justify-content: space-around;

}

section > div {

width: 100px;

height: 100%;

background-image: linear-gradient( 135deg, #52E5E7 10%, #130CB7 100%);

text-align: center;

line-height: 40px;

color: #fff;

font-weight: 600;

font-size: 18px;

letter-spacing: 4px;

border-radius: 10px;

}

@keyframes： 定义动画用的。后面跟着动画名，大括号里设置要改变的属性。

animation： 会用动画。后面跟着动画名。

animation里面的 infinite 说明重复执行动画。

opacity： 设置不透明度。

animation-delay： 延迟执行。

display: flex 弹性盒布局