癫狂的dom——利用css3让dom动起来

最新推荐文章于 2022-11-01 01:26:24 发布

讨厌走开啦

最新推荐文章于 2022-11-01 01:26:24 发布

阅读量1k

点赞数

分类专栏： css3 文章标签： css3

本文链接：https://blog.csdn.net/lqlqlq007/article/details/78476961

版权

css3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

不废话，先来看一下效果：

我的名字在颤抖！

下面上代码：

html部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="shake.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <span class="shake" style="margin: 40px;">李庆</span>
</body>
</html>

css部分：

/* shake **/
.shake{
    display: inline-block;
    /* -webkit-transform-origin: center center; */
    -ms-transform-origin: center center;
    /* transform-origin: center center; */
    /* -webkit-animation-name: shake-slow; */
    -ms-animation-name: shake-slow;
    animation-name: shake-slow;
    -webkit-animation-duration: 5s;
    -ms-animation-duration: 5s;
    /* animation-duration: 5s; */
    /* -webkit-animation-iteration-count: infinite; */
    -ms-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -ms-animation-timing-function: ease-in-out;
    /* animation-timing-function: ease-in-out; */
    /* -webkit-animation-delay: 0s; */
    -ms-animation-delay: 0s;
    /* animation-delay: 0s; */
    /* -webkit-animation-play-state: running; */
    -ms-animation-play-state: running;
    /* animation-play-state: running; */
}

@-webkit-keyframes shake-slow { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
    2% { -webkit-transform: translate(-1px, 3px) rotate(-1.5deg); }
    4% { -webkit-transform: translate(-4px, 5px) rotate(-1.5deg); }
    6% { -webkit-transform: translate(-1px, 6px) rotate(-0.5deg); }
    8% { -webkit-transform: translate(5px, -4px) rotate(-3.5deg); }
    10% { -webkit-transform: translate(-7px, -3px) rotate(-3.5deg); }
    12% { -webkit-transform: translate(-1px, 8px) rotate(2.5deg); }
    14% { -webkit-transform: translate(3px, -5px) rotate(-1.5deg); }
    16% { -webkit-transform: translate(1px, 0px) rotate(2.5deg); }
    18% { -webkit-transform: translate(-6px, -10px) rotate(-0.5deg); }
    20% { -webkit-transform: translate(3px, -2px) rotate(1.5deg); }
    22% { -webkit-transform: translate(0px, 0px) rotate(-2.5deg); }
    24% { -webkit-transform: translate(-5px, -4px) rotate(1.5deg); }
    26% { -webkit-transform: translate(-1px, 3px) rotate(-3.5deg); }
    28% { -webkit-transform: translate(1px, 1px) rotate(-3.5deg); }
    30% { -webkit-transform: translate(-4px, 8px) rotate(1.5deg); }
    32% { -webkit-transform: translate(-9px, 7px) rotate(-3.5deg); }
    34% { -webkit-transform: translate(4px, -9px) rotate(-2.5deg); }
    36% { -webkit-transform: translate(1px, -6px) rotate(-2.5deg); }
    38% { -webkit-transform: translate(-4px, 0px) rotate(-2.5deg); }
    40% { -webkit-transform: translate(3px, -7px) rotate(0.5deg); }
    42% { -webkit-transform: translate(4px, 4px) rotate(-0.5deg); }
    44% { -webkit-transform: translate(8px, -4px) rotate(-2.5deg); }
    46% { -webkit-transform: translate(9px, 9px) rotate(-3.5deg); }
    48% { -webkit-transform: translate(6px, -8px) rotate(-0.5deg); }
    50% { -webkit-transform: translate(-1px, 4px) rotate(-3.5deg); }
    52% { -webkit-transform: translate(4px, 6px) rotate(-1.5deg); }
    54% { -webkit-transform: translate(9px, -3px) rotate(2.5deg); }
    56% { -webkit-transform: translate(8px, -2px) rotate(-3.5deg); }
    58% { -webkit-transform: translate(-2px, -9px) rotate(-0.5deg); }
    60% { -webkit-transform: translate(-1px, -5px) rotate(2.5deg); }
    62% { -webkit-transform: translate(-8px, 3px) rotate(2.5deg); }
    64% { -webkit-transform: translate(6px, -2px) rotate(-3.5deg); }
    66% { -webkit-transform: translate(-5px, 9px) rotate(-1.5deg); }
    68% { -webkit-transform: translate(3px, 1px) rotate(-0.5deg); }
    70% { -webkit-transform: translate(6px, 4px) rotate(-1.5deg); }
    72% { -webkit-transform: translate(-6px, -5px) rotate(1.5deg); }
    74% { -webkit-transform: translate(-8px, 0px) rotate(-0.5deg); }
    76% { -webkit-transform: translate(-5px, -8px) rotate(1.5deg); }
    78% { -webkit-transform: translate(5px, -3px) rotate(-1.5deg); }
    80% { -webkit-transform: translate(-6px, -3px) rotate(-1.5deg); }
    82% { -webkit-transform: translate(7px, 8px) rotate(-1.5deg); }
    84% { -webkit-transform: translate(-6px, 9px) rotate(0.5deg); }
    86% { -webkit-transform: translate(1px, 8px) rotate(-3.5deg); }
    88% { -webkit-transform: translate(-9px, -2px) rotate(1.5deg); }
    90% { -webkit-transform: translate(4px, -6px) rotate(-1.5deg); }
    92% { -webkit-transform: translate(0px, -1px) rotate(0.5deg); }
    94% { -webkit-transform: translate(2px, -9px) rotate(2.5deg); }
    96% { -webkit-transform: translate(-9px, 1px) rotate(-2.5deg); }
    98% { -webkit-transform: translate(-9px, -5px) rotate(-3.5deg); } }

