用css3属性很容易做一个立方体，但是要做一个球体，会相对复杂些

原理是：球可以看做是由无数个圆圈构成，然后就可以用圆圈来做球，

下面的例子是我做的一个小球，由72个圆圈组成。如果把每个圆圈的背景颜色设置同一颜色，效果更佳

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        body{

            perspective: 1000px;

            background-color: grey;

        }

        .bigBox{

            width: 80px;

            height: 80px;

            border-radius: 50%;

            position: relative;

            margin: 100px auto;

            transform-style: preserve-3d;

        }

        ul{

            padding: 0;

            margin: 0;

            width: 80px;

            height: 80px;

            border-radius: 50%;

            box-shadow: 0 0 1px 1px yellowgreen;

            position: absolute;

            list-style: none;

            transform-style: preserve-3d;

        }

        .qiuXian{

            padding: 0;

            margin: 0;

            width: 80px;

            height: 80px;

            border-radius: 50%;

            box-shadow: 0 0 1px 1px yellowgreen;

            position: absolute;

            list-style: none;

        }

        @keyframes zizhuan {

            from{rotateX(0deg) rotateY(0deg) }

            to{

                transform: rotateX(360deg) rotateY(360deg);

            }

        }

        .animation{

            animation: zizhuan 10s linear infinite;

        }

    </style>

    <script>

     window.onload= function () {

            function zaoQiu(id,className) {

                var ele = document.getElementById(id);

                for(var i = 0 ; i < 72 ; i++){

   //创建div元素

                    var div = document.createElement("div");

//将创建出来的div的className 统一设置为className,方便通过CSS 设置样式

                    div.className = className;

 //在目标元素中添加该div

                    ele.appendChild(div);

                }

//获取新创建出来的所有div

                var divs = document.getElementsByClassName(className);

//首先遍历前一半的div，并设置他们的属性

                for(var i = 0 ; i < 36 ; i++){

                    divs[i].style.transform = "rotateY("+10*i+"deg)";

                }

 //遍历后一半的div，并设置它们的属性

                for(var i = 36 ; i < divs.length ; i++){

                    divs[i].style.transform =  "rotateX("+10*i+"deg)";

                }

            }

            zaoQiu("bigBox","qiuXian");

         }

    </script>

</head>

<body>

<div class="bigBox animation" id="bigBox">

</div>

</body>

</html>

用js，css3 做的一个球的更多相关文章

  1. 用js+css3做一个小球投篮的动画（easing）

    <!DOCTYPE html> <html> <head> <script src="jquery-1.11.3.min.js">& ...

  2. 做了一个图片等比缩放的js

    做了一个图片等比缩放的js 芋头 发布在view:8447   今天改了一下博客的主题,发现博客主题在ie6下变样了,后来发现是因为某篇文章里的某个图片太大了撑开了容器,导致样式错位,前几天公司需求里 ...

  3. (Demo分享)利用JavaScript（JS）做一个可输入分钟的倒计时钟功能

    利用JavaScript(JS)实现一个可输入分钟的倒计时钟功能本文章为 Tz张无忌 原创文章,转载请注明来源,谢谢合作! 网络各种利用JavaScript做倒计时的Demo对新手很不友好,这里我亲手 ...

  4. 用js给闺女做了一个加减乘除的html

    下班回家用二十分钟给闺女做了一个加减乘除的页面,顺便记录下代码,时间仓促,后期再来修改吧 目录结构 -yq --menu.html --yq.html --yq50.html --yq70.html ...

  5. H5+JS+CSS3 综合应用

    慕课网新教程H5+JS+CSS3 实现的七夕言情主题效果已经出炉了 从设计到实现到录制与编写用了快1个月的时间,说真的这个案例是慕课定制的,我之前也没有系统的做过这样的一个效果,在实现的时候自己也重新 ...

  6. [应用][js+css3]3D盒子导航[PC端]

    CSS3构建的3D盒子之导航应用 1.在用css3构建的盒子表面,放上iframe,来加载导航页面. 2.鼠标左键按下移动可旋转盒子,寻找想要的网址. 3.左键单机盒子表面,将全屏现实所点盒子表面的网 ...

  7. 【学】CSS3基础实例1 - 用CSS3做网页中的小三角，以及transition的用法

    自开了博客园已经有2周了吧,虽然转载了一些觉得比较有用的文章之外还没有开始写自己的一些学习记录,那就从今天开始. 目前看了妙味的不少视频,有css+html,js的基础和中级也都看完了,作业也都做了, ...

  8. js+css3+HTML5拖动滑块(type="range")改变值

    最近在做一个H5的改版项目,产品和设计给出的效果中有一个拖动滑块可以改变输入值的效果,类似如下图这样: 拿到这样的设计稿后,我有点懵了,自己写一个js?去网上找一个这样的效果?自己写一个可以,只是实现 ...

  9. CSS3 实现的一个简单的"动态主菜单" 示例[转]

    其实这个示例蛮无聊的 很简单 也没什么实际的用处. 主要是展示了 CSS3 如何实现动画效果. 写这个主要是想看一看 完成这样的效果 我到底要写多少代码. 同时和我熟悉的java做个比较. 比较结果不 ...

随机推荐

  1. C#通过socket判断FTP服务器是否通畅并判断用户名密码是否正确

    private static ManualResetEvent timeoutObject; private static Socket socket = null; private static b ...

  2. Win10 的虛擬桌面

    Win10 的虛擬桌面我覺得蠻多餘的,平常很少用,除非是像以前的 "切換老闆鍵" ,老闆來了,你不想讓他知道你在幹嘛,趕快切換另外一個桌面. 切換工作視窗:Alt + Tab 叫出 ...

  3. 【转】java调用存储过程和函数

    一.概述 如果想要执行存储过程,我们应该使用 CallableStatement 接口. CallableStatement 接口继承自PreparedStatement 接口.所以CallableS ...

  4. 限制EditText的输入字数

    private EditText edit_student_name; edit_student_name.addTextChangedListener(changeStudentNameWatche ...

  5. 浅谈JavaWEB入门必备知识之Servlet入门案例详解

    工欲善其事.必先利其器,想要成为JavaWEB高手那么你不知道servlet是一个什么玩意的话,那就肯定没法玩下去,那么servlet究竟是个什么玩意?下面,仅此个人观点并通过一个小小的案例来为大家详 ...

  6. KingbaseES的DBLink创建

    创建一个KDB库,建立dblink,需要在KDB库内访问KINGBASE库中的数据: KINGBASE=#CREATE DATABASE KDB [kingbase@localhost config] ...

  7. JS之ONLoad事件

    如果我问你window.load和window.onload分别是什么意思,恐怕你会回答我:“这不是页面加载完就执行吗”. 但是答案是不一定,得看你怎么用.看一下例子吧 例1: <!DOCTYP ...

  8. Pomelo框架

    一个典型的多进程MMO运行架构, 如下图所示: pomelo框架的组成如图所示: 架构把游戏服务器做了抽象, 抽象成为两类:前端服务器和后端服务器, 如图: 前端服务器(frontend)的职责: 负 ...

  9. Bootstrap入门（二十五）JS插件2：过渡效果

    Bootstrap入门(二十五)JS插件2:过渡效果 对于简单的过渡效果,只需将 transition.js 和其它 JS 文件一起引入即可.如果你使用的是编译(或压缩)版的bootstrap.js  ...

  10. page cache 与free

    我们经常用free查看服务器的内存使用情况,而free中的输出却有些让人困惑,如下: 先看看各个数字的意义以及如何计算得到: free命令输出的第二行(Mem):这行分别显示了物理内存的总量(tota ...