HTML+CSS之过度,变形,动画(14个案例+代码+效果图)

已于 2024-10-07 20:07:00 修改
阅读量3.1k 收藏 25
点赞数 26
分类专栏： 前端html+css知识梳理 文章标签： html css 前端 css3 web vscode
于 2024-10-05 21:45:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_76862031/article/details/142718500
版权

目录

过渡 (Transitions)

transition-property：

案例:鼠标悬浮方逐渐放大

1.代码

2.效果

transition-duration：

案例:鼠标悬停逐渐慢慢放大

1.代码

2.效果

transition-timing-function：

案例:放大速度为ease-out

1.代码

2.效果

transition-delay：

案例:延迟一秒放大

1.代码

2.效果

变换 (Transforms)

平移 (translate)：

案例:移动到指定位置

1.代码

2.效果

缩放 (scale)：

案例:使用scale放大图片

1.代码

2.效果

倾斜 (skew)：

案例:图片倾斜45

1.代码

2.效果

旋转 (rotate)：

案例:图片旋转45

1.代码

2.效果

围绕X轴旋转 (rotateX())：

案例:图片围绕x轴旋转45

1.代码

2.效果

围绕Y轴旋转 (rotateY())：

案例:图片围绕Y轴旋转45

1.代码

2.效果

围绕Z轴旋转 (rotateZ())：

案例:图片围绕Z轴旋转45

1.代码

2.效果

围绕X轴平移 (translateX(x))：

案例:图片围绕X轴平移

1.代码

2.效果

围绕Y轴平移 (translateY(y))：

案例:图片围绕Y轴平移

1.代码

2.效果

关键帧动画 (@keyframes 和 Animations)

@keyframes 规则：

animation-name：

animation-duration：

animation-timing-function：

animation-delay：

animation-iteration-count：

animation-direction：

案例:制作一个闪烁放大的效果动画

1.代码

2.效果

过渡 (Transitions)

过渡是CSS中用来平滑地从一种样式变到另一种样式的动画效果。它们通常在用户交互（如鼠标悬停）时触发。

  1. transition-property：

    • 指定哪些CSS属性应该具有过渡效果。
    • 值可以是具体的属性名（例如width、color）、多个属性用逗号分隔，或者使用all来表示所有属性。
    • 示例：transition-property: width, heigh

案例:鼠标悬浮方逐渐放大

1.代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标悬浮方逐渐放大</title>

    <style>
        .myDivStyle{
            background: url("aImg.png");
            width: 200px;
            height: 200px;
            background-size: cover;
        }
        .myDivStyle:hover{
            
            width: 400px;
            height: 400px;
            /**
             * 渐变 放大
             */
            transition-property: width,height;
        }
    </style>
</head>
<body>
    <div class="myDivStyle" ></div>
    
</body>
</html>

2.效果

  1. transition-duration：

    • 定义过渡完成所需的时间。
    • 可以设置为秒(s)或毫秒(ms)。
    • 示例：transition-duration: 0.5s;

案例:鼠标悬停逐渐慢慢放大

1.代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标悬浮方逐渐放大</title>

    <style>
        .myDivStyle{
            background: url("aImg.png");
            width: 200px;
            height: 200px;
            background-size: cover;
        }
        .myDivStyle:hover{
            
            width: 400px;
            height: 400px;
            /**
             * 渐变 放大
             */
            transition-property: width,height;
            transition-duration: 8s;
        }
    </style>
</head>
<body>
    <div class="myDivStyle" ></div>
    
</body>
</html>

2.效果

  1. transition-timing-function：

    • 控制过渡的速度曲线。
    • 常见值包括ease（默认），linear，ease-in，ease-out，ease-in-out，以及自定义的贝塞尔曲线cubic-bezier(n,n,n,n)。
    • 示例：transition-timing-function: ease-in-out;

案例:放大速度为ease-out

1.代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>放大速度为ease-out</title>

    <style>
        .myDivStyle{
            background: url("aImg.png");
            width: 200px;
            height: 200px;
            background-size: cover;
        }
        .myDivStyle:hover{
            
            width: 400px;
            height: 400px;
            /**
             * 渐变 放大
             */
            transition-property: width,height;
            /**
              * 持续时间
              */
            transition-duration: 8s;
            /**
            *线性动画
            */
            transition-timing-function: ease-out;
        }
    </style>
</head>
<body>
    <div class="myDivStyle" ></div>
    
</body>
</html>

