简单脉冲动画效果实现
效果展示
CSS 知识点
页面整体结构实现
html
复制代码
<div class="pulse">
<span style="--i: 1"></span>
<span style="--i: 2"></span>
<span style="--i: 3"></span>
<span style="--i: 4"></span>
<span style="--i: 5"></span>
<span style="--i: 6"></span>
</div>
实现整体布局
css
复制代码
.pulse {
position: relative;
width: 200px;
height: 200px;
box-shadow: inset 0 0 40px #12b9ff, 0 0 50px #12b9ff;
border-radius: 50%;
border: 1px solid #12b9ff;
background: url(./earch.jpg);
background-size: cover;
}
.pulse span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: transparent;
border: 1px solid #12b9ff;
border-radius: 50%;
}
使用CSS变量和动画实现脉冲效果
css
复制代码
.pulse span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: transparent;
border: 1px solid #12b9ff;
animation: animate 6s linear infinite;
border-radius: 50%;
animation-delay: calc(var(--i) * -1s);
}
@keyframes animate {
0%{
width: 200px;
height: 200px;
opacity: 1;
}
50% {
opacity: 1;
}
100% {
width: 600px;
height: 600px;
opacity: 0;
}
}
实现地球运动效果
css
复制代码
.pulse {
position: relative;
width: 200px;
height: 200px;
box-shadow: inset 0 0 40px #12b9ff, 0 0 50px #12b9ff;
border-radius: 50%;
border: 1px solid #12b9ff;
background: url(./earch.jpg);
background-size: cover;
animation: animateEarth 30s linear infinite;
}
@keyframes animateEarth {
0% {
background-position-x: 0px;
}
100% {
background-position-x: 2400px;
}
}
完整代码下载
完整代码下载