CSS3教程text-shadow+动画实现文字抖动效果

terry 2年前 (2023-09-07) 阅读数 411 #CSS

text-shadow是CSS3的一个属性，可以给字体添加阴影效果，减少图片的使用

基本

文-shadow：X轴Y轴模糊颜色；

四个参数分别是X轴、Y轴、阴影模糊大小和阴影颜色。可以设置多种阴影效果。

示例

1。 X轴和Y轴没有设置值，因此它会自行发生。

文字-阴影

2。 X轴和Y轴正值变化，X轴正值向右，Y轴正值向下。
文字-阴影

3。 X轴和Y轴改变了负值，负值X轴向左，负值Y轴向上。
文字阴影

4，多参数

文字-阴影

实际比赛

跳起来

代码

@keyframes animate-my{
0%{
文本shadow：0 1px 0 #d8d8d8，
0 2px 0 #d8d8d8,
0 3px 0 #d8d8d8;
变换：翻译Y(0)；
}
50% {
文本shadow：0 1px 0 #d8d8d8，
0 2px 0 #d8d8d8,
0 3px 0 #d8d8d8,
0 10px 5px 红色；
变换：翻译Y（-20px）；
}
100% {
文本shadow：0 1px 0 #d8d8d8，
0 2px 0 #d8d8d8,
0 3px 0 #d8d8d8;
变换：翻译Y(0)；
}
}