纯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 ...
随机推荐
- 【python】with的实现方法
来源:http://www.ibm.com/developerworks/cn/opensource/os-cn-pythonwith/#icomments 重点: with方法适用于需要分配和清理资 ...
- gulp整理
gulp基于node 1.全局安装gulp: $ npm install --global gulp 2.前往项目目录,然后安装作为项目的开发依赖(devDependencies): $ npm in ...
- 可视化日历_Java实现
//刚刚学Java,写的小程序 package cn.xiaocangtian.testDate; import java.text.DateFormat; import java.text.Pars ...
- 项目中 -- 设置tabBar样式 （旅游局）
- (void)addChildViewController:(UIViewController *)ViewController image:(UIImage *)image selectImg:( ...
- [Tool]使用ConfuserEx混淆代码
为了防止程序发布后被一些"坏人"破解,开发者通常会对自己的代码进行混淆.这篇博客将介绍一款使用很广,并且混淆效果也不错的工具ConfuserEx. 新建一个C# 控制台程序,Hel ...
- 【leetcode】Generate Parentheses
题目简述: Given n pairs of parentheses, write a function to generate all combinations of well-formed par ...
- 把office文档转换为html过程中的一些坑
之前和我们项目的团队一起酝酿了一个项目,公司的业务文档技术文档比较多,但都比较分散,虽然通过FTP或其他方式聚合起来了,但感觉还是不够方便. 另外公司每次都来新员工,新员工都需要一些培训,比较耗时,比 ...
- 虚拟机主机能互相ping通，但是无法远程连接
首先将虚拟机关机,找到Edit virtual machine Settings(编辑虚拟机设置)
- tcp三次握手、四次挥手
TCP的三次握手(建立连接)和四次挥手(关闭连接):http://blog.csdn.net/whuslei/article/details/6667471/ TCP协议中的三次握手和四次挥手(图解) ...
- JavaScript高级程序设计-(2)基础概念
for-in 语句 for-in 语句是一种迭代语句,用来枚举对象属性,语法:for (property in expression) statement实例:for(var propName in ...