纯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">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
</div>
<div class="one_line line">
<div class="one star">
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
</div>
</div>
<div class="two_line line">
<div class="two star">
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
</div>
</div>
<div class="thr_line line">
<div class="thr star">
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
</div>
</div>
<div class="four_line line">
<div class="four star">
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
</div>
</div>
<div class="five_line line">
<div class="five star">
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
</div>
</div>
<div class="six_line line">
<div class="six star">
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
</div>
</div>
<div class="seven_line line">
<div class="seven star">
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
</div>
</div>
<div class="eight_line line">
<div class="eight star">
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
</div>
</div>
<div class="nine_line line">
<div class="nine star">
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
</div>
</div>
</div>

时间: 2024-11-05 22:32:41

纯css3 Star的相关文章

纯CSS3实现的一些酷炫效果

纯CSS3实现的一些酷炫效果 之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看下页面结构: <body> <div class="container"> <!-- 脸 --> <div class="face"> <!-- 头发 --> <div cl

10个强大的纯CSS3动画案例分享

我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式.CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互.本文分享了10个非常炫酷的CSS3动画案例,希望大家喜欢.  http://c.tieba.baidu.com/p/3473192107 1.纯CSS3实现烧烤动画 http://c.tieba.baidu.com/p/3473192107 这个CSS3动画相当有创意,动画中所有的烧烤元素都是利用CSS3绘制而

纯CSS3实现宽屏二级下拉菜单

今天我们要来分享一款基于纯CSS3的宽屏二级下拉菜单,这款菜单的子菜单在展开的时候是很宽敞的,菜单项中可以自定义格式的内容,非常实用,也很大气.由于是用纯CSS3实现,所以这款下拉菜单不用运行Javascript,展示速度当然是非常快的. 在线预览   源码下载

纯css3实现的圆形旋转分享按钮

之前已经为大家介绍了好几款css3按钮,今天要为大家介绍的是一款纯css3实现的圆形旋转分享按钮.旋转的角度可以自己调整.在demo中演示了三个角度旋转.360度,60度,-360度.如图: 在线预览   源码下载 看下实现代码: html代码: <b>360 degree spin onMouseover and onMouseout</b></p> <p id="socialicons"> <a href="http:

纯CSS3大转盘抽奖(响应式、可配置)

源于前段时候微信小程序最初火爆公测时段,把以前用 Canvas 实现的大转盘抽奖移植成微信小程序,无奈当时小程序对 Canvas 支持不够完善,只好降低用 CSS3 实现.虽然比不上 Canvas 绘图的绚丽,但也总算完成了一个抽奖的 Demo,详见:https://github.com/givebest/wechat-turntalbe-canvas. 事后想起,CSS3 实现也并不是无有益处,比如简单.快捷.调试方便.渲染想来也是要比 Canvas 要高效的,更重要的一点是支持媒体查询,大转

纯CSS3写的10个不同的酷炫图片遮罩层效果

纯CSS3写的10个不同的酷炫图片遮罩层效果 这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 <!DOCTYPE html PUBLIC "-//W3C/

纯CSS3写的10个不同的酷炫图片遮罩层效果【转】

这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti

【Web前沿技术】纯 CSS3 打造的10个精美加载进度条动画

之前向大家介绍8款优秀的 jQuery 加载动画和进度条插件,今天这篇文章向大家推荐10个纯 CSS3 代码实现精美加载进度条动画效果的方案.加载动画和进度条在网站和 Web 应用中的使用非常流行,特别是在使用 Ajax 技术加载内容的应用场景中,使用时尚的加载动画和进度条告诉用户内容正在加载中是一种非常友好的方式. 您可能感兴趣的相关文章 20个非常绚丽的 CSS3 特性应用演示 23个纯 CSS3 打造的精美LOGO图案 35个让人惊讶的 CSS3 动画效果演示 推荐12个漂亮的 CSS3

纯css3艺术文字样式效果代码

效果:http://hovertree.com/texiao/css3/1/ 本效果主要使用text-shadow实现.参考:http://hovertree.com/h/bjaf/css3_text_effect.htm 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>超炫CSS3文字特效集锦DEMO演示 - 何问起</title>