纯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 ...
随机推荐
- 为什么使用Junit Test而不用普通java main方法来完成测试?
因为在程序里边,一个接口对应一个实现方法,而在接口中常常会定义相关的很多方法,所以在测试的时候,如果都在main方法里边进行测试,main方法就会显得臃肿,而且不便于以后其他人测试以及查看测试数据,用 ...
- 多个Class作用于同一个元素的结果分析
多个Class作用于同一个元素的结果分析 多个class作用于同一个元素出现样式冲突,因为权重相同,结果如何呢 [代码] <html> <head> <sty ...
- QQ聊天界面模式切换
1.打开一个聊天窗口 2.按照图上步骤 3.模式 3-1气泡模式 3-2文本模式
- Object-c 类方法和实例方法的区别和联系
在我学习oc的时候,总是搞不懂什么时候用类方法,什么时候使用实例方法.于是做了如下总结. -表示实例方法: 用实例方法访问 +表示类方法:类方法的对象时类不是实例.多用于创建对象或工具类 什么时候使用 ...
- Js动态设置rem来实现移动端字体的自适应
//设置根元素字体 var win = window, doc = document; function setFontSize() { var winWidth = $(window).width( ...
- socket 收发报文小程序
需要注意,由于是从文件读取,而WINDOWS自带的文本文档程序,亲测对于UTF-8文件会不可见地在文件头多出3个字节.另外回车换行也是不可见字节,需要考虑到. package com.test.com ...
- SSH ProxyCommand
简单的说就是SSH层面的代理服务器,实现通过跳板机执行SSH相关命令到目标机器的代理服务.
- TDD学习笔记【四】--- 如何隔离相依性 - 基本的可测试性
前言 相信许多读者都听过「可测试性」,甚至被它搞的要死要活的,还觉得根本是莫名其妙,徒劳无功.今天这篇文章,主要要讲的是对象的相依性,以及对象之间直接相依,会带来什么问题.为了避免发生因相依性而导致设 ...
- NetMQ（四）： 推拉模式 Push-Pull
ZeroMQ系列 之NetMQ 一:zeromq简介 二:NetMQ 请求响应模式 Request-Reply 三:NetMQ 发布订阅模式 Publisher-Subscriber 四:NetMQ ...
- Python-匿名函数
lambda 函数是一种快速定义单行的最小函数,可以用在任何需要函数的地方 常规版本: def fun(x,y) return x*y lambda版本: r = lambda x,y:x*y p ...