<!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. Java 位运算符和移位运算符

    一,运算的位运算符: &  ~ |  ^     主要是对二进制的位计算 :   &  : 两个操作数中位都为1 结果才为1   其他结果为0      forExample: 128 ...

  2. new Date() 对象及方法：

    在别人的代码中见了两回 new Date().toLocaleString(),查了才知道,toLocaleString()是 根据本地时间格式,把 Date 对象转换为字符串.于是好奇new Dat ...

  3. 链表两数相加(add two numbers)

    问题 给出两个 非空 的链表用来表示两个非负的整数.其中,它们各自的位数是按照 逆序 的方式存储的,并且它们的每个节点只能存储 一位 数字. 如果,我们将这两个数相加起来,则会返回一个新的链表来表示它 ...

  4. [Python3 填坑] 007 多才多艺的 len()

    目录 1. print( 坑的信息 ) 2. 开始填坑 (1) 总的来说 (2) 举例说明 (3) 后记 1. print( 坑的信息 ) 挖坑时间:2019/01/10 明细 坑的编码 内容 Py0 ...

  5. Git利用命令行提交代码步骤

    利用命令行提交代码步骤进入你的项目目录1:拉取服务器代码,避免覆盖他人代码git pull2:查看当前项目中有哪些文件被修改过git status具体状态如下:1:Untracked: 未跟踪,一般为 ...

  6. 【转载】研发应该懂的binlog知识(下)

    引言 这篇是<研发应该懂的binlog知识(上)>的下半部分.在本文,我会阐述一下binlog的结构,以及如何使用java来解析binlog.不过,话说回来,其实严格意义上来说,研发应该还 ...

  7. 问题 M: 最亲密的x个人

    问题 M: 最亲密的x个人 时间限制: 1 Sec  内存限制: 128 MB提交: 412  解决: 38[提交] [状态] [命题人:jsu_admin] 题目描述 有一天,地球受到了降维打击,从 ...

  8. MVC调用函数function.php

    <?php //控制器的调用函数C function C($name, $method){ require_once('/libs/controller/'.$name.'Controller. ...

  9. 在vsCode中用git命令合并分支

    提交修改代码到本地仓库 $ git commit -m "修改的东西的描述"切换到master主分支上 $ git checkout master拉取主分支上面的代码 $ git ...

  10. 处理Chrome等浏览器无法上网，但QQ能正常使用问题

    常见于安装VPN软件后导致的问题: 问题描述:QQ.微信客户端.等聊天工具可以聊天,但不能使用浏览器:打开网页失败:网络连接正常 问题解决步骤: 策略1: 打开网络和共享中心>>> ...