怎么使用CSS3实现旋转光环效果

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: 500免费云主机域名px;

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)

}

感谢你能够认真阅读完这篇文章，希望小编分享的“怎么使用CSS3实现旋转光环效果”这篇文章对大家有帮助，同时也希望大家多多支持百云主机，关注百云主机行业资讯频道，更多相关知识等着你来学习!

相关推荐: 怎么使用CSS创建三角形或插入符号图标

这篇文章主要介绍怎么使用CSS创建三角形或插入符号图标，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！ 答：对边框使用透明颜色 transparent对于没有CSSwidth和的元素的边框，您可以使用和纯色的组合轻松地创建指向上，下，左或…