使用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
投稿猜你喜欢
- 1.设置phpMyAdmin Language:Chinese simplified (zh-utf-8)MySQL 字符集：UTF-8 U
- 代码如下: var params = new Enumerator(Request.QueryString); while (!params
- 这篇文章主要介绍了python numpy数组中的复制知识解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,
1.0 为什么要做这个博客站？在工作学习中，经常要搜索查找各种各样的资料，每次找到相关资料后都会顺手添加到浏览器书签中，时间一长，书签也就满- PDOStatement::nextRowsetPDOStatement::nextRowset — 在一个多行集语句句柄中推进到下一个行集
- 1.新建四个层，放入相应图片，模特层的z-index值设为0。2.把第一个层移到模特身上，找出衣服刚好穿上时层的top和left值，记下来，
- Lightbox里面的一个函数,能把页面实际的高宽与浏览器可视面积的高宽保存在一个数组中..非常好用.什么是Lightbox？下载light
- 原来的语句是这样的： select sum(sl0000) from xstfxps2 where dhao00 in ( select d
- Data URIData URI是由RFC 2397定义的一种把小文件直接嵌入文档的方案。通过如下语法就可以把小文件变成指定编码直接嵌入到页
- <HTML><HEAD><TITLE>SQL Server 数据库的备份
- 用6N±1法求素数任何一个自然数，总可以表示成为如下的形式之一：6N，6N+1，6N+2，6N+3，6N+4，6N+5 (N=0，1，2，…
- 我认为多选列表具有完美的功能——只需按下Ctrl键，同时点击鼠标从列表中选择多个项目。以下是一个典型的多选列表框： 上面那个列表框
- 代码如下:use tempdb if object_id('tempdb..#table') is not null dro
- 程序编制 随着WEB的发展，与浏览者的交互越来越受到网站制作者的重视。现在的主页跟最初的静态主
- 请问，如何在ACCESS数据库和SQL SERVER数据库中查询？
- 项目需求：将kafka解析来的日志获取到数据库的变更记录，按照订单的级别和订单明细级别写入数据库，一条订单的所有信息包括各种维度信息均保存在
- XML是一个精简的SGML，它将SGML的丰富功能与HTML的易用性结合到Web的应用中。XML保留了SGML的可扩展功能，这使XML从根本
- Microsoft SQL Server 2005 Mobile Edition 3.0 (SQL Server Mobile) 支持两种与
- 比如可以定义开学时间为2009年2月8日，然后程序可以算出，今天距开学那天已经是第几周，非常急需这个程序，忘高手们能提供一个，先谢谢了！自己
- 对于什么是好设计，一万个人那里至少有一万零一个答案。每个人都有自己的答案，有的人还不止一个答案。老师说，一定要在设计里灌注自己的思想，有了自
