CSS3实现旋转光环效果的实现步骤
程序员文章站
2022-04-25 13:14:42
...
今天我们来实现一次旋转光环的效果,我们知道很多唱片的圆盘旋转效果都是用CSS3和JS来实现的,下面给大家做一个实例借鉴一下。
<div class="bg0 pa"> <div></div> </div> <div class="hx-box pa"> <ul> <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) }
相信看了这些案例你已经掌握了方法,更多精彩请关注其它相关文章!
相关阅读:
以上就是CSS3实现旋转光环效果的实现步骤的详细内容,更多请关注其它相关文章!
上一篇: 使用jQuery重置(reset)表单的方法_jquery
下一篇: js怎么在导航栏互相切换中英文