其他
【每日一练】94—CSS实现一个炫酷好玩的3D动画效果
写在前面
今天这个练习，在很多场景中，可能没有什么实际用途，但是，如果我们将它作为一个有趣好玩的练习案例来玩，这个还是有用的，因为这样的效果，之前我们都是需要借助第三方插件来实现。
而今天这个练习，我们只需要CSS就可以实现了，是不是很神奇？废话不多说了，我们现在就一起来看一下今天练习的最终效果：
<!doctype html><html> <head> <meta charset="utf-8"> <title>【每日一练】94—CSS实现一个炫酷好玩的悬停动画效果</title> </head> <body> <div class="cube-big"> <div class="big"> <span style="--i:0;--clr:#e2e2e2;"></span> <span style="--i:1;--clr:#f0f0f0;"></span> <span style="--i:2;--clr:#e2e2e2;"></span> <span style="--i:3;--clr:#f0f0f0;"></span> <span class="top" style="--clr:#fff;"></span> </div> </div> <div class="cube-samll"> <div class="big"> <span style="--i:0;--clr:#08c9e2;"></span> <span style="--i:1;--clr:#00a6bc;"></span> <span style="--i:2;--clr:#08c9e2;"></span> <span style="--i:3;--clr:#00a6bc;"></span> <span class="top" style="--clr:#6fdfee;"></span> </div> </div> </body></html>*{ margin: 0; padding: 0; box-sizing: border-box;}body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #222;}.cube-big{ position: absolute; width: 300px; height: 300px;}
.cube-big div{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-style: preserve-3d; animation: animate 6s linear infinite;}@keyframes animate { 0% { transform: rotateX(-20deg) rotateY(360deg); } 100% { transform: rotateX(-20deg) rotateY(0deg); }}.cube-big div.big span { position: absolute; top: 80px; width: 300px; height: 300px; background: var(--clr); transform: rotateY(calc(90deg * var(--i))) translateZ(150px); transform-style: preserve-3d; transition: 0.5s;}.cube-big:hover div.big span { background: transparent; border: 10px solid #00a6bc; filter: drop-shadow(0 0 20px #00a6bc);}.cube-big div.big span.top { transform: rotateX(90deg) translateZ(150px);} .cube-big div.big span.top::before { content: ''; position: absolute; inset: 0; transform: translateZ(-350px); background: rgba(0,0,0,0.5); filter: blur(50px);}
.cube-samll{ position: absolute; width: 300px; height: 300px; top: 50%; left: 50%; transform: translate(-50%,-350px);}
.cube-samll div{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-style: preserve-3d; animation: animate2 6s linear infinite; scale: 0.5;}@keyframes animate2 { 0% { transform: rotateX(-20deg) rotateY(0deg); } 100% { transform: rotateX(-20deg) rotateY(360deg); }}.cube-samll div.big span { position: absolute; top: 80px; width: 300px; height: 300px; background: var(--clr); transform: rotateY(calc(90deg * var(--i))) translateZ(150px); transform-style: preserve-3d; transition: 0.5s;}.cube-big:hover ~ .cube-samll div.big span { background: transparent; border: 10px solid #fff; filter: drop-shadow(0 0 20px #fff);}.cube-samll div.big span.top { transform: rotateX(90deg) translateZ(150px);} .cube-samll div.big span.top::before { content: ''; position: absolute; inset: 0; transform: translateZ(-350px); background: rgba(0,0,0,0.35); filter: blur(50px);}
写在最后
以上就是【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号