寫在前面
今天這個練習，在很多場景中，可能沒有什麼實際用途，但是，如果我們將它作為一個有趣好玩的練習案例來玩，這個還是有用的，因為這樣的效果，之前我們都是需要藉助第三方插件來實現。
而今天這個練習，我們只需要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);}寫在最後
以上就是【每日一練】的全部內容，希望今天的小練習對你有用，如果你覺得有幫助的話，請點讚我，關注我，並將它分享給你身邊做開發的朋友，也許能夠幫助到他。
我是楊小愛，我們明天見。
學習更多技能
請點擊下方公眾號
留言列表