2.效果

原始状态

放大状态

  1. transition-delay：

    • 设置过渡开始前的延迟时间。
    • 可以是正数（延迟开始）或负数（提前开始）。
    • 示例：transition-delay: 0.2s;

案例:延迟一秒放大

1.代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>放大速度为ease-out</title>

    <style>
        .myDivStyle{
            background: url("aImg.png");
            width: 200px;
            height: 200px;
            background-size: cover;
        }
        .myDivStyle:hover{
            
            width: 400px;
            height: 400px;
            /**
             * 渐变 放大
             */
            transition-property: width,height;
            /**
              * 持续时间
              */
            transition-duration: 8s;
            /**
            *线性动画
            */
            transition-timing-function: ease-out;
            /**
            * 延迟1s
            */
            transition-delay: 1s;
           
        }
    </style>
</head>
<body>
    <div class="myDivStyle" ></div>
    
</body>
</html>

2.效果

原始状态

鼠标悬浮延迟1s后会慢慢放大 

变换 (Transforms)

变换允许你改变元素的形状、大小和位置。

  1. 平移 (translate)：

    • transform: translate(x, y); 在X轴和Y轴上移动元素。
    • 示例：transform: translate(50px, 100px);

案例:移动到指定位置

1.代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>平移到指定位置</title>
    <style>
        .myDivStyle{
            background: url("aImg.png");
            width: 200px;
            height: 200px;
            background-size: cover;
            border: 2px solid rgb(18, 197, 197);
        }
        .myDivStyle:hover{
            
            transform: translate(300px,300px);
            transition-property: transform;
            transition-duration: 8s;
            
        }
    </style>

</head>
<body>
    <div class="myDivStyle"></div>
</body>
</html>

2.效果

  1. 缩放 (scale)：

    • transform: scale(x, [y]); 放大或缩小元素。
    • 如果只提供一个参数，则X轴和Y轴将被相同地放大/缩小。
    • 示例：transform: scale(1.5, 0.8);

案例:使用scale放大图片

