<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
background-color: #3D4852;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow-x: hidden; overflow-y: hidden;
}
.container {
display: flex;
justify-content: center;
align-items: center;
position: relative;
height: 100px;
width: 100px;
}
.radial {
position: absolute;
height: 10px;
width: 30px;
border-radius: 5px;
background-color: #606F7B;
left: -15px;
transform: rotate(0deg);
transform-origin: 65px;
transition:background 1s, box-shadow 1s;
}
.glow{
background: #51D88A;
box-shadow: 0 0 25px 2px #A2F5BF;
}
.radial:nth-child(1){transform: rotate(0deg);}
.radial:nth-child(2){transform: rotate(45deg);}
.radial:nth-child(3){transform: rotate(90deg);}
.radial:nth-child(4){transform: rotate(135deg);}
.radial:nth-child(5){transform: rotate(180deg);}
.radial:nth-child(6){transform: rotate(225deg);}
.radial:nth-child(7){transform: rotate(270deg);}
.radial:nth-child(8){transform: rotate(315deg);}
</style>
</head>
<body>
<div class="container">
<div class="radial"></div>
<div class="radial"></div>
<div class="radial"></div>
<div class="radial"></div>
<div class="radial"></div>
<div class="radial"></div>
<div class="radial"></div>
<div class="radial"></div>
</div>
<script>
let radial = document.getElementsByClassName('radial');
let i = 0;
setInterval(function () {
for(let i = 0;i<radial.length;i++){
radial[i].className = 'radial';
}
radial[i++].className += ' glow'
if(i === 8){
i=0;
}
},500);
</script>
</body>
</html>
javascript:js+css实现加载特效
原创
©著作权归作者所有:来自51CTO博客作者KaiSarH的原创作品,请联系作者获取转载授权,否则将追究法律责任
运行效果
上一篇:CSS:实现跳动小球蒙版效果
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
利用卡片翻转特效实现时钟效果
利用动画事件监听和requestanimationframe实现时钟的翻牌特效
requestanimatioframe 动画事件监听 时钟 翻牌 重绘 -
js插件;特效特效;
js特效
js 常见特效 -
js特效
一些js特效
js特效 -
js 时钟特效
时钟特效 CreateTime--2018年2月24日15:11:23 Author:Marydon 实现方式:都是基于HTML5的
JSUTILS charge 默认值 html javascript