[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实现文字发光的效果](http://pic.xiahunao.cn/[css] 用css3实现文字发光的效果)
![[css] 你有使用过css的属性background-blend-mode吗？说说它的运用场景有哪些？](http://pic.xiahunao.cn/[css] 你有使用过css的属性background-blend-mode吗？说说它的运用场景有哪些？)
![[css] 如何使用css实现鼠标跟随？](http://pic.xiahunao.cn/[css] 如何使用css实现鼠标跟随？)
![[css] 能不能使用纯css使你的浏览器卡死？怎么实现？](http://pic.xiahunao.cn/[css] 能不能使用纯css使你的浏览器卡死？怎么实现？)
![[css] 为什么说对opacity进行动画要比box-shadow进行动画性能更好呢？](http://pic.xiahunao.cn/[css] 为什么说对opacity进行动画要比box-shadow进行动画性能更好呢？)
![[css] 请问class与[class=xxx]的区别是什么？两者是否等价？](http://pic.xiahunao.cn/[css] 请问class与[class=xxx]的区别是什么？两者是否等价？)
![[css] 有哪些标签是不支持伪元素的？](http://pic.xiahunao.cn/[css] 有哪些标签是不支持伪元素的？)
