一. 知识点回顾
1.动画
| 属性 | 描述 |
|---|---|
| @keyframes | 规定动画模式 |
| animation | 设置所有动画属性的简写属性 |
| animation-delay | 规定动画开始的延迟 |
| animation-direction | 规定动画是向前播放、向后播放还是交替播放 |
| animation-duration | 规定动画完成一个周期应花费的时间 |
| animation-fill-mode | 规定元素在不播放动画时的样式（在开始前、结束后，或两者同时） |
| animation-iteration-count | 规定动画应播放的次数 |
| animation-name | 规定 @keyframes 动画的名称 |
| animation-play-state | 规定动画是运行还是暂停 |
| animation-timing-function | 规定动画的速度曲线。 |
animation: 动画名称 动画时间 动画曲线 何时开始 播放次数 是否反方向;
alternate:表示动画先正常运行再反方向运行，并持续交替
infinite:表示无限循环
2.文字阴影
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊的距离。 |
| color | 可选。阴影的颜色 |
text-shadow: h-shadow v-shadow blur color;
text-shadow: 水平阴影位置(必须) 垂直阴影位置(必须) 模糊距离(可选) 阴影颜色(可选);
二.代码演示
<body>
<h1>
<span>h</span>
<span>e</span>
<span>l</span>
<span>l</span>
<span>o</span>
<span>!</span>
</h1>
</body>
<style>
body {
height: 800px;
display: flex;
justify-content: center;
align-items: center;
background-color: pink;
}
h1 span {
top: 20px; /*字符上下浮动*/
position: relative;
animation: loading 0.3s ease 0s infinite alternate; /*引用动画*/
/* animation: 动画名称 动画时间 动画曲线 何时开始 播放次数 是否反方向;
alternate:表示动画先正常运行再反方向运行，并持续交替
infinite:表示无限循环*/
font-size: 100px;
color: white;
text-shadow: 0 1px 0 #CCC,
0 2px 0 #CCC,
0 3px 0 #CCC,
0 4px 0 #CCC,
0 5px 0 #CCC,
0 6px 0 #CCC,
0 7px 0 #CCC,
0 8px 0 #CCC,
0 9px 0 #CCC,
0 10px 10px rgba(0, 0, 0, 0.5);
/*text-shadow: 水平阴影位置(必须) 垂直阴影位置(必须) 模糊距离(可选) 阴影颜色(可选);
text-shadow: h-shadow v-shadow blur color; */
}
h1 span:nth-child(2) {
animation-delay: 0.1s;
}
h1 span:nth-child(3) {
animation-delay: 0.2s;
}
h1 span:nth-child(4) {
animation-delay: 0.3s;
}
h1 span:nth-child(5) {
animation-delay: 0.4s;
}
h1 span:nth-child(6) {
animation-delay: 0.5s;
}
@keyframes loading {
/* 定义动画*/
100% {
top: -20px; /*字符上下浮动*/
text-shadow: 0 1px 0 #CCC,
0 2px 0 #CCC,
0 3px 0 #CCC,
0 4px 0 #CCC,
0 5px 0 #CCC,
0 6px 0 #CCC,
0 7px 0 #CCC,
0 8px 0 #CCC,
0 9px 0 #CCC,
0 50px 25px rgba(0, 0, 0, 0.3);
/*上升的时候阴影要在文字下面一些，所以垂直阴影的位置坐标和模糊距离要大一些*/
}
}
</style>
注意事项：
1.一般写垂直阴影位置连续的多组文字阴影，使文字具有立体感，即在静止和跃动的时候文字和投影之间都不会有空隙
2.文字阴影的颜色是和文字同色的深色系，使其具有立体感
3.最后一组文字阴影的颜色是透明的黑色主要是为了展示字符跳动过程中的投影效果，由于近大远小，字符上升时的投影颜色要浅一些，下来的时候颜色要深一些
三.效果演示
