波纹效果展示
看上去是不是很高大上,其实明白了原理很简单。
原理
利用border-radius
画出 2 个不规则的圆,调整到合适位置,让圆超出父级一部分,然后父级设置overflow:hidden
就可以了。然后将圆添加 CSS3 动画效果,实现旋转动画。
如果还有点懵的话,那我就直接点,上代码。
开始制作
首先我们先写个 div,设置好宽高和颜色。
<div class="cole"></div>
.cole {
position: relative;
width: 400px;
height: 400px;
background-color: rgb(41, 98, 255);
left: calc(50% - 200px);
top: 100px;
}
然后开始画圆
第一个圆,我们画个白色的,调整好位置后大概就这样(后期可能还需要微调数据)
.cole::before {
content: '';
display: block;
width: 400px;
height: 470px;
border-radius: 45%;
background-color: #fff;
position: absolute;
top: -45%;
left: -20%;
}
第二个圆,我们画个红色的,调整好位置后大概就这样(后期可能需要微调数据)
.cole::after {
content: '';
display: block;
width: 400px;
height: 470px;
border-radius: 45%;
background-color: #f50057;
position: absolute;
top: -55%;
left: -25%;
}
我们给 cole 添加样式:overflow:hidden
和border-radius:50%
分别代表超出内容隐藏以及圆角边框。
.cole {
position: relative;
width: 400px;
height: 400px;
background-color: rgb(41, 98, 255);
left: calc(50% - 200px);
top: 100px;
overflow: hidden;
border-radius: 50%;
}
这时候是不是感觉已经初具雏形了,别急,我们还没加上动画。
动起来
首先先设置关键帧动画
@keyframes rotate {
50% {
transform: rotate(180deg); //旋转180°(半圈)
}
100% {
transform: rotate(360deg); //旋转360°(一圈)
}
}
然后给两个圆添加动画上去
.cole::before {
content: '';
display: block;
width: 400px;
height: 470px;
border-radius: 45%;
background-color: #fff;
position: absolute;
top: -45%;
left: -20%;
animation: rotate 5s linear infinite; //动画
}
.cole::after {
content: '';
display: block;
width: 400px;
height: 470px;
border-radius: 45%;
background-color: #f50057;
position: absolute;
top: -55%;
left: -20%;
animation: rotate 5s linear infinite; //动画
}
(如果效果不满意,可以自己去微调以下数据)
波纹效果学习完了,是不是感觉很简单呢,波纹效果运用场景很多,比如手机的充电动画,海浪动画等等…
学会了怎么去实现波纹效果,大家也可以去发挥自己的想象,动手去实践一下吧!