<!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. gradle使用方法

    创建一个项目 你可以通过创建一个build.gradle的文件来开始一个项目,然后可以向文件中加入构建逻辑. $ mkdir basic-demo $ cd basic-demo $ touch bu ...

  2. 【洛谷p3958】奶酪

    奶酪[题目链接] 题前废话不知道说啥了啊qwq(越来越沉默寡言) 好了看题: SOLUTION: 思路的话,大概是搜索,然后大概广搜??? 但是我们今天写深搜(也是听xcg大佬讲了以后的整理博) 首先 ...

  3. Snacks HDU 5692 dfs序列+线段树

    Snacks HDU 5692 dfs序列+线段树 题意 百度科技园内有n个零食机,零食机之间通过n−1条路相互连通.每个零食机都有一个值v,表示为小度熊提供零食的价值. 由于零食被频繁的消耗和补充, ...

  4. 移动端抓包工具——Fiddler（一）

     web端抓包一般利用浏览器自带的检查功能(F12),然后看Network项,根据请求响应判断出问题 移动端怎么抓包呢,这里介绍一款常用的抓包工具——Fiddler 前提: 1.必须确保安装fiddl ...

  5. 不定参数（rest 参数 ...）

    不定参数 如何实现不定参数 使用过 underscore.js 的人,肯定都使用过以下几个方法: _.without(array, *values) //返回一个删除所有values值后的array副 ...

  6. Elasticsearch7.X 入门学习第二课笔记----基本api操作和CRUD

    原文:Elasticsearch7.X 入门学习第二课笔记----基本api操作和CRUD 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链 ...

  7. vue - 过滤器filter的基本使用

    1.全局过滤器 输出: 过滤器可以多次来调用 输出: 2.私有过滤器 <!DOCTYPE html> <html lang="en"> <head&g ...

  8. ajax图片上传(asp.net +jquery+ashx)

    一.建立Default.aspx页面 <%@ Page Language="C#" AutoEventWireup="true"  CodeFile=&q ...

  9. 在Eclipse-jee-neon中配置springsource-tool-suite

    今天为大家展示如何在Eclipse-jee-neon中配置spring的插件(springsource-tool-suit): 打开Eclipse,查看自己的版本. Help –> About ...

  10. Linux用户都应该了解的命令行省时技巧

    每个Linux用户都应该了解的命令行省时技巧 有网友在问答网站Quora上提问:“有哪些省时小技巧,是每个Linux用户都应该知道的?” Joshua Levy 平常就在 Linux 平台工作,并且他 ...