前端手册-实现挂坠灯笼效果-编程知识

前端手册-实现挂坠灯笼效果

Unity3D特效百例	案例项目实战源码	Android-Unity实战问题汇总
游戏脚本-辅助自动化	Android控件全解手册	再战Android系列
Scratch编程案例	软考全系列	Unity3D学习专栏
蓝桥系列	ChatGPT和AIGC

👉关于作者

专注于Android/Unity和各种游戏开发技巧，以及各种资源分享（网站、工具、素材、源码、游戏等）
有什么需要欢迎底部卡片私我，获取更多支持，交流让学习不再孤单。

芝麻粒儿-空名先生

👉实践过程

在这里插入图片描述

<!DOCTYPE html>
<html>
<style>
@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);}
}</style>
<input type="checkbox" id="toggle" checked />
<section id="sect" width:20% height:20%><ul><li>芝麻</li><li>粒儿</li></ul>
</section>
</body>
</html>

👉其他

📢作者：小空和小芝中的小空
📢转载说明-务必注明来源：https://zhima.blog.csdn.net/
📢这位道友请留步☁️，我观你气度不凡，谈吐间隐隐有王者霸气💚，日后定有一番大作为📝！！！旁边有点赞👍收藏🌟今日传你，点了吧，未来你成功☀️，我分文不取，若不成功⚡️，也好回来找我。

温馨提示：点击下方卡片获取更多意想不到的资源。
空名先生