纯css3 Star
<style><!--
* {
box-sizing: border-box;
padding: 0px;
margin: 0px;
}
body, html {
height: 100%;
width: 100%;
background-color: black;
}
.container {
height: 100%;
width: 1200px;
margin: auto;
position: relative;
transform: rotateX(-25deg);
transform-style: preserve-3d;
}
.line {
position: absolute;
border-radius: 50%;
transform-style: preserve-3d;
}
.star {
position: absolute;
height: 50px;
width: 50px;
transform-style: preserve-3d;
}
.star .item {
height: 100%;
width: 100%;
border-radius: 50%;
position: absolute;
opacity: 0.3;
}
.star .item:nth-child(2) {
transform: rotateY(30deg);
}
.star .item:nth-child(3) {
transform: rotateY(60deg);
}
.star .item:nth-child(4) {
transform: rotateY(90deg);
}
.star .item:nth-child(5) {
transform: rotateY(120deg);
}
.star .item:nth-child(6) {
transform: rotateY(150deg);
}
.star .item:nth-child(7) {
transform: rotateY(180deg);
}
.sun {
height: 100px;
width: 100px;
left: 550px;
top: 300px;
animation: zizhuan 40s linear infinite;
}
.sun .item {
border: 2px dotted red;
background: radial-gradient(yellow,red);
}
.one_line {
height: 300px;
width: 300px;
left: 450px;
top: 200px;
border: 2px dotted red;
animation: gongzhuang 12s linear infinite;
}
.one {
top: -25px;
left: 125px;
animation: zizhuan 10s linear infinite;
}
.one .item {
border: 2px dotted red;
}
.two_line {
height: 400px;
width: 400px;
left: 400px;
top: 150px;
border: 2px dotted red;
animation: gongzhuang 24s linear infinite;
}
.two {
top: -25px;
left: 175px;
animation: zizhuan 10s linear infinite;
}
.two .item {
border: 2px dotted orange;
}
.thr_line {
height: 500px;
width: 500px;
left: 350px;
top: 100px;
border: 2px dotted red;
animation: gongzhuang 36s linear infinite;
}
.thr {
top: -25px;
left: 225px;
animation: zizhuan 10s linear infinite;
}
.thr .item {
border: 2px dotted yellow;
}
.four_line {
height: 600px;
width: 600px;
left: 300px;
top: 50px;
border: 2px dotted red;
animation: gongzhuang 48s linear infinite;
}
.four {
top: -25px;
left: 275px;
animation: zizhuan 10s linear infinite;
}
.four .item {
border: 2px dotted green;
}
.five_line {
height: 700px;
width: 700px;
left: 250px;
top: 0px;
border: 2px dotted red;
animation: gongzhuang 60s linear infinite;
}
.five {
top: -25px;
left: 325px;
animation: zizhuan 10s linear infinite;
}
.five .item {
border: 2px dotted blue;
}
.six_line {
height: 800px;
width: 800px;
left: 200px;
top: -50px;
border: 2px dotted red;
animation: gongzhuang 84s linear infinite;
}
.six {
top: -25px;
left: 375px;
animation: zizhuan 10s linear infinite;
}
.six .item {
border: 2px dotted cyan;
}
.seven_line {
height: 900px;
width: 900px;
left: 150px;
top: -100px;
border: 2px dotted red;
animation: gongzhuang 96s linear infinite;
}
.seven {
top: -25px;
left: 425px;
animation: zizhuan 10s linear infinite;
}
.seven .item {
border: 2px dotted purple;
}
.eight_line {
height: 1000px;
width: 1000px;
left: 100px;
top: -150px;
border: 2px dotted red;
animation: gongzhuang 108s linear infinite;
}
.eight {
top: -25px;
left: 475px;
animation: zizhuan 10s linear infinite;
}
.eight .item {
border: 2px dotted pink;
}
@keyframes gongzhuang {
from {
transform: rotateY(0deg) rotateX(90deg);
}
to {
transform: rotateY(360deg) rotateX(90deg);
}
}
@keyframes zizhuan {
to {
transform: rotateZ(360deg);
}
}
--></style>
<div class="container">
<div class="sun star">
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
</div>
<div class="one_line line">
<div class="one star">
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
</div>
</div>
<div class="two_line line">
<div class="two star">
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
</div>
</div>
<div class="thr_line line">
<div class="thr star">
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
</div>
</div>
<div class="four_line line">
<div class="four star">
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
</div>
</div>
<div class="five_line line">
<div class="five star">
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
</div>
</div>
<div class="six_line line">
<div class="six star">
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
</div>
</div>
<div class="seven_line line">
<div class="seven star">
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
</div>
</div>
<div class="eight_line line">
<div class="eight star">
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
</div>
</div>
<div class="nine_line line">
<div class="nine star">
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
</div>
</div>
</div>
纯css3 Star的更多相关文章
- 纯CSS3实现的一些酷炫效果
之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...
- 纯css3圆形从中心向四周扩散动画效果
查看效果:http://hovertree.com/texiao/css3/37/ 先来个简单的示例,例如: @keyframes hovertreemove{from {top:30px;}to { ...
- 纯css3 3D图片立方体旋转动画特效
纯css3 3D立方体模块,鼠标触碰,模块炸开,大立方体中套小立方体 效果展示 手机扫描二维码体验效果: 效果图如下: 源码下载:http://hovertree.com/h/bjaf/0qmul8g ...
- 纯CSS3实现多层云彩变换飞行动画
查看效果:http://hovertree.com/texiao/css3/4/效果2 效果图: 代码如下: <!doctype html> <html lang="zh& ...
- 纯css3艺术文字样式效果代码
效果:http://hovertree.com/texiao/css3/1/ 本效果主要使用text-shadow实现.参考:http://hovertree.com/h/bjaf/css3_text ...
- 纯css3手机页面图标样式代码
全部图标:http://hovertree.com/texiao/css/19/ 先看效果: 或者点这里:http://hovertree.com/texiao/css/19/hoverkico.ht ...
- 纯CSS3实现动态火车行驶特效
上次开完飞机,这次开火车 查看效果:http://hovertree.com/texiao/css3/7/ 效果图: 代码如下: <!DOCTYPE html> <html> ...
- [原创]纯CSS3打造的3D翻页翻转特效
刚接触CSS3动画,心血来潮实现了一个心目中自己设计的翻页效果的3D动画,页面纯CSS3,目前只能在Chrome中玩,理论上可以支持Safari. 1. 新建HTML,代码如下(数据和翻页后的数据都是 ...
- 纯CSS3写的10个不同的酷炫图片遮罩层效果【转】
这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...
随机推荐
- 【http】四种常见的 POST 提交数据方式
来源:http://www.cnblogs.com/aaronjs/p/4165049.html HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS.GET.HEAD.POST.PUT ...
- css flex布局
关于flex布局的一些简单用法 效果(下图) 实现代码: <!--html--> <div class="wrap"> <div class=&quo ...
- 111. for(元素变量x:遍历对象obj)
package com.chongrui.test;/* * for(元素变量x:遍历对象obj){ * 引用X的java语句 * * } * * * */public class test { ...
- LeetCode 345. Reverse Vowels of a String
Write a function that takes a string as input and reverse only the vowels(元音字母) of a string. Example ...
- scp 从远程服务器上一下载文件
scp -P202 xx3.x6.xx.xx:/usr/local/zookeeper-.zip /tmp #指定远程服务器的端口和远程服务器的目标文件 ,最后指定要下载到本的地目录 也可以从远程服务 ...
- JS模块化
一.原始写法 /* 模块就是实现特定功能的一组方法. 只要把不同的函数(以及记录状态的变量)简单地放在一起,就算是一个模块. 上面的函数m1()和m2(),组成一个模块.使用的时候,直接调用就行了. ...
- MongoDB 优化器MongoDB Database Profiler（12）
优化器profile 在MySQL 中,慢查询日志是经常作为我们优化数据库的依据,那在MongoDB 中是否有类似的功能呢?答案是肯定的,那就是MongoDB Database Profiler. 1 ...
- Mac下的类似apt-get的包管理工具Homebrew（笔记）
对于一个习惯了在 Ubuntu 的终端上通过 apt-get 来安装工具软件的我来说,也希望在Mac上找到类似的工具,能很方便的一条命令就能安装所需的软件,而不用手工的去查找下载编译,或者是折腾安装所 ...
- 动画效果interpolator
Interpolator 被用来修饰动画效果,定义动画的变化率 AccelerateDecelerateInterpolator 在动画开始与结束的地方速率改变比较慢,在中间的时候加速 Accel ...
- UVA 11168 Airport（凸包+直线方程）
题意:给你n[1,10000]个点,求出一条直线,让所有的点都在都在直线的一侧并且到直线的距离总和最小,输出最小平均值(最小值除以点数) 题解:根据题意可以知道任意角度画一条直线(所有点都在一边),然 ...