- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>螺旋散点动画</title>
- <style>
- div{
- position:absolute;
- }
- .po-box{
- left:50%;
- top:50%;
- margin-left:-200px;
- margin-top:-200px;
- width:400px;
- height:400px;
- background-color:#000;
- }
- .po-box .item{
- width:2px;
- height:2px;
- }
- </style>
- </head>
- <body>
- <div class="po-box" id="po-box"></div>
- <script>
- function createPoint(x,y,c){
- var d = document.createElement("div");
- d.className = "item";
- d.style.left = x + "px";
- d.style.top = y + "px";
- d.style.backgroundColor = c;
- document.getElementById("po-box").appendChild(d);
- }
- function drawPoint(){
- var m = 0,n,x,y,c = "#f00";
- setInterval(function(){
- if(m < 200){
- n = m;
- x = n * Math.sin(m) + 200;
- y = n * Math.cos(m) + 200;
- createPoint(x,y,c);
- m += 0.4;
- }
- },100);
- }
- drawPoint();
- </script>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/310520133702.html
来源: http://www.codesnippet.cn/detail/310520133702.html