1.代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用scale放大图片</title>
    <style>
        .myDivStyle {
            background: url("aImg.png");
            width: 200px;
            height: 200px;
            background-size: cover;
            border: 2px solid rgb(18, 197, 197);
        }

        .myDivStyle:hover {
            transform: scale(5);
            transition-property: transform;
            transition-duration: 8s;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
    </style>
</head>
<body>
    <div class="myDivStyle"></div>
</body>
</html>

2.效果

  1. 倾斜 (skew)：

    • transform: skew(x-angle, [y-angle]); 让元素沿X轴和/或Y轴倾斜。
    • 示例：transform: skew(20deg, 10deg);

案例:图片倾斜45

1.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片倾斜45</title>
    <style>
        .myDivStyle {
            background: url("aImg.png");
            width: 200px;
            height: 200px;
            background-size: cover;
            border: 2px solid rgb(18, 197, 197);
        }

        .myDivStyle:hover {
            transform: skew(45deg);
            transition-property: transform;
            transition-duration: 8s;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
    </style>
</head>
<body>
    <div class="myDivStyle"></div>
</body>
</html>

2.效果

  1. 旋转 (rotate)：

    • transform: rotate(a); 绕Z轴旋转元素a度。
    • 示例：transform: rotate(45deg);

案例:图片旋转45

1.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片旋转45</title>
    <style>
        .myDivStyle {
            background: url("aImg.png");
            width: 200px;
            height: 200px;
            background-size: cover;
            border: 2px solid rgb(18, 197, 197);
        }

        .myDivStyle:hover {
            transform: rotate(45deg);
            transition-property: transform;
            transition-duration: 8s;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
    </style>
</head>
<body>
    <div class="myDivStyle"></div>
</body>
</html>

2.效果

  1. 围绕X轴旋转 (rotateX())：

    • transform: rotateX(angle); 绕X轴旋转。
    • 示例：transform: rotateX(30deg);

案例:图片围绕x轴旋转45

1.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片围绕x轴旋转45
    </title>
    <style>
        .myDivStyle {
            background: url("aImg.png");
            width: 200px;
            height: 200px;
            background-size: cover;
            border: 2px solid rgb(18, 197, 197);
        }

        .myDivStyle:hover {
            transform: rotateX(45deg);
            transition-property: transform;
            transition-duration: 8s;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
    </style>
</head>
<body>
    <div class="myDivStyle"></div>
</body>
</html>

2.效果

  1. 围绕Y轴旋转 (rotateY())：

    • transform: rotateY(angle); 绕Y轴旋转。
    • 示例：transform: rotateY(30deg);

案例:图片围绕Y轴旋转45

1.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片围绕y轴旋转45
    </title>
    <style>
        .myDivStyle {
            background: url("aImg.png");
            width: 200px;
            height: 200px;
            background-size: cover;
            border: 2px solid rgb(18, 197, 197);
        }

        .myDivStyle:hover {
            transform: rotateY(45deg);
            transition-property: transform;
            transition-duration: 8s;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
    </style>
</head>
<body>
    <div class="myDivStyle"></div>
</body>
</html>

2.效果

  1. 围绕Z轴旋转 (rotateZ())：

    • transform: rotateZ(angle); 绕Z轴旋转，与rotate()相同。
    • 示例：transform: rotateZ(30deg);

案例:图片围绕Z轴旋转45

1.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片围绕z轴旋转45
    </title>
    <style>
        .myDivStyle {
            background: url("aImg.png");
            width: 200px;
            height: 200px;
            background-size: cover;
            border: 2px solid rgb(18, 197, 197);
        }

        .myDivStyle:hover {
            transform: rotateZ(45deg);
            transition-property: transform;
            transition-duration: 8s;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
    </style>
</head>
<body>
    <div class="myDivStyle"></div>
</body>
</html>

2.效果

  1. 围绕X轴平移 (translateX(x))：

    • transform: translateX(x); 仅沿X轴平移。
    • 示例：transform: translateX(50px);

案例:图片围绕X轴平移

1.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片围绕X轴平移45
    </title>
    <style>
        .myDivStyle {
            background: url("aImg.png");
            width: 200px;
            height: 200px;
            background-size: cover;
            border: 2px solid rgb(18, 197, 197);
        }

        .myDivStyle:hover {
            transform: translateX(200px);
            transition-property: transform;
            transition-duration: 8s;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
    </style>
</head>
<body>
    <div class="myDivStyle"></div>
</body>
</html>

2.效果

  1. 围绕Y轴平移 (translateY(y))：

    • transform: translateY(y); 仅沿Y轴平移。
    • 示例：transform: translateY(100px);

案例:图片围绕Y轴平移

1.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片围绕X轴平移200px
    </title>
    <style>
        .myDivStyle {
            background: url("aImg.png");
            width: 200px;
            height: 200px;
            background-size: cover;
            border: 2px solid rgb(18, 197, 197);
        }

        .myDivStyle:hover {
            transform: translateY(200px);
            transition-property: transform;
            transition-duration: 8s;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
    </style>
</head>
<body>
    <div class="myDivStyle"></div>
</body>
</html>

2.效果

关键帧动画 (@keyframes 和 Animations)

关键帧动画允许你创建复杂的动画序列。

  1. @keyframes 规则：

    • 定义动画的关键帧，即动画过程中特定点的样式规则。

  2. animation-name：

    • 引用由@keyframes定义的动画名称。
    • 示例：animation-name: fadeIn;

  3. animation-duration：

    • 设置动画完成一个周期所需的时间长度。
    • 示例：animation-duration: 2s;

  4. animation-timing-function：

    • 类似于过渡中的transition-timing-function，定义了动画的速度曲线。
    • 示例：animation-timing-function: ease;

  5. animation-delay：

    • 设置动画开始前的等待时间。
    • 示例：animation-delay: 1s;

  6. animation-iteration-count：

    • 确定动画应该播放多少次。
    • 可以是一个具体的次数（如2），或者无限循环（infinite）。
    • 示例：animation-iteration-count: infinite;

  7. animation-direction：

    • 控制动画是否反向运行。
    • 可能的值包括normal（默认，每次迭代从头到尾正常播放）、reverse（反向播放）、alternate（第一次正向，第二次反向，如此交替）及alternate-reverse（首次反向，随后交替）。
    • 示例：animation-direction: alternate;

案例:制作一个闪烁放大的效果动画

1.代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>制作一个闪烁放大的效果动画</title>
    <style>
        .myDivStyle {
            background: url("./aImg.png");
            width: 200px;
            height: 200px;
            background-size: cover;
            border: 2px solid rgb(18, 197, 197);
            display: flex;
            justify-content: center;
            align-items: center;

            /**
            *动画名字
            */
            animation: myDivAnimation;
            /**
            * 动画持续时间
            */
            animation-duration: 2s;
            /**
            * 动画播放次数（无限播放）
            */
            animation-iteration-count: infinite;
            /**
            * 动画播放方式 ease-in-out
            */
            animation-timing-function: ease-in-out;
            /**
            * 动画延迟时间
            */
            animation-delay: 0.1s;
        }

        /**
        * 动画
        */
        @keyframes myDivAnimation{
            0%{
                transform: scale(1);
                opacity: 1;

            }
            50%{
                transform: scale(2);
                opacity: 0.2;
            }
            100%{
                transform: scale(1);
                opacity: 1;
            }
        }
    </style>
</head>

<body style="display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;">


    <div class="myDivStyle"></div>

</body>

</html>

2.效果

这个效果是放大缩小在放大会闪烁一下

附录

        素材下载

 aMouse.png等2个文件官方版下载丨最新版下载丨绿色版下载丨APP下载-123云盘

【HTML5】Web前端——第六课：CSS3 的变形属性、过渡属性、动画属性、多列属性
王迪
12-02 2519
知识点：CSS3 的 2D 变形属性、 3D 变形属性、过渡属性、动画属性、多列属性 先导知识：【HTML5】Web前端——第五课：CSS3新增背景属性、文本属性、盒模型属性、2D变形属性 CSS3 在原来的基础上增加了变形和动画相关属性，通过这些属性，以前需要用 JavaScript 才能实现的功能，现在可以很轻松地实现。CSS3 的变形功能可以对元素进行位移、旋转、缩放、倾斜 4 种几何变换的操作；CSS3 的动画功能则是和位移、旋转、缩放、倾斜 4 种几何变换操作相结合，从而产生平滑的动画..
CSS过渡，转换与动画
qi_bai_jin的博客
10-04 4235
过渡，转换与动画的熟练应用能够将页面实现很好的效果，给用户一个更棒的体验，本文主要讲了过渡，转换与动画的基础，并涵盖了部分实战题目供大家练习，希望对大家有所帮助。
html+css加载动画效果
xdkprosperous的博客
07-14 387
实现加载动画效果，纯html+css代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;"> <title>CSS3实现加载的动画效果1</title> <meta nam...
css2D、3D详解
weixin_69474694的博客
07-15 616
css2D、3D详解
CSS——变换、过度与动画
最新发布
dangfulin的博客
03-28 1033
巧妙的使用变换、过度与动画可以让页面设计更有趣、更吸引人，同时还能提高可用性和感知性能。通过修改坐标空间，CSS变换可以改变受影响内容的形状和位置——在平面和 3D 空间中的旋转、倾斜、缩放和平移，而不会破坏正常的文档流。CSS2D Transform表示2D变换，目前获得了各主流浏览器的支持，但是CSS3D Transform支持程度不是很完善，仅能够在部分浏览器中获得支持。在 CSS（和大部分的计算机图形学）中，原点 (0, 0) 在元素的左上角。每个点都使用数学上的向量符号 (x,y) 来描述。 函
「HTML+CSS」--自定义加载动画【006】
海到无边天作岸 山登绝顶我为峰
04-05 2018
前言 Hello！小伙伴！ 首先非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～ 哈哈 自我介绍一下 昵称：海轰 标签：程序猿一只｜C++选手｜学生 简介：因C语言结识编程，随后转入计算机专业，有幸拿过国奖、省奖等，已保研。目前正在学习C++/Linux（真的真的太难了～） 学习经验：扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语！ 日常分享：微信公众号【海轰Pro】记录生活、学习点滴，分享一些源代码或者学习资料，欢迎关注～ 效果展示 Demo代码 HTML <!DO
「HTML+CSS」--自定义加载动画【027】
海到无边天作岸 山登绝顶我为峰
04-21 4128
前言 Hello！小伙伴！ 首先非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～ 哈哈 自我介绍一下 昵称：海轰 标签：程序猿一只｜C++选手｜学生 简介：因C语言结识编程，随后转入计算机专业，有幸拿过国奖、省奖等，已保研。目前正在学习C++/Linux（真的真的太难了～） 学习经验：扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语！ 日常分享：微信公众号【海轰Pro】记录生活、学习点滴，分享一些源代码或者学习资料，欢迎关注～ 效果展示 思路 Demo代码 HTML <
CSS3热身实战--过渡与动画（实现炫酷下拉，手风琴，无缝滚动）
weixin_34258838的博客
08-01 605
1.前言 在自己的专栏上写了十几篇文章了，都是与js有关的。暂时还没有写过关于css3的文章。css3，给我的感觉就是，不难，但是很难玩转自如。今天，就用css3来实现三个特效，希望这三个特殊能让大家受到启发，利用css3做出更好，更炫的动画效果，并且对比这三个特效和JS特效的对比，希望能帮助到是大家学到CSS3的一些知识。今天这三个案例...
精妙无比 8款HTML5动画实例及源码
yanyiping992的博客
03-13 1165
新的一周开始了，我们分享HTML5和CSS3的工作也将继续前行。今天要给大家带来8款精妙无比的HTML5动画实例，每一个动画演示都有源代码提供下载，非常方便大家学习HTML5的相关知识，一起来看看吧。1、基于HTML5 Canvas的图表插件Chart.jschart.js是一款基于HTML5 Canvas的图表插件，chart.js的功能非常强大，它不仅提供了常见的柱形图、折线图、饼状图，而且还...
HTML CSS 动画 实现图片过渡与变换（图片不超过边框范围局部放大）
m0_51393229的博客
11-25 2798
实例:实现图片方形变圆形,放大,倾斜,变黑白 效果: HTML CSS 代码实现: <html> <head> <title>过渡与变形</title> <style type="text/css"> body{ background-color:#000000; /* line-height:10px;*/ } .word{ font-family:'Times New Roman'; font
网页布局与设计必备：css3.0+html5中文api
- **变形与动画**：变形（transform）和过渡（transition）增强了元素的变换和动态效果的实现。 - **多列布局**：提供了多列布局的支持，可以很轻易地实现杂志风格的布局。 - **弹性盒子模型（Flexbox）**：允许...
30+前端炫酷特效与插件案例集锦，代码实现分享
在本篇中，将详细解析所给文件信息中提及的前端开发相关的知识点，主要包括前端案例、插件以及炫酷特效代码的相关技术点。 ### 知识点概述 #### 1. HTML5 HTML5是第五代超文本标记语言，旨在取代之前的HTML4版本。...
html+css 动画效果
04-11
html+css 实现动画效果，包括渐变、旋转、翻转、显示隐藏等.
css过度
weixin_43786904的博客
07-06 302
过度Transition 1.什么是过度 使用css的属性值在一段时间内***平滑***的过度 比如，鼠标悬停后，背景色在1s内，由白色平滑的过度到红色。必须有触发事件 ：hover （1）指定四个要素 过度属性 如background、color等 过度所需时间 过度函数，即过度的速度、方式等 过度延迟时间，表示开始执行的时间 ...
CSS3过渡、过渡练习——进度条案例、2D转换(translate、rotate、scale、转换中心点transform-origin)、动画、3D、案例（两面翻转的盒子、3D导航栏、旋转木马案例）
weixin_70320000的博客
02-16 2716
CSS3过渡、过渡练习——进度条案例、2D转换(translate、rotate、scale、转换中心点transform-origin)、动画、3D、案例（两面翻转的盒子、3D导航栏、旋转木马案例）
使用HTML+css制作简易动画
fffffcc的博客
06-01 705
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title></title> <style type="text/css"> @keyframes mymovie{ 0%{ left:0px; top:0px; } 20%{ left:200px; top:0px; } 70%{
2021-05-28
qq_47245981的博客
05-28 184
什么是 CSS 动画？ 动画使元素逐渐从一种样式变为另一种样式。 可以随意更改任意数量的 CSS 属性。 如需使用 CSS 动画，必须首先为动画指定一些关键帧。 关键帧包含元素在特定时间所拥有的样式。 @keyframes 规则 如果在@keyframes规则中指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式。 要使动画生效，必须将动画绑定到某个元素。 animation-name：动画在@keyframes中的名字 例如：@keyframes name{ fr...
HTML中的过渡和动画
l12345666777的博客
11-01 2381
animation-iteration-count 设置动画迭代次数 number infinite(无限循环)需要告诉系统哪一个元素需要动画 动画持续时间。transition-timing-function 设置过渡速度曲线。animation-timing-function 设置动画速度曲线。animation-duration 设置动画持续时间。transition-duration 设置过渡持续时间。animation-delay 设置动画等待时长。animation-name 设置动画名称。
纯HTML+CSS实现动画
cnds123的专栏
06-11 2497
这是从网上收集来的纯HTML+CSS实现的几个网页动画，生动形象，比较有参考价值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值