CSS3怎么实现文字抖动效果

介绍

本篇内容主要讲解“CSS3怎么实现文字抖动效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS3怎么实现文字抖动效果”吧!

基础说明

文本阴影:X轴Y轴模糊颜色;

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

举例

1,没有给其X轴与Y轴设置值,所以会发生在本身。

文本阴影

2, X轴与Y轴改变了正值,正值X轴向右,正值Y轴向下。

文本阴影

3, X轴与Y轴改变了负值、负值X轴向左,负值Y轴向上。

文本阴影

4,多参数

文本阴影

跳起来

代码

@keyframes animate-my {

0% {

文本阴影:0 1 px 0 # d8d8d8,

0 2 px 0 # d8d8d8,

0 3 px 0 # d8d8d8;

变换:translateY (0);}

50% {

文本阴影:0 1 px 0 # d8d8d8,

0 2 px 0 # d8d8d8,

0 3 px 0 # d8d8d8,

0 10 px 5 px红色;

变换:translateY (-20 px);}

100% {

文本阴影:0 1 px 0 # d8d8d8,

0 2 px 0 # d8d8d8,

0 3 px 0 # d8d8d8;

变换:translateY (0);}

}

到此,相信大家对“CSS3怎么实现文字抖动效果”有了更深的了解,不妨来实际操作一番吧!这里是网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

CSS3怎么实现文字抖动效果