使用JavaScript实现旋转的彩圈特效
作者：hebedich 时间：2023-08-22 16:34:53
使用JavaScript写的一个旋转的彩圈
效果图
<!DOCTYPE html>
<html>
<head>
<script src="/jquery-1.11.3.min.js"></script>
<script>
for(var i=0;i<100000;i++)
{
if(i％4==0)
setTimeout("$('#div1').css({'border-left':'40px solid red','border-bottom':'40px solid green','border-right':'40px solid yellow','border-top':'40px solid blue'})",2000*i);
if(i％4==1)
setTimeout("$('#div1').css({'border-left':'40px solid blue','border-bottom':'40px solid red','border-right':'40px solid green','border-top':'40px solid yellow'})",2000*i);
if(i％4==2)
setTimeout("$('#div1').css({'border-left':'40px solid yellow','border-bottom':'40px solid blue','border-right':'40px solid red','border-top':'40px solid green'})",2000*i);
if(i％4==3)
setTimeout("$('#div1').css({'border-left':'40px solid green','border-bottom':'40px solid yellow','border-right':'40px solid blue','border-top':'40px solid red'})",2000*i);
}
</script>
<style>
#div2{
width: 100px;
height: 100px;
border-left: 40px solid red;
border-right: 40px solid yellow;
border-bottom: 40px solid green;
border-top:40px solid blue;
background-color:#FFFFFF;
border-radius:900px/900px;
display:none;
top:0px;
left:0px;
position:relative;
z-index:1;
}
#div1{
width: 100px;
height: 100px;
border-left: 40px solid red;
border-right: 40px solid yellow;
border-bottom: 40px solid green;
border-top:40px solid blue;
background-color:#FFFFFF;
border-radius:90px/90px;
}
</style>
</head>
<body>
<p style="color:#FF0000">ÐýתµÄȦ</p>
<div id="div1"></div>
</body>
</html>
以上所述就是本文的全部内容了，希望大家能够喜欢。
标签：JavaScript,旋转,彩圈
0
投稿猜你喜欢
像懒人一样去设计
2009-04-23 12:43:00
Python3 伪装浏览器的方法示例
2023-11-16 21:53:44
python使用正则筛选信用卡
2021-03-10 14:06:47
js实现网页标题栏闪烁提示效果实例分析
2024-04-16 09:05:11
用 Python 连接 MySQL 的几种方式详解
2023-07-25 08:08:50
根据多条件查询临时表 想得到不同结果集的方法
2024-01-23 22:49:37
python webp图片格式转化的方法
2021-09-03 16:27:44
什么是XSL?
2007-11-05 19:47:00
Python列出一个文件夹及其子目录的所有文件
2023-12-08 17:49:01
driver = webdriver.Chrome()报错问题及解决
2023-04-09 21:03:16
两个2008北京奥运会倒计时js代码
2008-06-11 13:26:00
Python嵌套函数，作用域与偏函数用法实例分析
2022-12-03 08:46:15
Python中的if、else、elif语句用法简明讲解
2023-05-18 22:18:59
python集合的新增元素方法整理
2022-10-13 02:45:28
Pycharm连接远程服务器并远程调试的全过程
2023-12-26 23:36:03
Vue Echarts实现实时大屏动态数据显示
2024-04-27 15:52:02
详解如何基于Pyecharts绘制常见的直角坐标系图表
2022-07-08 05:18:31
Python产生一个数值范围内的不重复的随机数的实现方法
2023-09-19 21:48:09
Springboot获取前端反馈信息并存入数据库的实现代码
2024-01-15 09:06:15
Python求离散序列导数的示例
2022-10-04 11:18:52
