前端手册-实现挂坠灯笼效果
@media screen and (max-width: 600px) {
body > * {
font-size: 1.5em;
}
}
#sect {
width: 60vw;
height: 20vh;
padding: 1em;
text-align: center;
vertical-align: middle;
display: block;
position: relative;
perspective: 600px;
}
#sect ul {
display: block;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 60%;
height: 20%;
transition: all 1.6666666667s;
transform-style: preserve-3d;
transform: translateZ(-40vmax) translateX(-20vw) rotateY(0deg);
position: absolute;
}
#toggle:checked + #sect ul {
transform: translateZ(-20em) translateX(0vw) rotateY(50deg);
}
#sect li {
display: inline-block;
position: absolute;
font-size: 3em;
margin-left: -5em;
transition: all 1s;
opacity: 1;
color: #FF0000;
transform-origin: center -100vmax;
-webkit-animation: pendulum ease-in-out infinite alternate 5s;
animation: pendulum ease-in-out infinite alternate 5s;
}
#sect li:before {
content: "";
position: absolute;
bottom: 100%;
width: 1px;
box-shadow: 0 0 0 0.01em #00FF00;
height: 25em;
left: 50%;
background-color: #00FF00;
}
#sect li:nth-of-type(0) {
left: 0em;
-webkit-animation-delay: -0s;
animation-delay: -0s;
}
#sect li:nth-of-type(1) {
left: 2.5em;
-webkit-animation-delay: -0.1s;
animation-delay: -0.1s;
}
#sect li:nth-of-type(2) {
left: 5em;
-webkit-animation-delay: -0.2s;
animation-delay: -0.2s;
}
#sect li:nth-of-type(3) {
left: 7.5em;
-webkit-animation-delay: -0.3s;
animation-delay: -0.3s;
}
#sect li:nth-of-type(4) {
left: 10em;
-webkit-animation-delay: -0.4s;
animation-delay: -0.4s;
}
#sect li:nth-of-type(5) {
left: 12.5em;
-webkit-animation-delay: -0.5s;
animation-delay: -0.5s;
}
#sect li:nth-of-type(6) {
left: 15em;
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s;
}
#sect li:nth-of-type(7) {
left: 17.5em;
-webkit-animation-delay: -0.7s;
animation-delay: -0.7s;
}
#sect li:nth-of-type(8) {
left: 20em;
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
#sect li:nth-of-type(9) {
left: 22.5em;
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
#sect li:nth-of-type(10) {
left: 25em;
-webkit-animation-delay: -1s;
animation-delay: -1s;
}
#sect li:nth-of-type(11) {
left: 27.5em;
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
@-webkit-keyframes pendulum {
from {
transform: translateY(10vh) rotateX(-4deg);
}
to {
transform: translateY(15vh) rotateX(5deg);
}
}
@keyframes pendulum {
from {
transform: translateY(10vh) rotateX(-4deg);
}
to {
transform: translateY(15vh) rotateX(5deg);
}
}