haizhilin2013
2020-04-09 04:37:41 星期四
css
用css3实现伪3D的文字效果
使用text-shadow效果:
color: white;
text-shadow: 1px 1px 0 #158af7,
2px 2px 0 #158af7, /* end of 2 level deep grey shadow */
3px 3px 0 #158af7,
4px 4px 0 #158af7,
5px 5px 0 #158af7,
6px 6px 0 #158af7; /* end of 4 level deep dark shadow */
text-shadow 的阴影效果实现伪3D。text-shadow: <颜色> <偏移量> <模糊半径>。text-shadow: <颜色> <偏移量> <模糊半径>, <颜色> <偏移量> <模糊半径> 
<!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>
学习不打烊，充电加油只为遇到更好的自己，365天无节假日，每天早上5点纯手工发布前端知识点（死磕自己，愉悦大家）。希望大家在这浮夸的前端圈里，保持冷静，坚持每天花20分钟来学习与思考。在这千变万化，类库层出不穷的前端，建议大家不要等到找工作时，才狂刷题，提倡每日学习！欢迎大家关注3+1开源项目！希望大家每人去学习与思考！（不要为了谁而来，要为自己而努力！）
加群前端学习每日3+1群
扫码，备注“3+1”加群一起学
