运行效果

代码

<!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实现加载特效相关推荐

关于js css html加载顺序整理
参考原文豆豆蛙:关于js css html加载顺序整理 1.js放在head中会立即执行,阻塞后续的资源下载与执行.因为js有可能会修改dom,如果不阻塞后续的资源下载,dom的操作顺序不可控. 正 ...
142.CSS 海盗船加载特效
效果 (源码网盘地址在最后) 最近开源了一个 Vue 组件,还不够完善,欢迎大家来一起完善它,也希望大家能给个 star 支持一下,谢谢各位了. github 地址:https://github.co ...
82.纯CSS液体加载特效
效果 (源码网盘地址在最后) 大家都说简历没项目写,我就帮大家找了一个项目,还附赠[搭建教程]. 演示视频 [前端特效 82]纯CSS液体加载特效视频地址一:https://www.ixigua.c ...
js实现图片加载特效（从左到右，百叶窗，从中间到两边）
/* 网上百度的,感觉"从中间到两边"的效果写的不是很好,改了一下,感觉可以了!*/<html><head><title></title& ...
html图片怎么预加载,如何利用CSS和Javascript实现图片预加载
说到图片预加载,想必大家已经很熟悉了,在平时的项目中,我们常用插件实现预加载,比如:懒加载lazyload插件等等.如果你想了解下lazyload,可以看下这两篇文章: 今天主要想介绍不用插件实现图片 ...
js插件动态加载js、css解决方案
最近因为工作需要做了一个js自动导入的插件,一开始很天真的以为动态创建个script添加到head中就ok了,试了之后才发现了问题,就是如果同时引入了多个js文件,而且后一个文件中用到了前一个文件中的 ...
[css] css的加载会阻塞js运行吗？为什么？
[css] css的加载会阻塞js运行吗?为什么? 会阻塞js的执行,因为js可能会去获取或改变元素的样式,所以浏览为了不重复渲染, 等所有的css加载渲染完成后在执行js 个人简介我是歌谣,欢迎和 ...
python博客下载本地文件_解决django无法访问本地static文件(js,css,img)网页里js,cs都加载不了...
1.今天网上下载一个博客项目,发现本地访问,js,css加载不了. 我想应该是项目上线的安全措施,但是我想调试项目.找到方法如下在settings.py里面编辑添加 STATICFILES_DIR ...
js怎么动态加载js文件（JavaScript性能优化篇）
下面介绍一种JS代码优化的一个小技巧,通过动态加载引入js外部文件来提高网页加载速度 [基本优化] 将所有需要的<script>标签都放在</body>之前,确保脚本执行之前完 ...
nginx实现动态分离,解决css和js等图片加载问题
nginx实现动态分离,解决css和js等图片加载问题参考文章: (1)nginx实现动态分离,解决css和js等图片加载问题 (2)https://www.cnblogs.com/sz-jack/ ...

javascript：js+css实现加载特效

运行效果

代码

javascript：js+css实现加载特效相关推荐

最新文章

热门文章