制作原理：在我的上一篇随笔中有详细的说明，由于这个方法制作的球，比较耗性能，就只做了3个小球，效果大家可以试验。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}

body {
background-color: black;
}

.taiYang {

width: 80px;
height: 80px;
border-radius: 40px;
box-shadow: 0 0 30px 30px pink;

opacity: 0.5;
position: absolute;
top: 50%;
margin-top: -40px;
margin-left: -40px;
left: 50%;
transform: rotateX(70deg);
transform-style: preserve-3d;
}

.ty {
width: 80px;
height: 80px;
opacity: 0.5;
border: 1px solid #EFF57E;
background-color: #EFF57E;
border-radius: 50%;

position: absolute;
}

.diQiuGD {
width: 600px;
height: 600px;
border-radius: 300px;
border: 1px solid white;
position: absolute;
top: 50%;
margin-top: -300px;
margin-left: -300px;
left: 50%;
transform-style: preserve-3d;
}

.diQiu {
width: 40px;
height: 40px;
box-shadow: 0 0 20px 20px darkgoldenrod;
border-radius: 20px;
background-color: green;
top: 20px;
left: 425px;
position: absolute;
transform: rotateX(30deg);
transform-style: preserve-3d;
}

.dq {
width: 40px;
height: 40px;
background-color: green;
border-radius: 50%;
position: absolute;
}
.yueLiangGD{
width: 150px;
height: 150px;
border-radius: 80px;
border: 1px solid white;
position: absolute;
top: 50%;
margin-top: -75px;
margin-left: -75px;
left: 50%;
transform-style: preserve-3d;
}

.yueLiang {
width: 20px;
height: 20px;
box-shadow: 0 0 10px 10px greenyellow;
border-radius: 10px;
background-color: goldenrod;
top: 102px;
left: 130px;
position: absolute;
transform-style: preserve-3d;
}

.yl {
width: 20px;
height: 20px;
background-color: goldenrod;
border-radius: 50%;
position: absolute;
}

@keyframes faguang {
0% {
box-shadow: 0 0 0 10px white;
}
50% {
box-shadow: 0 0 50px 50px white;
}
100% {
box-shadow: 0 0 0 10px white
}

}
.animation2 {
animation: faguang 3s linear infinite;
}

@keyframes zizhuan {
from {
rotateX(0 deg) rotateY(0 deg)
}
to {
transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg);
}
}

@keyframes zizhuan1 {
from {
rotateX(0 deg) rotateY(0 deg)
}
to {
transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg);
}
}

.animation {
animation: zizhuan 10s linear infinite;
}

.animation1 {
animation: zizhuan1 3s linear infinite;
}

</style>
</head>
<body>
<div class="taiYang animation2" id="taiYang">

<div class="diQiuGD animation">
<div class="diQiu" id="diQiu">
<div class="yueLiangGD animation1">
<div class="yueLiang" id="yueLiang"></div>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
window.onload = function () {
function zaoQiu(id, className) {
var ele = document.getElementById(id);
for (var i = 0; i < 36; i++) {
var div = document.createElement("div");
div.className = className;
ele.appendChild(div);
}
var divs = document.getElementsByClassName(className);
for (var i = 0; i < 18; i++) {
divs[i].style.transform = "rotateY(" + 10 * i + "deg)";
}
for (var i = 18; i < divs.length; i++) {
divs[i].style.transform = "rotateX(" + 10 * i + "deg)";
}
}
zaoQiu("taiYang", "ty");
zaoQiu("diQiu", "dq");
zaoQiu("yueLiang", "yl");
}

</script>