@-ms-keyframes shake-slow { 0% { -ms-transform: translate(0px, 0px) rotate(0deg); }
    2% { -ms-transform: translate(-10px, 5px) rotate(-2.5deg); }
    4% { -ms-transform: translate(7px, 7px) rotate(-3.5deg); }
    6% { -ms-transform: translate(8px, -7px) rotate(-2.5deg); }
    8% { -ms-transform: translate(-8px, 3px) rotate(-0.5deg); }
    10% { -ms-transform: translate(3px, -10px) rotate(-1.5deg); }
    12% { -ms-transform: translate(-9px, -6px) rotate(2.5deg); }
    14% { -ms-transform: translate(-2px, -6px) rotate(-0.5deg); }
    16% { -ms-transform: translate(6px, -1px) rotate(0.5deg); }
    18% { -ms-transform: translate(5px, -1px) rotate(0.5deg); }
    20% { -ms-transform: translate(7px, -5px) rotate(-0.5deg); }
    22% { -ms-transform: translate(-8px, 5px) rotate(2.5deg); }
    24% { -ms-transform: translate(0px, 4px) rotate(2.5deg); }
    26% { -ms-transform: translate(-1px, 2px) rotate(-1.5deg); }
    28% { -ms-transform: translate(-1px, -1px) rotate(1.5deg); }
    30% { -ms-transform: translate(-5px, -5px) rotate(2.5deg); }
    32% { -ms-transform: translate(0px, 7px) rotate(-0.5deg); }
    34% { -ms-transform: translate(-9px, 3px) rotate(-0.5deg); }
    36% { -ms-transform: translate(3px, -5px) rotate(-2.5deg); }
    38% { -ms-transform: translate(5px, 2px) rotate(-0.5deg); }
    40% { -ms-transform: translate(6px, -3px) rotate(0.5deg); }
    42% { -ms-transform: translate(-4px, -6px) rotate(-0.5deg); }
    44% { -ms-transform: translate(9px, 2px) rotate(-3.5deg); }
    46% { -ms-transform: translate(6px, -4px) rotate(1.5deg); }
    48% { -ms-transform: translate(6px, 5px) rotate(2.5deg); }
    50% { -ms-transform: translate(-9px, -2px) rotate(-2.5deg); }
    52% { -ms-transform: translate(-7px, 9px) rotate(-0.5deg); }
    54% { -ms-transform: translate(-5px, -5px) rotate(-3.5deg); }
    56% { -ms-transform: translate(-6px, -10px) rotate(1.5deg); }
    58% { -ms-transform: translate(-3px, 1px) rotate(-3.5deg); }
    60% { -ms-transform: translate(3px, 5px) rotate(2.5deg); }
    62% { -ms-transform: translate(-1px, -8px) rotate(2.5deg); }
    64% { -ms-transform: translate(6px, -7px) rotate(-0.5deg); }
    66% { -ms-transform: translate(-7px, -1px) rotate(0.5deg); }
    68% { -ms-transform: translate(-3px, -4px) rotate(-1.5deg); }
    70% { -ms-transform: translate(-10px, 9px) rotate(2.5deg); }
    72% { -ms-transform: translate(9px, 9px) rotate(2.5deg); }
    74% { -ms-transform: translate(-6px, 8px) rotate(-0.5deg); }
    76% { -ms-transform: translate(-5px, -10px) rotate(-2.5deg); }
    78% { -ms-transform: translate(-7px, -9px) rotate(-0.5deg); }
    80% { -ms-transform: translate(8px, -4px) rotate(2.5deg); }
    82% { -ms-transform: translate(9px, 4px) rotate(-0.5deg); }
    84% { -ms-transform: translate(-1px, -1px) rotate(2.5deg); }
    86% { -ms-transform: translate(-6px, -3px) rotate(0.5deg); }
    88% { -ms-transform: translate(-2px, -4px) rotate(0.5deg); }
    90% { -ms-transform: translate(5px, 1px) rotate(0.5deg); }
    92% { -ms-transform: translate(1px, 2px) rotate(-3.5deg); }
    94% { -ms-transform: translate(-5px, -10px) rotate(1.5deg); }
    96% { -ms-transform: translate(-6px, 3px) rotate(-3.5deg); }
    98% { -ms-transform: translate(-1px, -7px) rotate(-2.5deg); } }

