web前端的动画效果

铅笔画再美＞终究是灰色

已于 2024-02-18 14:10:52 修改

阅读量1.5k

点赞数 23

文章标签：前端

于 2024-02-18 13:54:44 首次发布

本文链接：https://blog.csdn.net/qq_55846232/article/details/136148737

版权

transform

位移旋转倾斜缩放

translate（tx，[ty]）（沿着x轴，沿着y轴）元素沿着X轴移动，如果ty有值，就是既沿着x轴又沿着y轴斜着移动

translateX（tx）元素只沿着X轴移动

translateY（ty）元素只沿着Y轴移动

translateZ（tz）元素只沿着Z轴移动

translate3d（tx，ty，tz）元素沿着x轴，y轴，z轴同时移动

rotate(angle)

元素沿着Z轴旋转

rotateX（）元素只沿着X轴旋转

rotateY（）元素只沿着Y轴旋转

rotateZ（）元素只沿着Z轴旋转与 rotate(angle) 一样

rotate3d（x，y，z，angle）元素同时沿着X轴，Y轴，Z轴旋转

倾斜 skew(sx,[sy])

元素沿着x轴倾斜，如果sy有值，既沿着x轴又沿着y轴倾斜

skewX（sx deg）元素只沿着x轴倾斜

skewY（sy deg）元素只沿着y轴倾斜

同时使用多种变形效果 变形效果函数使用空格隔开，注意不要逗号隔开

设置变形中心点 transform-origin :(0px,0px) 中心点

开启3d效果（近大远小） perspective 其值是距离，值越小透明越明显必须使用在父级元素上

3d背面是否可见 backface-visibility visible可见 hidden隐藏

3d嵌套效果是否可见 transform-style flat（不保留元素的3d位置，默认） preserve-3d（保留元素的3d位置）必须使用在父级元素上

flex-wrap：是否自动换行 wrap换行 nowrap自动换行 wrap-reverse 同 wrap 值，只是换成反序方向

动画：过渡动画，帧动画

transition 默认是匀速

transition-property 指定哪个属性执行过度效果

transition-duration 设置动画的持续时间 0.5s 的0可以省略

transition-timing-function 设置动画速度的模型

linear(匀速) ease(由慢到快，再又快到慢) ease-in(由慢到快) ease-out(由快到慢) ease-in-out(由慢到快，再又快到慢)

transitoin-delay 设置动画的延迟时间

.box:hover{

}表示鼠标放上去的动画

帧动画：animation 复合属性

使用：

animation-name：指定使用哪个帧动画

animation-duration：设置动画的持续时间

animation-timing-function：设置动画速度的模型

linear(匀速) ease(由慢到快，再又快到慢) ease-in(由慢到快) ease-out(由快到慢) ease-in-out(由慢到快，再又快到慢)

animation-iteration-count：动画执行的次数数字或infinite(无穷）

animation-play-states：设置动画播放状态

animation-direction：设置动画的交替方向 alternate交替

定义：@keyframes 动画名称{

from|to|百分数{

样式

}

...

}

box-shadow与text-shadow一样

text-shadow: 20px 0px 70px #ee5a24;

水平偏移量竖直偏移量模糊度颜色

border-radius：5px 6px

5px代表左上右下 6px代表右上左下以6px画的圆

border-radius：5px 6px 7px

左上右上右下然后6px也代表左下

以左上为开始顺时针旋转

border-radius：5px 6px 7px 8px （代表横向）/ 20px 30px 50px 60px（代表纵向）最完整的表示

以下是九宫格的动画代码，有兴趣的可以尝试一下

九宫格-CSDN直播

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #000;
        }
        
        .container {
            width: 300px;
            height: 300px;
            display: flex;
            flex-wrap: wrap;
        }
        
        .container div {
            width: 100px;
            height: 100px;
            background-image: url(3.jpg);
            border: 1px solid #fff;
            box-sizing: border-box;
            position: relative;
            transition: all 2s ease;
        }
        
        .container div:nth-child(3n+1) {
            background-position-x: 0px;
            left: -10px;
        }
        
        .container div:nth-child(3n+2) {
            background-position-x: -100px;
            left: 0px;
        }
        
        .container div:nth-child(3n+3) {
            background-position-x: -200px;
            left: 10px;
        }
        
        .container div:nth-child(-n+9) {
            top: 10px;
            background-position-y: -200px;
        }
        
        .container div:nth-child(-n+6) {
            top: 0px;
            background-position-y: -100px;
        }
        
        .container div:nth-child(-n+3) {
            top: -10px;
            background-position-y: 0px;
        }
        
        .container:hover div {
            top: 0;
            left: 0;
        }
        
        .container div:hover {
            transform: rotate(360deg);
        }
    </style>
</head>

<body>
    <div class="container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>

</html>