Steps to implement the rotating halo effect with CSS3-CSS Tutorial-php.cn

Today we are going to realize the effect of a rotating halo. We know that many disc rotation effects of records are achieved using CSS3 and JS. Here is an example for everyone to learn from.

 
 
     
   
   
 
 
 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) }

Copy after login

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!