CSS3使用过度动画和缓动效果案例讲解

2024-04-02 19:04:59 579人浏览薄情痞子

摘要

transition过渡：四个小属性属性意义

transition过渡：

四个小属性

属性	意义
transition-property	哪些属性要过渡
transition-duration	动画时间
transition-timing-function	动画变化曲线（缓动效果）
transition-delay	延迟时间

transition过度属性是css3浓墨重彩的特性，过度可以为一个元素在不同样式之间变化自动添加“补间动画”

在这里插入图片描述

兼容性IE10开始兼容，移动端兼容良好
曾几何时，网页上的动画特效基本都是由javascript定时器实现的，现在逐步改为使用CSS3过度
优点：动画更细腻，内存开销小
transition属性有4个要素：
transition：width 1s linear 0s;（什么属性要过度、动画时长、变化速度曲线、延迟时间）


<!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>
        .box {
            width: 200px;
            height: 200px;
            background-color: black;
            transition: width 5s linear 0s;
        }
        .box:hover {
            width: 500px;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>

就是需要过渡的的加属性值transition，第一个值为变化的属性

哪些属性可以参与过渡

所有数值类型的属性，都可以参与过渡，比如width、height、left、top、border-radius
背景颜色和文字颜色都可以被过渡
所有变形（包括2D和3D）都可以被过渡

all：

所有的属性都要参与过渡，可以写all
transition：all 5s linear 0s;


<!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>
        .box {
            width: 200px;
            height: 200px;
            background-color: black;
            transition: width 5s linear 0s;
        }
        .box:hover {
            width: 500px;
        }

        .box1{
            width: 200px;
            height: 200px;
            background-color: blue;
            transition: all 5s linear 0s;
        }
        .box1:hover {
            width: 400px;
            height: 200px;
            background-color: greenyellow;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box1"></div>
</body>
</html>

过渡的缓动效果：

缓动参数

transition的第三个参数就是缓动参数，也就是变化速度曲线
transition：width 1s linear 0s;

常用的缓动参数

在这里插入图片描述

子属性

transition-timing-function：ease；


<!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>
        * {
            margin: 0;
            padding: 0;
        }
        .box1 {
            border:1px solid black;
        }
        .box1 p{
            width: 50px;
            height: 50px;
            background-color: blue;
            position: relative;
            left: 0;
            margin-bottom: 10px;
            transition: left 5s linear 0s;
        }
        .box1 p:nth-child(2) {
            transition-timing-function: ease;
        }
        .box1 p:nth-child(3) {
            transition-timing-function: ease-in;
        }
        .box1 p:nth-child(4) {
            transition-timing-function: ease-out;
        }
        .box1 p:nth-child(5) {
            transition-timing-function: ease-in-out;
        }
        .box1:hover p {
            left: 100px;

        }
    </style>
</head>
<body>
    <div class="box1">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
</body>
</html>

贝塞尔曲线：

网站https://cubic-bezier.com/可以生成贝塞尔曲线，可以自定义动画缓动参数

在这里插入图片描述

到此这篇关于CSS3使用过度动画和缓动效果案例讲解的文章就介绍到这了,更多相关CSS3使用过度动画和缓动效果内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: CSS3使用过度动画和缓动效果案例讲解

本文链接: https://www.lsjlt.com/news/131199.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

c语言怎么计算字符串长度

在C语言中，可以使用内置的strlen()函数来计算字符串的长度。该函数位于string.h头文件中。以下是一个示例代码： #inc...

99+

2024-05-14

c语言
c语言怎么判断三个数的大小

可以通过比较三个数之间的大小关系来判断它们的大小。以下是一个示例代码： #include <stdio.h> int ...

99+

2024-05-14

c语言
c++排序函数sort怎么使用

在C++中，使用sort函数对容器中的元素进行排序，可以按照默认的升序排列，也可以自定义排序规则。下面是一个简单的例子，对一个ve...

99+

2024-05-14

c++
c++中string的compare函数怎么使用

在C++中，可以使用string的compare函数来比较两个string对象的大小。该函数的原型如下： int compare(c...

99+

2024-05-14

c++
c++中string的compare函数有什么用

c++中string的compare函数用于比较两个字符串的大小关系。该函数返回一个整数值，表示两个字符串的比较结果。具体来说，如...

99+

2024-05-14

c++
c++中print函数的功能有哪些

在C++中，通常使用std::cout来进行输出操作，而不是使用print函数。std::cout是C++标准库中的一个输出流对象，...

99+

2024-05-14

c++
c语言数据结构怎么使用

在C语言中，数据结构可以通过定义结构体来实现。以下是一些常见的数据结构的使用方法示例：链表： #include <std...

99+

2024-05-14

c语言
c++中print函数的用法是什么

在C++中没有内置的print函数，但可以使用cout来输出内容到控制台。cout是C++标准库中的一个输出流对象，可以使用<...

99+

2024-05-14

c++
c++中concept的用法是什么

在C++20中，Concept是一种新的语言特性，用于定义类型要求和约束。Concept可以被用来约束函数模板、类模板和普通函数的参...

99+

2024-05-14

c++
c++中concept的作用是什么

在C++中，concept的作用是定义一种通用的约束，用于限制模板参数的类型范围。通过使用concept，可以在编译时对模板参数进行...

99+

2024-05-14

c++