CSS3를 사용하여 후광 유성 회전 후광 효과 만들기

오늘 가르쳐드릴 코드는 CSS3를 사용하여 후광이 있는 유성 회전 후광 효과를 만드는 것입니다. 관심 있는 친구들은 직접 연습해 볼 수 있습니다. 사례 코드는 다음과 같습니다.

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라고 해야 할까요. 는 여전히 매우 강력합니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:

CSS3에서 유연한 상자를 만드는 방법

HTML의 웹 표준은 무엇입니까?

CSS3에서 반응형 레이아웃을 만드는 방법

위 내용은 CSS3를 사용하여 후광 유성 회전 후광 효과 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!