Steps to implement the rotating halo effect with CSS3

php中世界最好的语言
Release: 2017-11-30 16:23:05
Original
3732 people have browsed it

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!

Related reading:

Tutorial on using the transform attribute in Css3

How to use the CSS3 function rotate()

Steps to implement CSS3 animation to create a highlight arc effect

The above is the detailed content of Steps to implement the rotating halo effect with CSS3. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!