CSS过渡、变形及动画的实现

最新推荐文章于 2022-07-01 09:40:33 发布

遥岑.

最新推荐文章于 2022-07-01 09:40:33 发布

阅读量299

点赞数 4

分类专栏：笔记 CSS 文章标签： css3

本文链接：https://blog.csdn.net/m0_52942098/article/details/116304837

版权

笔记同时被 2 个专栏收录

50 篇文章 0 订阅

订阅专栏

CSS

5 篇文章 0 订阅

订阅专栏

过渡（transition）

元素从一种样式逐渐改变为另一种的效果。

需要规定：

指定要添加效果的CSS属性
指定效果的持续时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>transition</title>
    <style type="text/css">
        .test {
            width: 200px;
            height: 160px;
            float: left;
            background-color: aqua;
            /* 使盒子的背景色从青色过渡为天蓝色 */
            /*指定要添加效果的CSS属性*/
            transition-property: background-color;
            /*指定效果的持续时间*/
            transition-duration: 6s;
        }
        .test:hover {
            background-color: deepskyblue;
        }
    </style>
</head>
<body>
    <div class="test">
        雨后有车驶来 驶过暮色苍白
    </div>
</body>
</html>

属性	属性值	描述
transition-property	①none ②all ③应用过渡效果的属性名称，多个属性之间用逗号隔开	使用过渡效果的CSS属性名
transition-duration	秒/毫秒	指定对象过渡的持续时间
transition-timing-function	①linear（线性过渡）②ease（平滑过渡）③ease-in（由慢到快）④ease-out（由快到慢）⑤ease-in-out（由慢到快再到慢）	过渡效果的速度曲线
transition-delay	秒/毫秒	过渡的延迟时间
transition	property duration timing-function delay	简写属性

变形（transform）

transform属性向元素应用2D或3D转换，允许我们对元素进行旋转、缩放、移动、倾斜。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>transform</title>
    <style>
        div {
            width: 110px;
            height: 80px;
            margin-top: 10px;
            padding: 10px;
            border: 1px solid #ddd;
            background-image: url(./images/OIP.jfif);
        }
        #normal {
            float: left;
            margin-left: 40px;
        }
        #test1 {
            /* 矩形变换 */
            transform: matrix(0,1,1,1,10,10);
            float: left;
            margin-left: 40px;
        }
        #test2 {
            /* 平移 */
            transform: translate(100px,-20px);
            float: left;
            margin-left: 40px;
        }
        #test3 {
            /* 旋转 */
            transform: rotate(45deg);
            float: left;
            margin-left: 160px;
        }
        #test4 {
            /* 缩放 */
            transform: scale(0.6);
            float: left;
            margin-left: 40px;
        }
        #test5 {
            /* 倾斜 */
            transform: skew(25deg);
            float: left;
            margin-left: 40px;
        }
    </style>
</head>
<body>
    <div id="normal"></div>
    <br>
    <div id="test1">1</div>
    <br>
    <div id="test2">2</div>
    <br>
    <div id="test3">3</div>
    <br>
    <div id="test4">4</div>
    <br>
    <div id="test5">5</div>
</body>
</html>

效果如下：
变形效果

属性	描述
transform: matrix(值1，值2，值3，值4，值5，值6 )	定义矩形变换，基于x，y轴重新定位元素的位置
transform: translate(x,y)	平移（相对上一个元素）（第二个参数默认为0）
transform: rotate(angle)	旋转
transform: scale(x,y)	缩放（若第二个参数没提供，默认用第一个参数的值）
transform: skew(x,y)	倾斜（第二个参数默认为0）

动画（animation）

@keyframes 动画名称 {
       @keyframes-selector { css-styles }
}

动画名称：引用的唯一标识，不能为空
keyframes-selector：关键帧选择器，即指定当前关键帧要应用到整个动画过程中的位置。值可以是一个百分比、from或to。其中，from和0%效果相同表示动画的开始，to和100%效果相同表示动画的结束
css-styles：定义执行到当前关键帧时对应的动画状态，由CSS样式属性进行定义，多个属性之间用分号分隔，不能为空

步骤：

创建动画（如上代码）
使用animation-name属性使用定义好的动画
其他属性设置动画效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>animation</title>
    <style type="text/css">
        div {
            width: 110px;
            height: 80px;
            margin-top: 10px;
            padding: 10px;
            background-color: cyan;
            border: 1px solid black;
            position: absolute;
            /* 使用定义好的动画 */
            animation-name: mymovie;
            /* 设置动画完成时间 */
            animation-duration: 10s;
            /* 设置动画延迟时间 */
            animation-delay: 3s;
        }
        /* 创建动画 */
        @keyframes mymovie {
            0% {
                left: 0px;
                top: 0px;
                background-color: darkcyan;
            }
            20% {
                left: 200px;
                top: 0px;
            }
            70% {
                left: 200px;
                top: 200px;
                background-color: darkslateblue;
            }
            100% {
                left: 0px;
                top: 200px;
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

css-style：

属性	取值	描述
animation-name	动画名称	使用定义好的动画
animation-duration	s/ms	设置完成动画所需要的时间
animation-timing-function	①linear（线性过渡）②ease（平滑过渡）③ease-in（由慢到快）④ease-out（由快到慢）⑤ease-in-out（由慢到快再到慢）	过渡效果的速度曲线
animation-delay	s/ms	延迟时间
animation-iteration-count	①infinite（循环）②n（播放次数）	播放次数
animation-direction	①alternate（基数次正常，偶数次逆向）② reverse（反向播放）③normal（正常播放-默认）	播放方向
animation	name duration timing-function delay iteration-count direction	简写属性

描述过渡效果的速度曲线 transition-timing-function 和描述动画效果的速度曲线 animation-timing-function 的属性值也可以用贝塞尔曲线（cubic-bezier）表示
贝塞尔曲线也叫三次贝塞尔，主要是为animation生成速度曲线的函数，四个值的取值范围都在[0,1]。
cubic-bezier（<x1> <y1> <x2> <y2>）
常用的固定值对应的cubic-bezier值：

linear：线性过渡，贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease：平滑过渡，贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in：由慢到快，贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out：由快到慢，贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out：由慢到快再到慢，贝塞尔曲线(0.42, 0, 0.58, 1.0)

遥岑.

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
CSS过渡、变形及动画的实现

目录过渡变形动画过渡元素从一种样式逐渐改变为另一种的效果。需要规定：指定要添加效果的CSS属性指定效果的持续时间<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content=
复制链接

扫一扫