纯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 ...
随机推荐
- 模拟搭建Web项目的真实运行环境（五）
一.开启IIS功能 刚安装完的server2008是没有默认开启IIS功能,在这里简单介绍一下如何开启IIS. 步骤: 1. 打开控制面板,选中[程序] 2. 在[程序和功能]下面,选择[打开或关闭w ...
- ORACLE 迁移MYSQL 随笔
1.把服务器上的ORALCE 数据库导成DMP,然后导入本机的临时库 2.先把ORACLE 表中的DATE 改为TIMESTAMP; a.先建立个表 create table type_table_i ...
- GRUB、MBR名词解释
GRUB:是一个来自GUN项目的多操作系统启动程序,是多启动规范的实现,他允许用户在计算机内同时拥有多个操作系统,并在计算机启动时选择希望的操作系统.GRUB可用于选择系统分区上的不同内核,也可用于向 ...
- tp框架之自动验证表单
tp框架的create自动加载表单的方法可以自动根据自己定义的要求来验证表单里面的内容,但是由于是在后台执行代码,会拖慢程序运行速度,所以还是建议通过前端js来进行判断,后台只进行数据库的查询以及传值 ...
- javaScript事件（一）事件流
一.事件 事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字.事件是javaScript和DOM之间的桥梁.你若触发,我便执行——事件发生,调用它的处理函数 ...
- Linux系统性能优化思路和方法
#影响Linux性能的CPU.内存.磁盘.网络等因素分析1.系统硬件资源:CPU,多核与超线程消耗CPU的业务:动态WEB服务,Mail服务器2.内存:物理内存与swap的取舍,64操作系统消耗内存的 ...
- 批量下载小说网站上的小说（python爬虫）
随便说点什么 因为在学python,所有自然而然的就掉进了爬虫这个坑里,好吧,主要是因为我觉得爬虫比较酷,才入坑的. 想想看,你可以批量自动的采集互联网上海量的资料数据,是多么令人激动啊! 所以我就被 ...
- expect命令问题1
[root@localhost scripts]# cat exptest.sh #!/usr/bin/expect spawn ssh root@127.0.0.1 expect "pas ...
- 在子线程更新主线程的UI组件
1.实例化一个 private Handler handlerBublishTopic = new Handler(Looper.getMainLooper()); 2. handlerBublish ...
- iOS中的生命周期
对于一个iOS app来讲,生命周期是一个十分至关重要的东西.对于一个app来讲控制着app的开启.睡眠.关闭等状态:对于一个页面的来讲,控制页面的加载.显示.消失:对于一个View或者一个普通的类来 ...