web前端—前端三剑客之css(6)：动画样式

最新推荐文章于 2024-08-24 15:01:06 发布

觅远

最新推荐文章于 2024-08-24 15:01:06 发布

阅读量154

点赞数

文章标签： css css3 animation html

本文链接：https://blog.csdn.net/JBY2020/article/details/117093754

版权

本文详细介绍了前端CSS动画的触发式和主动式两种类型。触发式动画涉及:hover、:checked和:active等触发动作，并讨论了动画参数如过渡时间和延迟。主动式动画则允许开发者自定义关键帧，通过animation-name、animation-duration等属性控制动画的执行。此外，还展示了如何创建动画爱心效果。

摘要由CSDN通过智能技术生成

动画效果的实现：短时间内连续播放多张静态的帧(静态的图形)，并且每一帧图像内部物体的状态（形状，大小，角度，位置，颜色等）必须要发生变化。

触发式动画

<!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>触发式动画</title>
    <style>
        div{
            width: 80px;
            height: 80px;
            background-color: rgb(0, 255, 34);
            margin: 40px 30px;
            text-align: center;
            color: crimson;
            font-size: 10px;
        }
        .s1{
            transform: rotate(45deg);  /*  旋转，括号里面指定旋转的角度，单位是deg  */
        }
        .s2{
            transform: scale(0.5);  /* 等比例缩放，括号里面指定缩放的倍数，倍数要大于0，0——1之间为缩小，大于1为放大 */
        }
        .s3{
            transform: translateX(100px) translateY(30PX);  /*  位移  */
        }
        .s4:hover{
            transform: scale(1.5) rotate(45deg) translateX(50px) translateY(50px);   /* 复合样式写法 */
            transition: 2s;   /*  设置过渡时间  */
        }
    </style>
</head>
<body>
    <div class="s1"></div>
    <div class="s2"></div>
    <div class="s3"></div>
    <div class="s4"><p>复合样式写法</p></div>
</body>
</html>

常用触发动作

1、鼠标悬浮（:hover）

2、选项选中（:checked）

3、输入框点击（:active）

~~注：元素默认的状态赋予动画的第一帧，触发动作赋予元素动画的最后一帧~~

触发式动画之动画参数

过渡动画时间(transition-duration)：定义一个动画从第一帧到最后一帧的动画时间，浏览器会根据该时间生成对应数量的中间帧数，帧数=时间(秒)*60帧/秒

过渡动画延迟(transition-delay)：定义动画从触发动作执行的一瞬间，延迟多长时间开始展示动画，默认延迟为0，即动作一执行立马就展示动画

过渡动画时间函数( transition-timing-function)：定义动画从第一帧到最后一帧变化过程的速率变化，参数见贝塞尔曲线。

过渡动画属性( transition- property)：定义元素是以某个属性的变

最低0.47元/天解锁文章

觅远

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端—前端三剑客之css(6)：动画样式

动画效果的实现：短时间内连续播放多张静态的帧(静态的图形)，并且每一帧图像内部物体的状态（形状，大小，角度，位置，颜色等）必须要发生变化。触发式动画<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vie
复制链接

扫一扫