前端中的常用的动画属性

最新推荐文章于 2024-05-24 07:15:00 发布

小选有在认真学前端

最新推荐文章于 2024-05-24 07:15:00 发布

阅读量708

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/weixin_52484792/article/details/124481777

版权

一、animation

1.作用：增加用户体验（但不要过度使用）

2.关键帧（keyframes）

3.语法

animation: name（动画属性名） duration（动画持续时间） timing-function（动画速度曲线） delay（动画延迟时间） iteration-count（循环次数、infinite为无限循环） direction（alertnate：动画轮流反向播放） fill-mode（forwards：保留最后一帧动画）;

二、变形

1.平移 translate （x、y、z单位为px）

2.旋转 rotate （x、y、z单位为deg）

3.伸缩 scale （x、y 写数值）

4.拉扯 skew （x、y单位为deg）

5.3d效果 transform-style： perserve-3d；

三、代码

1.实现正方体的旋转效果

<!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>特效练习2</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        @keyframes roll {
            from {
                transform: rotateX(0) rotateY(0) rotateZ(0);
            }
            to {
                transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);
            }
        }
        
        body {
            background-color: #333;
        }

最低0.47元/天解锁文章

小选有在认真学前端

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端中的常用的动画属性

一、animation1.作用：增加用户体验（但不要过度使用）2.关键帧（keyframes）3.语法animation: name（动画属性名） duration（动画持续时间） timing-function（动画速度曲线） delay（动画延迟时间） iteration-count（循环次数、infinite为无限循环） direction（alertnate：动画轮流反向播放） fill-mode（forwards：保留最后一帧动画）;二、变形1.平移 translate （
复制链接

扫一扫