最近好久没有没有更新博客了,小伙伴们好久不见, 今天看到一个比较有意思的动画 所以研究了一下 ,就依然老王 用css简单的实现了一把 ,话不多说开始干
样式效果:
全部代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小水滴效果</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.border{
width: 500px;
height: 500px;
margin: auto;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: rgb(5,5,5);
filter: contrast(30);
}
.droplet{
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rgb(61, 233, 99);
filter: blur(20px);
animation: fall 3s linear infinite;
opacity: 0;
}
/*第2和和第3个水滴延迟时间后再播放动画 */
.border div:nth-of-type(2){
animation-delay: 1.5s;
}
.border div:nth-of-type(3){
animation-delay: 2s;
}
/*给水滴设置动画,让它们从上往下落下,期间大小发生变化*/
@keyframes fall{
0%{
opacity: 0;
transform: scale(0.8) translateY(-500%);
}
50%{
opacity: 1;
transform: scale(0.5) translateY(-100%) ;
}
100%{
transform: scale(0.3) translateY(0px);
}
}
.borderbottom{
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rgb(61, 233, 99);
filter: blur(20px);
animation: zhuan 3s infinite;
}
/*给显示数字的圆圈动画效果,让它转起来*/
@keyframes zhuan{
0%{
transform: scale(1) rotate(0deg);
}
50%{
transform: scale(1.1) rotate(180deg);
height: 90px;
border-top-left-radius: 45%;
border-bottom-left-radius: 48%;
}
100%{
transform:scale(1) rotate(360deg);
}
}
span{
position: absolute;
color: rgb(184, 182, 182);
font-size: 26px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="border">
<div class="droplet"></div>
<div class="droplet"></div>
<div class="droplet"></div>
<div class="borderbottom"></div>
<span>99%</span>
</div>
</body>
</html>