<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>圆周运动的css3特效</title>
    <style>
        .box{
            width:300px;
            height:300px;
            margin:200px auto;
            position:relative;
            -webkit-perspective:1500px;
        }
        .div{
            width:300px;
            height:300px;
            position:absolute;
            transform-style:preserve-3d;
            animation:name 8s linear infinite;
            transform:rotateX(0deg) rotateY(0deg);
        }
        @-webkit-keyframes name {
            from{
                transform:rotateX(0deg) rotateY(0deg);
            }
            to{
                transform:rotateX(360deg) rotateY(360deg);
            }
        }
        .div>div{
            width:300px;
            height:300px;
            border:black 1px solid;
            position:absolute;
            border-radius:50%;
        }
        .box1{
            transform:rotateY(0deg);
        }
        .box2{
            transform:rotateY(120deg);
        }
        .box3{
            transform:rotateY(240deg);
        }
        .inner{
            width:6px;
            height:6px;
            position:absolute;
            top:300px;
            left:150px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="div">
            <div class="box1"></div>
            <div class="box2"></div>
            <div class="box3"></div>
        </div>
    </div>
</body>
</html>
<script>
    var box1=document.querySelector(".box1");
    var box2=document.querySelector(".box2");
    var box3=document.querySelector(".box3");
    function create(a){
        for(var i=0;i<100;i++){
            var div=document.createElement("div");
            div.className="inner";
            a.appendChild(div)
        }
    }
    create(box1)
    create(box2)
    create(box3)
    function an(b){
        var inner=b.querySelectorAll(".inner");
        var i=0;   //角度
        var j=0;   //元素下标
        var pi=Math.PI/180;
        var t=null;
        t=setInterval(function(){
            i++;   
            if(i>=360){
                i=0;
            }
            if(j>=100){
                j=0;
            }
            inner[j].style.background="rgb("+Math.floor(Math.random()*225)+","+Math.floor(Math.random()*225)+","+Math.floor(Math.random()*225)+")";
            inner[j].style.left=150+Math.floor(150*Math.sin(i*pi))-3+"px";
            inner[j].style.top=150-Math.floor(150*Math.cos(i*pi))-3+"px";
            j++;
        },10)
    }
    an(box1);
    an(box2);
    an(box3);
</script>

圆周运动的css3特效案例的更多相关文章

  1. CSS3 特效分解一

    先声明下,下面的特效不是我发明的,对CSS3的创造力还不够,只是看了别人demo的源码,一点一点分析出来的.整理出的笔记,分享给大家.因为源码是好,但是一头扎进去半天出不来. 首先看个登陆框,如下,相 ...

  2. 15款效果很酷的最新jQuery/CSS3特效

    很久没来博客园发表文章了,今天就分享15款效果很酷的最新jQuery/CSS3特效,废话不说,一起来看看吧. 1.3D图片上下翻牌切换 一款基于jQuery+CSS3实现的3D图片上下翻牌切换效果,支 ...

  3. HTML5 CSS3 经典案例：无插件拖拽上传图片 （支持预览与批量） （二）

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/31513065 上一篇已经实现了这个项目的整体的HTML和CSS: HTML5 C ...

  4. CSS3特效之转化（transform）和过渡（transition）

    CSS3特效之转化(transform)和过渡(transition) 在对动画深入之前,我们需要先了解它的一些特性,CSS3的转化(transform)和过渡(transition).有人可能会有疑 ...

  5. 有趣的css3实战案例剖析——（水纹波动）

    对于css3的学习,更多的是在于对新特性和基础理论的熟悉, 这篇文章通过一个案例带领大家了解css3里一些理论知识,也将一些技巧加以总结,从而提高大家的开发效率: 本次案例为(水纹波动),不用js写动 ...

  6. 9 款赏心悦目的 HTML5/CSS3 特效

    1.HTML5 WebGL实验,超酷的HTML5 Canvas波浪墙 这是一款HTML5 Canvas实验项目,也是波浪特效,只是这不是真正的水波,而是利用柱体高度的变化实现的波浪墙效果. 在线演示 ...

  7. 14种网页jQuery和css3特效插件代码演示

    1.网页table增删样式代码 演示和下载地址 2.jQuery左右滑动幻灯片插件 演示和下载地址 3.jQuery文字轮播焦点图 演示和下载地址 4.网页文字焦点图切换 演示和下载地址 5.jQue ...

  8. HTML5 CSS3 精美案例 ： 达到VCD盒个性幻灯片

    转载请注明出处:http://blog.csdn.net/lmj623565791/article/details/31015121 哈,首先感谢下w3cfuns教师,行~ 行.这一次分享发夹CSS3 ...

  9. HTML5 CSS3 精美案例 ： 实现VCD包装盒个性幻灯片

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/31015121 哈,首先感谢下w3cfuns的老师,嗯~ 好了,这次给发夹分享一个 ...

随机推荐

  1. mybatis初步理解

    mybatis概念   mybatis 是一款轻量级的orm的数据持久框架,封装jdbc 对开发提供了便利,但是性能会比jdbc低,从开发的角度来说,现在是比较流行的 掌握上比较容易,也支持缓存,级联 ...

  2. C#打印单据

    HTML: <form id="form1">        <div id="t_border">            <!- ...

  3. [19/05/17-星期五] HTML_body标签(内嵌标签)和框架标签

    一.内嵌标签 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!- ...

  4. Java-集合第三篇List集合

    1.List集合 有序可重复集合,集合中的每个元素都有其对应的顺序索引. 2.List相对于Collection额外提供的方法: 1>void add(int index,Object elem ...

  5. Maven-maven安装、Eclipse配置maven

    1.下载maven安装包,下载完成,解压到安装路径. 2.配置环境变量 3.修改setting.xml配置本地库,阿里云中央仓库 路径:C:\fyliu\software\apache-maven-3 ...

  6. 如何配置属于自己的Git账户

    如何配置属于自己的Git账户:https://jingyan.baidu.com/article/3d69c55123e556f0cf02d730.html

  7. JS 总结之关于 this 应该知道的几个点

    JS 中的 this 对每位前端工程师都不陌生,经常看到对象这里 this 那里 this,那什么是 this?答案就是上下文对象,即被调用函数所处的环境,也就是说,this 在函数内部指向了调用函数 ...

  8. Javascript 中的深浅拷贝

    工作中经常会遇到需要复制 JS 数据的时候,遇到 bug 时实在令人头疼:面试中也经常会被问到如何实现一个数据的深浅拷贝,但是你对其中的原理清晰吗?一起来看一下吧! 为什么会有深浅拷贝 想要更加透彻的 ...

  9. 搜索（DFS）---好友关系的连通分量数目

    好友关系的连通分量数目 547. Friend Circles (Medium) Input: [[1,1,0], [1,1,0], [0,0,1]] Output: 2 Explanation:Th ...

  10. JavaScript基础7——动态生成表格

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...