<!doctype html>
目测没有你想要的大牛
设置动画效果，通篇都是旋转，沿x、y、z轴旋转。。。
重新再发一下，这样连看都不想看
body {
background-color: #1e0059;
height: 100vh;
margin: 0;
overflow: hidden;
-webkit-perspective: 5em;
perspective: 5em;
}
body::after {
background-color: inherit;
border-radius: 50%;
box-shadow: 0 0 2em 2em #1e0059;
content: "";
height: 1em;
left: 50%;
position: absolute;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 1em;
}
.cylinder {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: tunnel;
animation-name: tunnel;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
left: 50%;
position: absolute;
top: 50%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotatex(90deg) rotatey(0) translatey(-25em);
transform: rotatex(90deg) rotatey(0) translatey(-25em);
}
.cylinder:nth-child(1) {
-webkit-animation-duration: 8s;
animation-duration: 8s;
}
.cylinder:nth-child(2) {
-webkit-animation-duration: 4s;
animation-duration: 4s;
}
.side {
background-image: url(img/24ac8094-7dc0-40c4-9956-f69c5fb45896.jpg);
background-size: 32em 10em;
-webkit-filter: hue-rotate(-11.25deg);
filter: hue-rotate(-11.25deg);
height: 40em;
position: absolute;
-webkit-transform-origin: 0;
transform-origin: 0;
width: 2em;
}
.side:nth-child(1) {
background-position: -2em;
-webkit-transform: rotatey(22.5deg) translate3d(-50%, 0, 5em);
transform: rotatey(22.5deg) translate3d(-50%, 0, 5em);
}
.side:nth-child(2) {
background-position: -4em;
-webkit-transform: rotatey(45deg) translate3d(-50%, 0, 5em);
transform: rotatey(45deg) translate3d(-50%, 0, 5em);
}
.side:nth-child(3) {
background-position: -6em;
-webkit-transform: rotatey(67.5deg) translate3d(-50%, 0, 5em);
transform: rotatey(67.5deg) translate3d(-50%, 0, 5em);
}
.side:nth-child(4) {
background-position: -8em;
-webkit-transform: rotatey(90deg) translate3d(-50%, 0, 5em);
transform: rotatey(90deg) translate3d(-50%, 0, 5em);
}
.side:nth-child(5) {
background-position: -10em;
-webkit-transform: rotatey(112.5deg) translate3d(-50%, 0, 5em);
transform: rotatey(112.5deg) translate3d(-50%, 0, 5em);
}
.side:nth-child(6) {
background-position: -12em;
-webkit-transform: rotatey(135deg) translate3d(-50%, 0, 5em);
transform: rotatey(135deg) translate3d(-50%, 0, 5em);
}
.side:nth-child(7) {
background-position: -14em;
-webkit-transform: rotatey(157.5deg) translate3d(-50%, 0, 5em);
transform: rotatey(157.5deg) translate3d(-50%, 0, 5em);
}
.side:nth-child(8) {
background-position: -16em;
-webkit-transform: rotatey(180deg) translate3d(-50%, 0, 5em);
transform: rotatey(180deg) translate3d(-50%, 0, 5em);
}
.side:nth-child(9) {
background-position: -18em;
-webkit-transform: rotatey(202.5deg) translate3d(-50%, 0, 5em);
transform: rotatey(202.5deg) translate3d(-50%, 0, 5em);
}
.side:nth-child(10) {
background-position: -20em;
-webkit-transform: rotatey(225deg) translate3d(-50%, 0, 5em);
transform: rotatey(225deg) translate3d(-50%, 0, 5em);
}
.side:nth-child(11) {
background-position: -22em;
-webkit-transform: rotatey(247.5deg) translate3d(-50%, 0, 5em);
transform: rotatey(247.5deg) translate3d(-50%, 0, 5em);
}
.side:nth-child(12) {
background-position: -24em;
-webkit-transform: rotatey(270deg) translate3d(-50%, 0, 5em);
transform: rotatey(270deg) translate3d(-50%, 0, 5em);
}
.side:nth-child(13) {
background-position: -26em;
-webkit-transform: rotatey(292.5deg) translate3d(-50%, 0, 5em);
transform: rotatey(292.5deg) translate3d(-50%, 0, 5em);
}
.side:nth-child(14) {
background-position: -28em;
-webkit-transform: rotatey(315deg) translate3d(-50%, 0, 5em);
transform: rotatey(315deg) translate3d(-50%, 0, 5em);
}
.side:nth-child(15) {
background-position: -30em;
-webkit-transform: rotatey(337.5deg) translate3d(-50%, 0, 5em);
transform: rotatey(337.5deg) translate3d(-50%, 0, 5em);
}
.side:nth-child(16) {
background-position: -32em;
-webkit-transform: rotatey(360deg) translate3d(-50%, 0, 5em);
transform: rotatey(360deg) translate3d(-50%, 0, 5em);
}
.cylinder:nth-child(2) .side {
opacity: 0.625;
}
@-webkit-keyframes tunnel {
100% {
-webkit-transform: rotatex(90deg) rotatey(360deg) translatey(-15em);
transform: rotatex(90deg) rotatey(360deg) translatey(-15em);
}
}
@keyframes tunnel {
100% {
-webkit-transform: rotatex(90deg) rotatey(360deg) translatey(-15em);
transform: rotatex(90deg) rotatey(360deg) translatey(-15em);
}
}
自己去查css入门手册