<style>
.preview{
background-color: rgba(0, 0, 0, 0);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.loading {
position: relative;
width: 150px;
height: 150px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #faf;
animation: rotate 2s linear infinite;
}
.loading::before {
content: "";
position: absolute;
top: 5px;
right: 5px;
bottom: 5px;
left: 5px;
border-radius: 50%;
/* transparent透明 */
border: 3px solid transparent;
border-top-color: #fcc;
animation: rotate 3s linear infinite;
}
.loading::after {
content: "";
position: absolute;
top: 15px;
right: 15px;
bottom: 15px;
left: 15px;
border-radius: 50%;
/* transparent透明 */
border: 3px solid transparent;
border-top-color: #fcf;
/* linear匀速 infinite持续 */
animation: rotate 1.5s linear infinite;
}
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
</style>
<div class="loading"> </div>
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
利用卡片翻转特效实现时钟效果
利用动画事件监听和requestanimationframe实现时钟的翻牌特效
requestanimatioframe 动画事件监听 时钟 翻牌 重绘 -
css 背景特效
css 背景 特效
html css ci -
css特效 - 环形文字
css特效之环形文字
css3 css动画 css -
CSS 3.0实现泡泡特效
给大家分享一个用CSS 3.0实现的泡泡特效,效果如下:以下是代码实现,欢迎大家复制、粘贴和收藏。<!DOCTYPE html><html
前端开发 CSS ci html Math -
CSS特效(弧光效果)
代码很简单, 根据需要修改标签class和弧光效果的宽高位置就可以了.
css html javascript 宽高 hive