用CSS3 做的星体的更多相关文章

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

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

  2. CSS3做小三角形

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXgAAAA2CAIAAABC2hVZAAAgAElEQVR4nKzcd3cbV57web+1p20FW8

  3. 利用HTML5 与CSS3 做的放大镜

    利用HTML5 与CSS3 做的放大镜 html结构 <div class="wrap"> <div class="move"> < ...

  4. CSS3做动物走路效果

    CSS3做动物走路效果 采用的CSS3切换序列帧做 核心代码如下<pre>.game .role { width: 60px; height: 86px; position: absolu ...

  5. css3做ipone当时的滑动解锁闪亮条

    现在一般的登录 注册 什么  的页面,都是会做个滑动验证.一般都是像IPONE早期那个 滑动开屏的效果 ,这个效果现在可以用CSS3来实现. 主要用到几个属性 background 背景使用渐变属性, ...

  6. 用js，css3 做的一个球

    用css3属性很容易做一个立方体,但是要做一个球体,会相对复杂些 原理是:球可以看做是由无数个圆圈构成,然后就可以用圆圈来做球, 下面的例子是我做的一个小球,由72个圆圈组成.如果把每个圆圈的背景颜色 ...

  7. 用Html5/CSS3做Winform，一步一步教你搭建CefSharp开发环境（附JavaScript异步调用C#例子，及全部源代码）上

    本文为鸡毛巾原创,原文地址:http://www.cnblogs.com/jimaojin/p/7077131.html,转载请注明 CefSharp说白了就是Chromium浏览器的嵌入式核心,我们 ...

  8. 用CSS3做3D动画的那些事

    年会做了个3D变换的抽奖系统,在这里分享下通过CSS3制作3D效果的心得.抽奖系统虽然够炫酷,可惜抽的时候出了点bug,好几百人啊我的小心脏啊.虽然这个锅后面甩给会场的老爷电脑了(手动白眼). 首先介 ...

  9. 用css3做一个求婚小动画

    概述 本案例主要是运用到了css3的animation.keyframes.transform等属性,熟悉了,就可以做更多的其他动画效果,这几个属性功能非常强大. 详细 代码下载:http://www ...

随机推荐

  1. RF & Microarray

    REF[24] 随机森林是一个很好适用于微阵列数据的分类算法: 1.即使大多数的预测变量都是噪音,RF仍然具有优秀的性能,因此不需要对基因进行预选择. 2.能够应用于变量数远远大于观测数据量的情况 3 ...

  2. 如何将php数组或者对象传递给javascript

    在网上搜了一些方法,最后自己采用的是通过json字串的方式. 假设有一个php 数组 $arr,代码如下: 代码如下: <script> // html5中默认的script是javasc ...

  3. C# 堆栈和堆 Heap & Stack

    首先堆栈和堆(托管堆)都在进程的虚拟内存中.(在32位处理器上每个进程的虚拟内存为4GB) 堆栈stack 堆栈中存储值类型. 堆栈实际上是向下填充,即由高内存地址指向低内存地址填充. 堆栈的工作方式 ...

  4. 为应用程序的选项卡及ActionBar设置样式

    示例文件  flex-mobile-dev-tips-tricks-pt2.zip 关于Flex移动开发的提示和技巧有一系列文章,这是其中的第二部分.第一部分集中讲解如何在视图切换及应用程序操作切换之 ...

  5. Java反射机制示例

    链接: http://www.cnblogs.com/rollenholt/archive/2011/09/02/2163758.html package com.stono.reftest; imp ...

  6. Canvas createImageData

    createImageData() 方法创建新的空白 ImageData 对象.新对象的默认像素值 transparent black. 对于 ImageData 对象中的每个像素,都存在着四方面的信 ...

  7. lufylegend库 LTextField

    lufylegend库 LTextField <!DOCTYPE html> <html lang="en"> <head> <meta ...

  8. 数据挖掘之聚类算法K-Means总结

    序 由于项目需要,需要对数据进行处理,故而又要滚回来看看paper,做点小功课,这篇文章只是简单的总结一下基础的Kmeans算法思想以及实现: 正文: 1.基础Kmeans算法. Kmeans算法的属 ...

  9. Jcompress: 一款基于huffman编码和最小堆的压缩、解压缩小程序

    前言 最近基于huffman编码和最小堆排序算法实现了一个压缩.解压缩的小程序.其源代码已经上传到github上面: Jcompress下载地址 .在本人的github上面有一个叫Utility的re ...

  10. db2_errroecode

    sqlcode sqlstate  说明 000 00000 SQL语句成功完成   01xxx SQL语句成功完成,但是有警告 +012 01545 未限定的列名被解释为一个有相互关系的引用 +09 ...