Html
    Css
    Js

    
                        
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(http://www.jq22.com/img/cs/500x500-1.png);
	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);
}
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

原创的黑洞(原创)

1
      Sunday*0
      2018/5/16 13:33:34