@keyframes shake-slow { 0% { transform: translate(0px, 0px) rotate(0deg); }
    2% { transform: translate(6px, -7px) rotate(2.5deg); }
    4% { transform: translate(8px, -8px) rotate(2.5deg); }
    6% { transform: translate(1px, -8px) rotate(-3.5deg); }
    8% { transform: translate(-3px, 4px) rotate(-0.5deg); }
    10% { transform: translate(0px, -3px) rotate(1.5deg); }
    12% { transform: translate(-1px, 2px) rotate(0.5deg); }
    14% { transform: translate(6px, 6px) rotate(-1.5deg); }
    16% { transform: translate(-7px, 4px) rotate(-0.5deg); }
    18% { transform: translate(7px, 8px) rotate(-3.5deg); }
    20% { transform: translate(-6px, 2px) rotate(1.5deg); }
    22% { transform: translate(9px, 5px) rotate(-1.5deg); }
    24% { transform: translate(7px, -2px) rotate(0.5deg); }
    26% { transform: translate(-7px, -10px) rotate(-0.5deg); }
    28% { transform: translate(-10px, -8px) rotate(-1.5deg); }
    30% { transform: translate(8px, 4px) rotate(0.5deg); }
    32% { transform: translate(0px, 4px) rotate(1.5deg); }
    34% { transform: translate(-8px, 6px) rotate(-0.5deg); }
    36% { transform: translate(-5px, 7px) rotate(1.5deg); }
    38% { transform: translate(-4px, -4px) rotate(-1.5deg); }
    40% { transform: translate(9px, 4px) rotate(-1.5deg); }
    42% { transform: translate(9px, -5px) rotate(2.5deg); }
    44% { transform: translate(-5px, -4px) rotate(-2.5deg); }
    46% { transform: translate(7px, -7px) rotate(1.5deg); }
    48% { transform: translate(-5px, 8px) rotate(0.5deg); }
    50% { transform: translate(9px, 1px) rotate(-1.5deg); }
    52% { transform: translate(-9px, -5px) rotate(-3.5deg); }
    54% { transform: translate(-2px, 9px) rotate(1.5deg); }
    56% { transform: translate(6px, -1px) rotate(1.5deg); }
    58% { transform: translate(-6px, 0px) rotate(-0.5deg); }
    60% { transform: translate(3px, 1px) rotate(1.5deg); }
    62% { transform: translate(5px, -7px) rotate(-0.5deg); }
    64% { transform: translate(9px, 2px) rotate(2.5deg); }
    66% { transform: translate(6px, 0px) rotate(-2.5deg); }
    68% { transform: translate(5px, -4px) rotate(-2.5deg); }
    70% { transform: translate(-8px, 5px) rotate(-2.5deg); }
    72% { transform: translate(-6px, -2px) rotate(0.5deg); }
    74% { transform: translate(-3px, 7px) rotate(-3.5deg); }
    76% { transform: translate(-7px, -8px) rotate(-3.5deg); }
    78% { transform: translate(-1px, -2px) rotate(2.5deg); }
    80% { transform: translate(8px, 6px) rotate(-2.5deg); }
    82% { transform: translate(-2px, -9px) rotate(2.5deg); }
    84% { transform: translate(8px, -10px) rotate(-0.5deg); }
    86% { transform: translate(-6px, 0px) rotate(2.5deg); }
    88% { transform: translate(-1px, 9px) rotate(-3.5deg); }
    90% { transform: translate(-7px, 8px) rotate(1.5deg); }
    92% { transform: translate(-10px, -8px) rotate(0.5deg); }
    94% { transform: translate(-8px, 6px) rotate(1.5deg); }
    96% { transform: translate(4px, -9px) rotate(2.5deg); }
    98% { transform: translate(-4px, 9px) rotate(0.5deg); } }

