[css] 用css3实现伪3D的文字效果
生活随笔
收集整理的這篇文章主要介紹了
[css] 用css3实现伪3D的文字效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
[css] 用css3實現偽3D的文字效果
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title> 交錯跳躍3D Loading</title> </head> <style>body {display: flex;height: 100vh;justify-content: center;align-items: center;text-align: center;background: #2980b9;}.loading {display: flex;color: white;font-size: 5em;text-transform: uppercase;}.loading span {text-shadow: 0 1px #bbb, 0 2px #bbb, 0 3px #bbb, 0 4px #bbb, 0 5px #bbb, 0 6px transparent, 0 7px transparent, 0 8px transparent, 0 9px transparent, 0 10px 10px rgba(0, 0, 0, 0.4);transform: translateY(20px);animation: bounce 0.3s ease infinite alternate;}@keyframes bounce {to {text-shadow: 0 1px #bbb, 0 2px #bbb, 0 3px #bbb, 0 4px #bbb, 0 5px #bbb, 0 6px #bbb, 0 7px #bbb, 0 8px #bbb, 0 9px #bbb, 0 50px 25px rgba(0, 0, 0, 0.2);transform: translateY(-20px);}} </style><body><div class="loading">Loading</div> </body></html> <script>let loading = document.querySelector(".loading");let letters = loading.textContent.split("");loading.textContent = "";letters.forEach((letter, i) => {let span = document.createElement("span");span.textContent = letter;span.style.animationDelay = `${i / 10}s`;loading.append(span);}); </script>個人簡介
我是歌謠，歡迎和大家一起交流前后端知識。放棄很容易，
但堅持一定很酷。歡迎大家一起討論
主目錄
與歌謠一起通關前端面試題
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的[css] 用css3实现伪3D的文字效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： L298N 小车应用（附代码）
- 下一篇： C# 反编译-Reflector 反混淆