<!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. 重置Docker里的gitlab管理员用户密码

    1.docker ps  找出容器的唯一标识 2.docker exec -it ad9b8c3e20f0 /bin/bash  进入Docker容器运行环境 3.开始重置gitlab管理员用户密码 ...

  2. Ad Hoc Distributed Queries / xp_cmdshell 的启用与关闭

    启用Ad Hoc Distributed Queries: reconfigure reconfigure 关闭Ad Hoc Distributed Queries: reconfigure reco ...

  3. python-docx 添加表格时很慢的解决方法

    我们做监控系统的时候常需要给客户发送邮箱报告,附带一个word的文档,文档中插入表格给用户更直观的数据. 我用的时python-docx库操作文档,最近碰到,当往文档中插入表格时,随着表格行数的增多, ...

  4. Linux安装了mysql 无法远程连接

    问题: 本地安装完mysql,无法远程连接 1.检查mysql进程是否启动 ps -ef|grep -i mysql 2.查看端口是否监听 netstat -ntlp 3.查看iptables配置 v ...

  5. 2014-03-01 春季PAT 1073-1076解题报告

    今天下午的PAT考试状态不理想,回来怒刷了一遍,解题报告如下: 1073. Scientific Notation (20) 基本模拟题,将一长串的科学计数转换为普通的数字表示方式.思路是是数组存储输 ...

  6. centos7 内网可达，外网不可达

    参考:https://www.cnblogs.com/operationhome/p/10207257.html 网关地址改为192.168.1.1

  7. mvn 打包排除test

    mvn clean package compile -Dmaven.test.skip=true

  8. 2018-10-25-weekly

    Algorithm 94. 二叉树的中序遍历 What 给定一个二叉树,返回它的中序遍历. How 二叉树的中序遍历顺序为左-根-右,可以用递归来解,对左子结点调用递归函数,根节点访问值,右子节点再调 ...

  9. 六、MyBatis-缓存机制

    MyBatis 包含一个非常强大的查询缓存特性,它可以非常方便地配置和定制.缓存可以极大的提升查询效率.MyBatis系统中默认定义了两级缓存, 一级 缓存和 二级缓存.– 1.默认情况下,只有一级缓 ...

  10. 二、MyBatis-HelloWorld

    环境准备 1.创建数据库表 create table tbl_employee ( id ) primary key AUTO_INCREMENT comment "ID", la ...