CSS动画菜鸟小结

最新推荐文章于 2024-07-29 14:14:21 发布

在下爱薯片

最新推荐文章于 2024-07-29 14:14:21 发布

阅读量519

点赞数

本文链接：https://blog.csdn.net/weixin_41720551/article/details/80572682

版权

让我们首先了解一下过渡（CSS3）

过渡（transition）是CSS3中具有颠覆性的特征之一，我们可以在不使用flash动画或javaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

帧动画：通过一阵一阵的画面按照固定顺序和速度播放。如电影胶片

在CSS3里使用transition可以实现补间动画（过渡效果），并且当前元素只要有“属性”发生变化时即存在两种状态，就可以实现平滑的过渡。（我用hover切换两种状态，当然不仅仅局限于用hover）

语法格式：transition:要过渡的属性花费时间运动曲线何时开始（多组属性，逗号隔开）

补充：transition-duration 花费时间单位是秒 s 比如 0.5s 这个 s 必须写。

运动曲线示意图：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div{
                width: 200px;
                height: 200px;
                background-color: pink;
                /*transition:要过渡的属性 花费时间 运动曲线 何时开始*/
                transition: width 0.6s ease 0s,height 0.3s ease-in 0.6s;
                /*transition 过渡的意思 这句话写到div里面而不是 hover 里面*/
                /*如果想要改变所有属性 写一个all 就行了 后面两个属性可以省略*/
            }
            div:hover{
                /*鼠标经过盒子我们给他变换宽高*/
                width: 600px;
                height: 300px;
            }

        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

2D变形（CSS3）transform

transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移，旋转，倾斜，缩放，甚至支持矩阵方式，配合过渡和动画知识，可以取大量之前只能靠Flash才可以实现的效果。

transform 变形变换的意思

translate 移动平移的意思

translate（20px，20px）水平移动20px 垂直移动20px

translate（20px）水平移动20px

translateX（）只水平即X轴移动 translateY（）只垂直即Y轴移动

如果移动距离为百分比，不是以父级宽度为标准，是以自己的宽度为准

缩放scale（x,y）

scale()的取值默认为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小，而任何大于或等于1.01的值，作用是让元素放大

旋转 rotate(deg) （注意：单位是deg度数）

可以对元素进行旋转，正值为顺时针，负值为逆时针；

transform-origin 可以调整元素转换变形的原点即围绕哪一点进行旋转

默认为（center，center）其值想设置四个角用left top 等，如果想精确位置可以使用像素(px)。

倾斜skew(deg,deg)

3D变形（CSS3）transform

左手坐标系

伸出左手，如图建立坐标轴

透视（perspective）

perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置。

电脑显示屏是一个2D平面，图像之所以有立体感（3D），其实是通过透视来实现视觉呈现（伪3D）。

透视原理：近大远小

perspective一般作为一个属性，设置给父元素，作用于所有3D转换的子元素

移动（3D）还是使用transform

增加一个Z轴的移动，借助透视（透视只是一种展现形式，是有3D效果的意思），translateZ 是物体到屏幕的距离，直观表现为物体大小的变化，依旧符合近大远小。

注意：Z轴里为负外为正

3D提供一种综合写法：transform:translate3d (x,y,z); x和y 可以是px和百分比，但是z只可以是px。

翻转（3D）

backface-visibility 属性定义当元素不面向屏幕时是否可见如属性：hidden 可以实现隐藏

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

终于到了我们的主题——动画 animation(css3)

动画是CSS3中具有颠覆性的特征之一，可以通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。这是一段官方文字，看看就好，我们往下看内容

这么多属性，记不住不要紧，写的时候查就好了。

语法格式 animation:动画名称动画时间运动曲线何时开始播放次数是否反方向

接下来分享几个小点：

动画名称是自定义的
先定义后引用定义：@keyframes 动画名称 { from{变化前} to{变化后} } 引用：按格式
无限循环播放 animation-iteration-count:infinite
暂停动画 animation-play-state:paused
定义里面也可以用多个百分比分段如{ 0%{ } 20%{ } 40%{ } 60%{ } 80%{ } 100%{ } } 0%相当于from 100%相当于to

敬请期待...