css水波紋圖
阿新 • • 發佈:2021-02-04
技術標籤:CSS3
這裡記錄兩種水波紋圖。
第一種
程式碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#icon{
transform: rotate(6.5deg);
color: transparent;
}
</style>
</head>
<body>
<div id="icon" style="animation:myfirst 5s infinite; position: absolute;top:0;left:0;bottom:0;right:0;margin:auto;z-index:-1;width:0px;height:0px;border-radius:90px;background-image: radial-gradient(#FF3209FF 5%, #FF3209FF 15%, rgba(255,255,255,1))">
</div>
< script type="text/javascript">
document.getElementById("icon").animate(
[{
width: "135px",
height: "135px"
},
{
width: this.markerSize,
height: this.markerSize
},
], {
duration: 2000,
direction: "alternate" ,
iterations: Infinity,
easing: "ease-in-out",
fill: "backwards",
}
);
</script>
</body>
</html>
第二種
程式碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#grad2{
display: flex;
justify-content: center;
align-items: center;
width: 120px;
height: 120px;
/* background: #20308B; */
}
.inner{
width: 2px;
height: 2px;
border-radius: 50%;
transform: scale(1,0.8);
background-color: red;
animation: moveInner 1s infinite;
}
.middle{
display: flex;
justify-content: center;
align-items: center;
width: 84px;
height: 84px;
border-radius: 50%;
transform: scale(1,0.8);
background-color: rgba(255, 0, 0, 0.2);
animation: moveMiddle 1s infinite;
}
.biggest{
display: flex;
justify-content: center;
align-items: center;
width: 120px;
height: 120px;
border-radius: 50%;
transform: scale(1,0.8);
background-color: rgba(255, 0, 0, 0.1);
animation: moveBiggest 1s infinite;
}
@keyframes moveInner{
from {
width: 4px;
height: 4px;
}
to {
width: 18px
height: 18px;
}
}
@keyframes moveMiddle{
from {
width: 18px;
height: 18px;
}
to {
width: 84px
height: 84px;
}
}
@keyframes moveBiggest {
from {
width: 84px;
height: 84px;
}
to {
width: 120px
height: 120px;
}
}
</style>
</head>
<body>
<div id="grad2">
<div class="biggest">
<div class="middle">
<div class="inner"></div>
</div>
</div>
</div>
</body>
</html>