CSS
语言:
CSSSCSS
确定
body {
overflow: hidden;
background-color: #222;
}
.container {
position: absolute;
width: 140vmax;
height: 140vmax;
top: 50%;
left: 50%;
-webkit-animation: spin 60s linear infinite;
animation: spin 60s linear infinite;
}
section {
position: absolute;
left: 50%;
bottom: 50%;
width: 37.51285vmax;
height: 70vmax;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
background-image: url("http://blucube.net/stuff/codepen-assets/kaleidoscope/glass.jpg");
background-size: auto 150%;
-webkit-animation: move-background 12s infinite alternate ease-in-out;
animation: move-background 12s infinite alternate ease-in-out;
}
.sect-1 {
-webkit-transform: translateX(-50%) rotateY(180deg) rotateZ(30deg);
transform: translateX(-50%) rotateY(180deg) rotateZ(30deg);
}
.sect-2 {
-webkit-transform: translateX(-50%) rotateZ(60deg);
transform: translateX(-50%) rotateZ(60deg);
}
.sect-3 {
-webkit-transform: translateX(-50%) rotateY(180deg) rotateZ(90deg);
transform: translateX(-50%) rotateY(180deg) rotateZ(90deg);
}
.sect-4 {
-webkit-transform: translateX(-50%) rotateZ(120deg);
transform: translateX(-50%) rotateZ(120deg);
}
.sect-5 {
-webkit-transform: translateX(-50%) rotateY(180deg) rotateZ(150deg);
transform: translateX(-50%) rotateY(180deg) rotateZ(150deg);
}
.sect-6 {
-webkit-transform: translateX(-50%) rotateZ(180deg);
transform: translateX(-50%) rotateZ(180deg);
}
.sect-7 {
-webkit-transform: translateX(-50%) rotateY(180deg) rotateZ(210deg);
transform: translateX(-50%) rotateY(180deg) rotateZ(210deg);
}
.sect-8 {
-webkit-transform: translateX(-50%) rotateZ(240deg);
transform: translateX(-50%) rotateZ(240deg);
}
.sect-9 {
-webkit-transform: translateX(-50%) rotateY(180deg) rotateZ(270deg);
transform: translateX(-50%) rotateY(180deg) rotateZ(270deg);
}
.sect-10 {
-webkit-transform: translateX(-50%) rotateZ(300deg);
transform: translateX(-50%) rotateZ(300deg);
}
.sect-11 {
-webkit-transform: translateX(-50%) rotateY(180deg) rotateZ(330deg);
transform: translateX(-50%) rotateY(180deg) rotateZ(330deg);
}
.sect-12 {
-webkit-transform: translateX(-50%) rotateZ(360deg);
transform: translateX(-50%) rotateZ(360deg);
}
@-webkit-keyframes spin {
0% {
-webkit-transform: translateX(-50%) translateY(-50%) rotateZ(0deg);
transform: translateX(-50%) translateY(-50%) rotateZ(0deg);
}
100% {
-webkit-transform: translateX(-50%) translateY(-50%) rotateZ(-360deg);
transform: translateX(-50%) translateY(-50%) rotateZ(-360deg);
}
}
@keyframes spin {
0% {
-webkit-transform: translateX(-50%) translateY(-50%) rotateZ(0deg);
transform: translateX(-50%) translateY(-50%) rotateZ(0deg);
}
100% {
-webkit-transform: translateX(-50%) translateY(-50%) rotateZ(-360deg);
transform: translateX(-50%) translateY(-50%) rotateZ(-360deg);
}
}
@-webkit-keyframes move-background {
0% {
background-position: 100% 0%;
}
100% {
background-position: 0% 100%;
}
}
@keyframes move-background {
0% {
background-position: 100% 0%;
}
100% {
background-position: 0% 100%;
}
}