1.文字闪烁
<div class="fade-text">这是一段忽亮忽暗的文字</div>
.fade-text {
animation: fadeInOut 2s infinite;
opacity: 1; /* 初始透明度 */
}
@keyframes fadeInOut {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
动画效果通过文字的透明度实现,整个过程2s,到1s的时候会变成一般的透明度,这样就简单的实现了;
2.三个点加载中样式
每一个点的动画是一样的,只不过每一个点会有不同的延迟执行的时间,这样就实现加载中的效果。
<span className='dots'>
<span>.</span>
<span>.</span>
<span>.</span>
</span>
.dots {
display: inline-block;
font-size: 22px;
font-weight: bold;
margin-top: -10px;
}
@keyframes dotAppear {
0% {
opacity: 0;
}
33% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.dots span {
display: inline-block;
padding-right: 1px;
animation: dotAppear 1.5s infinite;
}
.dots span:nth-child(1) {
animation-delay: 0s;
}
.dots span:nth-child(2) {
animation-delay: 0.5s;
}
.dots span:nth-child(3) {
animation-delay: 1s;
}