使用JavaScript实现旋转的彩圈特效
作者：hebedich 发布时间：2023-08-22 16:34:53
标签：JavaScript,旋转,彩圈
使用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>
以上所述就是本文的全部内容了，希望大家能够喜欢。
0
投稿猜你喜欢
- 以下的文章主要介绍的是MySQL 查询缓存的实际应用代码以及查看MySQL 查询缓存的大小 ，碎片整理，清除缓存以及监视MySQL 查询缓存
- 这篇论坛文章（赛迪网技术社区）着重介绍了有关SQL注入防御的防御策略及实施步骤，详细内容请参考下文：从去年下半年开始，很多网站被损害，他们在
- MySQL 系统会在内存(MEMORY)和磁盘(MyISAM)中建立临时表，如何能知道在磁盘中建立了多少临时表以及在内存中建立多
- 1.在查询结果中显示列名： a.用as关键字：select name as '姓名' from students order
长话短说：本人下载 matplotlib 花了大概三个半小时屡屡碰壁，险些暴走。为了不让新来的小伙伴走我的弯路，特意创作本片文章指明方向。1- 我们经常会遇到这样的问题你还在为你的MySQL命令模式下，前面的提示信息还是：mysql>，那么我们如何更改mysql命令下提示信息呢
- check.asp 代码如下:<％ '''''''''
- 一、错误提示：用户登录失败,该用户与可信SQL Server连接无关联 错误18452原因是远程登录没配置好，配置方法如下：1：开启SQL2
- 一、前言准备编写一个篮球游戏，运动员带球跑，跳起投篮。在每帧图片中包括运动员和篮球，使用多帧图片，实现运动员运球跑动的效果。运动员运球跑动作
- 常用当前循环.作用default数据为空时设置默认值length取变量长度filesizeformat文件大小转成可读slice从指定位置到
- strip()方法返回所有字符从开始及字符串的末尾(默认空格字符)被去除后的字符串的一个副本。语法以下是strip()方法的语法
- 我最近在涉及大量数据处理的项目中频繁使用 sqlite3。我最初的尝试根本不涉及任何数据库，所有的数据都将保存在内存中，包括字典查找、迭代和
- 一、subprocess以及常用的封装函数运行python的时候，我们都是在创建并运行一个进程。像Linux进程那样，一个进程可以fork一
- 上一篇文章Python中schedule模块关于定时任务使用方法1 设置时间间隔随机数在有一些场景下，为了模拟比较自然的情景，需要采用随机的
- 如下所示：device = torch.device("cuda:0" if torch.cuda.is_availab
- 我们平常用 IE 打开一个普通的本地 xml 文件，其形式通常都是如下图： 默认样式看得多了就不觉得有什么特别。但对于少接触 xml 的人来
- linux默认是安装了python，默认是安装python2.6.6，可能安装的版本是不能符合我们需要的python要求的。我们需要重新安装
- 小主我总结了一下，看官仅供参考。具体运行时间，要看电脑，程序复杂程度，截图大小，原本为四个方法，后面又发现了一种。补上运行熟练度等因素。方法
- JavaScript lastIndexOf 方法lastIndexOf 方法用于计算指定的字符串在整个字符串中最后一次出现的位置，并返回该
- 如果存储姓名的字段采用的是GBK字符集，那就好办了，因为GBK内码编码时本身就采用了拼音排序的方法（常用一级汉字3755个采用拼音排序，二级