注意：如代码复制到本地无法执行，请检查css属性配置与当前运行浏览器是否保持一致。

html部分没有什么可说的，下面主要对css部分进行说明：

display: inline-block;
当前元素必须声明为行内块元素。

transform-origin: center center;
设置元素旋转的中心坐标。

不同浏览器下该属性的名称列表：

浏览器	属性名
IE10 Firefox Opera	transform-origin
IE9	-ms-transform-origin（只支持2D）
Safari Chrome	-webkit-transform-origin
Firefox	-moz-transform-origin
Opera（只支持2D）	-o-transform-origin

这个属性在部分浏览器还支持配置3D中心坐标（2D默认只有2个值，如上例的center center），相比2D多出一个z轴坐标。

属性值枚举值列表：

值	描述
x-axis	定义视图被置于 X 轴的何处。值为：left center right length %
y-axis	定义视图被置于 X 轴的何处。值为：top center bottom length %
z-axis	定义视图被置于 X 轴的何处。值为：length

animation-name: shake-slow;
为 @keyframes 动画规定一个名称。

不同浏览器下该属性的名称列表：

浏览器	属性名
IE10 Firefox Opera	animation-name
Safari Chrome	-webkit-animation-name

animation-duration: 5s;
完整执行一次动画所需时间，单位为秒或毫秒。

不同浏览器下该属性的名称列表：

浏览器	属性名
IE10 Firefox Opera	animation-duration
Safari Chrome	-webkit-animation-duration

animation-iteration-count: infinite;
重复执行动画次数，值为int或infinite（表示无限循环执行）。

不同浏览器下该属性的名称列表：

浏览器	属性名
IE10 Firefox Opera	animation-iteration-count
Safari Chrome	-webkit-animation-iteration-count

animation-timing-function: ease-in-out;
执行动画的速度曲线。

不同浏览器下该属性的名称列表：

浏览器	属性名
IE10 Firefox Opera	animation-timing-function
Safari Chrome	-webkit-animation-timing-function

属性值枚举值列表：

值	描述
linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

备注：cubic-bezier是以贝塞尔曲线来定义速度曲线，四个参数分别对应绘制曲线所需的第二个节点和第三个节点的坐标（x1,y1,x2,y2）。

PS：笔者这里实在没看出来ease和ease-in-out的区别，有深入研究的同学求指导。

animation-delay: 0s;
动画延迟执行时间。

不同浏览器下该属性的名称列表：

浏览器	属性名
IE10 Firefox Opera	animation-delay
Safari Chrome	-webkit-animation-delay

备注：这个延迟执行时间可以为负数（如当前完整动画需要执行5秒，定义为-2秒则表示立即开始执行动画并从第2秒开始执行动画，即动画不是从头开始执行）。

animation-play-state: running;
动画执行状态，js可以通过该属性来控制动画执行和暂停。

不同浏览器下该属性的名称列表：

浏览器	属性名
IE10 Firefox Opera	animation-play-state
Safari Chrome	-webkit-animation-play-state

属性值枚举值列表：

值	描述
paused	规定动画已暂停。
running	规定动画正在播放。

@keyframes
定义动画规则（这里才是真正定义动画的地方）。

不同浏览器下该属性的名称列表：

浏览器	属性名
Firefox	-moz-keyframes
Opera	-o-keyframes
Safari Chrome	-webkit-keyframes

语法规则：
@keyframes animationname {keyframes-selector {css-styles;}}

语法属性列表：

值	描述
animationname	必需。定义动画的名称。
keyframes-selector	必需。动画时长的百分比。合法的值：0-100% from（与 0% 相同） to（与 100% 相同）
css-styles	必需。一个或多个合法的 CSS 样式属性。

transform
调整dom元素位置（允许对元素进行旋转、缩放、移动或倾斜）。

不同浏览器下该属性的名称列表：

浏览器	属性名
IE10 Firefox Opera	transform
IE9	-ms-transform
Safari Chrome	-webkit-transform

transform属性的值非常多，且值为函数，下面仅给出例子中所使用值的说明：

值	描述
translate(x,y)	调整动画的2D位置（x和y对应图形的偏移量）。
rotate(angle)	调整动画的2D旋转角度。

完整的属性值列表戳这里


用一句话来解释@keyframes animationname {keyframes-selector {css-styles;}}的意思：

当动画执行到keyframes-selector时刻时把定义的css-styles应用在dom上（我们无需关心在两个keyframes-selector之间css-styles是如何过渡的）。