<!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. 设置HTML中字体的粗细

    设置font-weight 属性:normal : 默认值.正常的字体.相当于 400 .声明此值将取消之前任何设置bold : 粗体.相当于 700 .也相当于 b 对象的作用bolder : 比 ...

  2. 简述移动端与PC端的区别

    1.移动端与PC端的区别 PC考虑的是浏览器的兼容性,而移动端开发考虑的更多的是手机兼容性,因为目前不管是android手机还是ios手机,一般浏览器使用的都是webkit内核,所以说做移动端开发,更 ...

  3. pandas 入门（3）

    from pandas import Series, DataFrame, Index import numpy as np # 层次化索引 对数据重塑和分组操作很有用 data = Series(n ...

  4. Python函数装饰器原理与用法详解《摘》

    本文实例讲述了Python函数装饰器原理与用法.分享给大家供大家参考,具体如下: 装饰器本质上是一个函数,该函数用来处理其他函数,它可以让其他函数在不需要修改代码的前提下增加额外的功能,装饰器的返回值 ...

  5. 老技术记录-C#+SqlServer使用SqlDependency监听数据库表变化

    开发环境: .net / C# (.net core理论上也可以) 数据库:MS SQL Server 2005 以上 (我用的sqlserver2012) 功能:SqlDependency提供了一种 ...

  6. Java继承：super关键字、构造器、final用法

    一.继承 继承好处 1.提高代码的重用性 2.提高代码的扩展性和维护性 3.为多态打下了基础 继承类型 继承子类创建对象的过程 二.super关键字的使用 理解:super代表父类的引用,用于访问父类 ...

  7. [常用类]StringBuffer 类，以及 StringBuilder 类

    线程安全,可变的字符序列. 字符串缓冲区就像一个String ,但可以修改. 在任何时间点,它包含一些特定的字符序列,但可以通过某些方法调用来更改序列的长度和内容. 字符串缓冲区可以安全地被多个线程使 ...

  8. mysql自动备份脚本

    linux系统mysql5.6版本实现自动备份步骤 1.sudo mysql --help | grep my.cnf 查找my.cnf文件2.在文件中添加如下行实现免输入密码[mysqldump]u ...

  9. SSM商城系统开发笔记-问题02- Error creating bean with name 'userController'

    Caused by: org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean wit ...

  10. spark复习笔记(5):API分析

    0.spark是基于hadoop的mr模型,扩展了MR,高效实用MR模型,内存型集群计算,提高了app处理速度. 1.特点:(1)在内存中存储中间结果 (2)支持多种语言:java scala pyt ...