CSS过渡效果、2D 效果及动画效果

1、过渡

定义过度的属性

transition-property: width,height;

transition-property: all;

过度的时间：单位s

transition-duration: 1s;

合并：属性 + 时间 + 运动曲线

transition: all 1s ease-in;

运动曲线

transition-timing-function

linear 匀速

ease-in 由慢到快

ease-out 由快到慢

transition-timing-function: ease-in-out;

延迟执行：单位s

transition-delay: 0s;

合并：属性 + 时间 + 运动曲线 + 延迟执行

transition: all 1s ease-in 0s;

2、平移（注意：网页上原点位置在浏览器左上角）

translate(x,y)；

transform: translate(500px,0);

transform: translate(0,500px);

transform: translate(100px,300px);

3、旋转

rotate(deg) 单位deg

transform:rotate(300deg);

transition: all 10s;

旋转中心点

transform-origin: left top; 左上

transform-origin: right bottom; 右下

transform-origin: center top; 上中

transform-origin: 50% 25%; 在上边框的中心，向下偏移25%

transform-origin: 50px 50px; 以盒子左上角为原点，向右平移50px，向下平移50px

4、缩放：放大和缩小

scale(x,y)

>1 放大

<1 缩小

=1 不变

0 消失

-1 反转

x,y 的值一致的，那么可以写成一个

transform: scale(1.5,1.5);

transform: scale(1.5,1);

transform: scale(0.5,0.5); 放大0.5倍

transform: scale(0); 不变

transform: scale(-1); 缩小一倍

transform: scale(-1,1); x缩小一倍，y放大一倍

5、倾斜

skew(x,y) 单位deg

transform: skew(-40deg,0);

transform: skew(0deg,30deg);

transform: skew(40deg,30deg);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            /* 过渡 */
            transition: all 5s;
        }
        .btn1:hover~.box{
            /* 平移 */
            transform: translate(100px,300px);
        }
        .btn2:hover~.box{
            /* 旋转 */
            transform:rotate(100deg);
        }
        .btn3:hover~.box{
            /* 缩放 */
            transform: scale(0.5,0.5);
        }
        .btn4:hover~.box{
            /* 倾斜 */
            transform: skew(-20deg,0);
        }
    </style>
</head>
<body>
    <button class="btn1">悬浮移动-平移</button>
    <button class="btn2">悬浮旋转</button>
    <button class="btn3">悬浮缩放</button>
    <button class="btn4">悬浮倾斜</button>
    <div class="box">hello</div>
</body>
</html>

6、动画

创建动画（可以使用 from~to）和（0% ~ 100%）

@-webkit-keyframes move{
            /*
            from{
                transform: translate(0,0);
            }
            to{
                transform: translate(800px,0);
            }
            */
            0%{
                transform: translate(0,0) rotate(0deg);
                background-color: red;
            }
            50%{
                transform: translate(800px,0) rotate(180deg);
                background-color: green;
            }
            100%{
                transform: translate(0,0) rotate(360deg);
                background-color: yellow;
            }
        }

使用动画 animation

  /* 使用哪个动画 */
 animation-name: move;
  /* 动画时间 */
animation-duration: 5s;
 /* 运动曲线 */
animation-timing-function: linear;
 /* 运动次数 */
animation-iteration-count: 1;

合并

animation:动画名称执行时间运动曲线执行次数延迟的时间;

animation:move 5s linear infinite(无限次数) 5s;

posted @ 2023-10-30 20:33 五季-子琛阅读(106) 评论(1) 收藏举报

刷新页面返回顶部

izichen

CSS过渡效果、2D 效果及动画效果

公告