纯CSS3实现旋转流星旋转光环效果 css旋转动画效果

别走开，先看图！

沉默了一周的小编，忍不住要爆发了！下面是小编带来的动画效果。相信你在看完之后，实现一些动画效果，再也不用为javascript而犯愁了。只需掌握CSS3，即可轻松实现！

长话短说，小编我就不一点点的展示具体怎么个原理什么的，直接上完整代码，省得惹大家嫌弃小编。（注：小编自己写的一些通用属性margin、padding等的清除，由于页面篇幅原因没有上传，希望大家理解）

1.html框架

<div class="bg0 pa">

<div class="bg1"></div>

</div>

<div class="hx-box pa">

<ul class="pr">

<li class="hx-k1 pa0">

<span></span>

</li>

<li class="hx-k2 pa0">

<span></span>

</li>

<li class="hx-k3 pa0">

<span></span>

</li>

</ul>

</div>

2. css完整样式

html {

width: 100%;

height: 100%;

}

body {

width: 100%;

height: 100%;

overflow: hidden;

background-image: -webkit-linear-gradient(90deg, #395ecb 0%, #3657be 35%, #242161 75%, #1a0531 100%);

background-image: -moz-linear-gradient(90deg, #395ecb 0%, #3657be 35%, #242161 75%, #1a0531 100%);

background-image: -ms-linear-gradient(90deg, #395ecb 0%, #3657be 35%, #242161 75%, #1a0531 100%);

background-image: linear-gradient(0deg, #395ecb 0%, #3657be 35%, #242161 75%, #1a0531 100%);

perspective: 1000px;

}

.bg0 {

width: 500px;

height: 500px;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

background: url(../images/bg0.png) no-repeat center center;

background-size: 150%;

}

.bg1 {

width: 100%;

height: 100%;

background: url(../images/bg1.png) no-repeat center center;

}

.hx-box {

top: 50%;

left: 50%;

width: 500px;

height: 500px;

transform-style: preserve-3d;

transform: translate(-50%, -50%) rotateY(75deg);

}

.hx-box ul {

width: 500px;

height: 500px;

transform-style: preserve-3d;

animation:hxz 20s linear infinite;

}

@keyframes hxz{

0% {

transform: rotateX(0deg);

}

100% {

transform: rotateX(-360deg);

}

}

.hx-box ul li {

width: 500px;

height: 500px;

border: 4px solid #5ec0ff;

border-radius: 1000px;

}

.hx-box ul li span {

display: block;

width: 100%;

height: 100%;

background: url(../images/hx.png) no-repeat center center;

background-size: 100% 100%;

animation: hx 4s linear infinite;

}

@keyframes hx {

to {

transform: rotate(360deg);

}

}

.hx-k2 {

transform: rotateX(60deg) rotateZ(60deg)

}

.hx-k3 {

transform: rotateX(-60deg) rotateZ(-60deg)

}

好的，小编已经把自己所有的干货都掏出来了，希望大家喜欢，嘿嘿！如果，有任何错误的地方，大家尽可指出，小编期待你的回信。另外，小编也希望和大家多讨论相关东西，一起进步，耶！明天，小编将继续侃CSS特效,谢谢大家的赏脸!

最后，小编在这里祝大家开心快乐幸福！