web前端小案例-超级css制作七彩圆环旋转幻影
2018-02-25 14:17
656 查看
html代码：<div class="wrapper">
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>css代码：
<style>
body {
background-color: #000;
height: 100vh;
overflow: hidden;
}
.wrapper {
height: 100vh;
position: relative;
top: 50%;
}
.wrapper > div {
-webkit-animation: 0.8s rotate linear forwards infinite;
animation: 0.8s rotate linear forwards infinite;
}
.wrapper > div > div {
height: 100px;
width: 100px;
border-radius: 50%;
position: absolute;
top: -52px;
right: -100%;
left: -100%;
margin: 0 auto;
mix-blend-mode: screen;
-webkit-transform-origin: center center;
transform-origin: center center;
border-width: 2px;
border-style: solid;
}
.wrapper > div > div:nth-child(1) {
-webkit-transform: rotate(60deg) scale(1) translateY(0rem);
transform: rotate(60deg) scale(1) translateY(0rem);
border-color: #ffff33;
-webkit-animation: 1.8s flying1 0s forwards infinite;
animation: 1.8s flying1 0s forwards infinite;
}
.wrapper > div > div:nth-child(2) {
-webkit-transform: rotate(120deg) scale(1) translateY(0rem);
transform: rotate(120deg) scale(1) translateY(0rem);
border-color: #33ff33;
-webkit-animation: 1.8s flying2 0.1s forwards infinite;
animation: 1.8s flying2 0.1s forwards infinite;
}
.wrapper > div > div:nth-child(3) {
-webkit-transform: rotate(180deg) scale(1) translateY(0rem);
transform: rotate(180deg) scale(1) translateY(0rem);
border-color: #33ffff;
-webkit-animation: 1.8s flying3 0.2s forwards infinite;
animation: 1.8s flying3 0.2s forwards infinite;
}
.wrapper > div > div:nth-child(4) {
-webkit-transform: rotate(240deg) scale(1) translateY(0rem);
transform: rotate(240deg) scale(1) translateY(0rem);
border-color: #3333ff;
-webkit-animation: 1.8s flying4 0.3s forwards infinite;
animation: 1.8s flying4 0.3s forwards infinite;
}
.wrapper > div > div:nth-child(5) {
-webkit-transform: rotate(300deg) scale(1) translateY(0rem);
transform: rotate(300deg) scale(1) translateY(0rem);
border-color: #ff33ff;
-webkit-animation: 1.8s flying5 0.4s forwards infinite;
animation: 1.8s flying5 0.4s forwards infinite;
}
.wrapper > div > div:nth-child(6) {
-webkit-transform: rotate(360deg) scale(1) translateY(0rem);
transform: rotate(360deg) scale(1) translateY(0rem);
border-color: #ff3333;
-webkit-animation: 1.8s flying6 0.5s forwards infinite;
animation: 1.8s flying6 0.5s forwards infinite;
}
@-webkit-keyframes flying1 {
0% {
width: 100px;
-webkit-transform: rotate(60deg) scale(1) translateY(0rem);
transform: rotate(60deg) scale(1) translateY(0rem);
border-width: 2px;
}
25% {
width: 120px;
-webkit-transform: rotate(60deg) scale(1.5) translateY(0.2rem);
transform: rotate(60deg) scale(1.5) translateY(0.2rem);
border-width: 5px;
}
50% {
width: 100px;
-webkit-transform: rotate(60deg) scale(1) translateY(0rem);
transform: rotate(60deg) scale(1) translateY(0rem);
border-width: 2px;
}
}
@keyframes flying1 {
0% {
width: 100px;
-webkit-transform: rotate(60deg) scale(1) translateY(0rem);
transform: rotate(60deg) scale(1) translateY(0rem);
border-width: 2px;
}
25% {
width: 120px;
-webkit-transform: rotate(60deg) scale(1.5) translateY(0.2rem);
transform: rotate(60deg) scale(1.5) translateY(0.2rem);
border-width: 5px;
}
50% {
width: 100px;
-webkit-transform: rotate(60deg) scale(1) translateY(0rem);
transform: rotate(60deg) scale(1) translateY(0rem);
border-width: 2px;
}
}
@-webkit-keyframes flying2 {
0% {
width: 100px;
-webkit-transform: rotate(120deg) scale(1) translateY(0rem);
transform: rotate(120deg) scale(1) translateY(0rem);
border-width: 2px;
}
25% {
width: 120px;
-webkit-transform: rotate(120deg) scale(1.5) translateY(0.2rem);
transform: rotate(120deg) scale(1.5) translateY(0.2rem);
border-width: 5px;
}
50% {
width: 100px;
-webkit-transform: rotate(120deg) scale(1) translateY(0rem);
transform: rotate(120deg) scale(1) translateY(0rem);
border-width: 2px;
}
}
@keyframes flying2 {
0% {
width: 100px;
-webkit-transform: rotate(120deg) scale(1) translateY(0rem);
transform: rotate(120deg) scale(1) translateY(0rem);
border-width: 2px;
}
25% {
width: 120px;
-webkit-transform: rotate(120deg) scale(1.5) translateY(0.2rem);
transform: rotate(120deg) scale(1.5) translateY(0.2rem);
border-width: 5px;
}
50% {
width: 100px;
-webkit-transform: rotate(120deg) scale(1) translateY(0rem);
transform: rotate(120deg) scale(1) translateY(0rem);
border-width: 2px;
}
}
@-webkit-keyframes flying3 {
0% {
width: 100px;
-webkit-transform: rotate(180deg) scale(1) translateY(0rem);
transform: rotate(180deg) scale(1) translateY(0rem);
border-width: 2px;
}
25% {
width: 120px;
-webkit-transform: rotate(180deg) scale(1.5) translateY(0.2rem);
transform: rotate(180deg) scale(1.5) translateY(0.2rem);
border-width: 5px;
}
50% {
width: 100px;
-webkit-transform: rotate(180deg) scale(1) translateY(0rem);
transform: rotate(180deg) scale(1) translateY(0rem);
border-width: 2px;
}
}
@keyframes flying3 {
0% {
width: 100px;
-webkit-transform: rotate(180deg) scale(1) translateY(0rem);
transform: rotate(180deg) scale(1) translateY(0rem);
border-width: 2px;
}
25% {
width: 120px;
-webkit-transform: rotate(180deg) scale(1.5) translateY(0.2rem);
transform: rotate(180deg) scale(1.5) translateY(0.2rem);
border-width: 5px;
}
50% {
width: 100px;
-webkit-transform: rotate(180deg) scale(1) translateY(0rem);
transform: rotate(180deg) scale(1) translateY(0rem);
border-width: 2px;
}
}
@-webkit-keyframes flying4 {
0% {
width: 100px;
-webkit-transform: rotate(240deg) scale(1) translateY(0rem);
transform: rotate(240deg) scale(1) translateY(0rem);
border-width: 2px;
}
25% {
width: 120px;
-webkit-transform: rotate(240deg) scale(1.5) translateY(0.2rem);
transform: rotate(240deg) scale(1.5) translateY(0.2rem);
border-width: 5px;
}
50% {
width: 100px;
-webkit-transform: rotate(240deg) scale(1) translateY(0rem);
transform: rotate(240deg) scale(1) translateY(0rem);
border-width: 2px;
}
}
@keyframes flying4 {
0% {
width: 100px;
-webkit-transform: rotate(240deg) scale(1) translateY(0rem);
transform: rotate(240deg) scale(1) translateY(0rem);
border-width: 2px;
}
25% {
width: 120px;
-webkit-transform: rotate(240deg) scale(1.5) translateY(0.2rem);
transform: rotate(240deg) scale(1.5) translateY(0.2rem);
border-width: 5px;
}
50% {
width: 100px;
-webkit-transform: rotate(240deg) scale(1) translateY(0rem);
transform: rotate(240deg) scale(1) translateY(0rem);
border-width: 2px;
}
}
@-webkit-keyframes flying5 {
0% {
width: 100px;
-webkit-transform: rotate(300deg) scale(1) translateY(0rem);
transform: rotate(300deg) scale(1) translateY(0rem);
border-width: 2px;
}
25% {
width: 120px;
-webkit-transform: rotate(300deg) scale(1.5) translateY(0.2rem);
transform: rotate(300deg) scale(1.5) translateY(0.2rem);
border-width: 5px;
}
50% {
width: 100px;
-webkit-transform: rotate(300deg) scale(1) translateY(0rem);
transform: rotate(300deg) scale(1) translateY(0rem);
border-width: 2px;
}
}
@keyframes flying5 {
0% {
width: 100px;
-webkit-transform: rotate(300deg) scale(1) translateY(0rem);
transform: rotate(300deg) scale(1) translateY(0rem);
border-width: 2px;
}
25% {
width: 120px;
-webkit-transform: rotate(300deg) scale(1.5) translateY(0.2rem);
transform: rotate(300deg) scale(1.5) translateY(0.2rem);
border-width: 5px;
}
50% {
width: 100px;
-webkit-transform: rotate(300deg) scale(1) translateY(0rem);
transform: rotate(300deg) scale(1) translateY(0rem);
border-width: 2px;
}
}
@-webkit-keyframes flying6 {
0% {
width: 100px;
-webkit-transform: rotate(360deg) scale(1) translateY(0rem);
transform: rotate(360deg) scale(1) translateY(0rem);
border-width: 2px;
}
25% {
width: 120px;
-webkit-transform: rotate(360deg) scale(1.5) translateY(0.2rem);
transform: rotate(360deg) scale(1.5) translateY(0.2rem);
border-width: 5px;
}
50% {
width: 100px;
-webkit-transform: rotate(360deg) scale(1) translateY(0rem);
transform: rotate(360deg) scale(1) translateY(0rem);
border-width: 2px;
}
}
@keyframes flying6 {
0% {
width: 100px;
-webkit-transform: rotate(360deg) scale(1) translateY(0rem);
transform: rotate(360deg) scale(1) translateY(0rem);
border-width: 2px;
}
25% {
width: 120px;
-webkit-transform: rotate(360deg) scale(1.5) translateY(0.2rem);
transform: rotate(360deg) scale(1.5) translateY(0.2rem);
border-width: 5px;
}
50% {
width: 100px;
-webkit-transform: rotate(360deg) scale(1) translateY(0rem);
transform: rotate(360deg) scale(1) translateY(0rem);
border-width: 2px;
}
}
@-webkit-keyframes rotate {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>最后小编推荐一下我的前端学习群：575308719，视频、源码、经验等大量干货分享，不管你是小白还是大牛，小编都欢迎，欢迎初学和进阶中的小伙伴。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- web前端小案例-css制作电脑平板手机变幻小动画
- 前端基础小案例：纯css制作旋转披萨
- web前端案例-纯css代码制作吃豆豆加载效果
- web前端小案例-纯css制作水滴效果
- web前端案例-css制作花束小动画
- web前端小案例-纯css制作微笑小表情
- web前端案例-老司机用css带你制作直升机飞行
- 程序员css制作收缩旋转圆环，效果已看20遍
- Html+css+div+ul+li制作Web前端导航菜单。
- web前端小案例-纯css书架装载机
- web前端开源小案例:立方体旋转
- 前端案例：170行css制作Apple手机开机动画
- CSS世界：web前端开发，CSS3+HTML5网页制作
- web前端小案例-边框线条制作
- web前端基础案例-简短代码制作爱奇艺首页导航轮播特效
- web前端之JavaScript DOM编程艺术之案例研究:图片库改进版
- web前端基础——初识CSS
- Web编程前端之4：css+div多样式可定制完美分页全攻略
- web前端学习笔记(CSS变化宽度布局)
- web前端开发学习经验分享——css，js进阶篇