CSS3中的动画

最新推荐文章于 2022-12-30 08:54:13 发布
最新推荐文章于 2022-12-30 08:54:13 发布
阅读量903 收藏 32
点赞数 14
分类专栏： css 文章标签： 动画 动画的基本使用 元素使用动画 动画常用属性 动画简写属性
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenyiboke/article/details/103094377
版权

动画

动画（animation） 是css中具有颠覆性的特征之一，可以通过设置多个节点来精确控制一个，    或一组动画
常用来实现复杂的动画效果。
相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。
1. 动画的基本使用

制作动画分为两步：

  1. 先定义动画
  2. 再使用（调用）动画
用keyfames定义动画（类似定义类选择器）
            @keyframes 动画名称{
                0%{
                    width:100px;
                }
                100%{
                    width:200px;
                }
            }

动画基本使用命令：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 我们想页面一打开，一个盒子就从左边走到右边 */
        /* 1. 定义动画 */
        @keyframes move{
            /* 开始状态 */
            0%{
                transform: translateX(0px);
            }
            /* 结束状态 */
            100%{
                transform: translateX(1000px);
            }
        }
        div{
            width:200px;
            height: 200px;
            background-color: greenyellow;
            /* 2.调用动画 */
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 2s;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

网页显示图：

在这里插入图片描述

动画序列
1. 0%是动画的开始，100%是动画的完成。这样的规则就是动画序列。
2. 在@keyframes中规定某项CSS样式，就能创建由当前未央市住建改为新样式的动画效果。
3. 动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
4. 请用百分比来规定变化发生的时间，或用关键词“from”和“to”，等同于0%和100%。

动画序列命令：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* from 和 to 等价于 0% 和 100% */
        @keyframes move{
            from{
                transform: translate(0,0);
            }
            to{
                transform: translate(1000px,0);
            }
        }
        /* 动画序列 */
        div{
            width: 100px;
            height: 100px;
            background-color: greenyellow;
            animation-name: move;
            animation-duration: 2s;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

网页显示图：

在这里插入图片描述

动画序列案例命令：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 动画序列 */
        /* 1. 可以做多个状态的变化  keyframes 关键帧*/
        /* 2. 里面的百分比要是整数 */
        /* 3. 里面的百分比就是 总得时间（我们这个案例10s）的划分 */
        @keyframes move{
            0%{
                transform: translate(0,0);
            }
            25%{
                transform: translate(1000px,0);
            }
            50%{
                transform: translate(1000px,500px);
            }
            75%{
                transform: translate(0,500px);
            }
            100%{
                transform: translate(0,0);
            }
        }
        div{
            width: 100px;
            height: 100px;
            background-color: greenyellow;
            animation-name: move;
            animation-duration: 10s;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

网页显示图：

在这里插入图片描述

2. 元素使用动画
 div{
                width:200px;
                height:200px;
                background-color:aqua;
                margin:100px auto;
                /*调用动画*/
                animation-name：动画名称；
                /*持续时间*/
                animation-duration：持续时间；
            }
2. 动画常用属性
Document
属性 描述
@keyframes 规定动画。
animation所有动画属性的简写属性，除了animation-play-state属性。
animation-name 规定@keyframes动画的名称。（必须的）
animation-duration规定动画完成一个周期所花费的秒或毫秒，默认是0。（必须的）
animation-timing-function 规定动画的速度曲线，默认是“ease”
animation-delay规定动画何时开始，默认是0.
animation-iteration-count规定动画被播放的次数，默认是1， 还有infinite
animation-direction规定动画是否在下一周期逆向播放，默认是“normal”，alternate逆播放
animation-play-state 规定多那个计划是否正在运行或暂停。 默认是“running”，还有“pause”
animation-fill-mode规定动画结束后状态，保持forwards回到起始backwards

动画属性命令：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        @keyframes move {
            0%{
                transform: translate(0,0);
            }
            100%{
                transform: translate(1000px,0);
            }
        }
        div:hover{
            /* 鼠标经过div 让这个div 停止动画， 鼠标离开就继续动画 */
            animation-play-state: paused;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: greenyellow;
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 2s;
            /* 运动曲线 */
            animation-timing-function: ease;
            /* 何时开始 */
            animation-delay: 1s;
            /* 重复次数   iteration 重复的     count 次数    infinite  无限 */
            /* animation-iteration-count: infinite; */
            /* 是否反方向播放  默认的是 normal   如果想要反方向 就写  alternate*/
            /* animation-direction: alternate; */
            /* 动画结束后的状态 默认的是 backwards 回到起始状态 我们可以让它停留在结束状态  forwards */
            /* animation-fill-mode: forwards; */
            /* animation: name duration timing-function delay iteration-count direction fill-mode; */
            animation: move 2s linear 0s 1 alternate forwards;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

网页显示图：

在这里插入图片描述

3. 动画简写属性
animation ： 动画名称 持续时间  运动开始  播放次数  是否反方向  动画起始或者结束的状态；
animation: myfirst 5s linear   2s   infinite   alternate;


简写属性里面不包含 animation-play-state
暂停动画 ： animation-play-state: puased; 经过和鼠标经过等其他配合使用
想要动画走回来， 而不是直接跳回来： animation-direction  ：  alternate
盒子动画结束后，停在结束位置 ： animation-fill-mode ： forwards

动画简写属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        @keyframes move {
            0%{
                transform: translate(0,0);
            }
            100%{
                transform: translate(1000px,0);
            }
        }
        div:hover{
            /* 鼠标经过div 让这个div 停止动画， 鼠标离开就继续动画 */
            animation-play-state: paused;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: greenyellow;
            /* animation: name duration timing-function delay iteration-count direction fill-mode; */
            /* 前面2个属性 name  duration  一定要写 */
            animation: move 2s linear 0s 1 alternate forwards;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

网页显示图：

在这里插入图片描述

做一个地图热点图：

命令演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            background-color: #333;
        }
        .map{
            position: relative;
            width: 747px;
            height: 616px;
            background: url(images/map.png) no-repeat;
            margin: 0 auto;
        }

        .city{
            position: absolute;
            top: 227px;
            right: 193px;
            color: #fff;
        }
        .tb{
            top: 500px;
            right: 80px;
        }
        .gz{
            top: 532px;
            right: 171px;
        }
        .dotted{
            width: 8px;
            height: 8px;
            background-color: #09f;
            border-radius: 50%;
        }
        .city div[class^="pulse"] {
            /* 保证我们小波纹在父盒子里面水平垂直居中 放大之后就会中心向四周发散 */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 8px;
            height: 8px;
            box-shadow: 0 0 12px #009bfd;
            border-radius: 50%;
            animation: pulse 1s linear infinite;
        }
        .city div.pulse2{
            animation-delay: 0.4s;
        }
        .city div.pulse3{
            animation-delay: 0.6s;
        }
        @keyframes pulse{
            0%{}
            50%{
                /* transform: scale(5); 我们不要用scale 因为它会让阴影变大 */
                width: 30px;
                height: 30px;
                opacity: 1;
            }
            75%{
                width: 45px;
                height: 45px;
                opacity: 0.6;
            }
            100%{
                width: 60px;
                height: 60px;
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <div class="map">
        <div class="city">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
        <div class="city tb">
                <div class="dotted"></div>
                <div class="pulse1"></div>
                <div class="pulse2"></div>
                <div class="pulse3"></div>
            </div>
            <div class="city gz">
                    <div class="dotted"></div>
                    <div class="pulse1"></div>
                    <div class="pulse2"></div>
                    <div class="pulse3"></div>
                </div>
    </div>
</body>
</html>

网页显示图：

在这里插入图片描述

4. 速度曲线细节
animation-timing-function ： 规定动画的速度曲线，默认是“ease”
Document
值描述
linear 动画从头到尾的速度是相同的。匀速
ease默认。 动画以低速开始，然后加快，在结束前变慢。
ease-in动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
steps（）指定了时间函数中的间隔数量（步长）

速度曲线步长命令：

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            overflow: hidden;
            font-size: 40px;
            width: 0;
            height: 30px;
            background-color: greenyellow;
            /* 让我们的文字强制一行内显示 */
            white-space: nowrap;
            /* steps 就是分几步来完成我们的动画 有了steps 就不要再写 ease 或者 linear 了 */
            animation: w 4s steps(5) forwards;
        }
        @keyframes w{
            0%{
                width: 0;
                height: 50px;
            }
            100%{
                width: 200px;
                height: 50px;
            }
        }
    </style>
</head>
<body>
    <div>速度曲线步</div>
</body>
</html>

网页显示图：

在这里插入图片描述

辰逸博客
关注
  • 14
    点赞
  • 踩
  • 32
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
CSS3之动画
Pursuit53的博客
03-04 124
我们平常能见到好多炫酷的动态效果，大部分都能用CSS3动画写出来。
CSS3评分分段进度条代码
04-06
CSS3评分分段进度条代码是一款基于js跟css3属性制作的商品点评打分五种分段进度条ui交互特效。
CSS3多种不同颜色进度条特效代码
03-20
CSS3多种不同颜色进度条是一款线条状的CSS3进度条，这款进度条有两个特点：一是随着进度条的进度更新，都会有数字百分比实时显示，让数据更加直观；二是在不同的进度阶段，进度条的颜色会有所变化，这样能更好的反应当前的进度状态。加上黑色的背景，让这款CS
css动画实现鼠标放上去切换多种颜色
ddf__的博客
12-30 289
实现这个非常简单只需要css的keyframes和hover属性。
怎样用css设置横向的滚动条,如何用CSS设置滚动条颜色？
weixin_39863008的博客
08-04 568
我们在浏览网页的时候有时可以看到网页滚动条颜色不是系统默认的样式，而是漂亮的红色或其它颜色样式，其实这就是在网页代码之间加入代码来实现的，具体是哪些代码呢？页面滚动条代码及其解释如下：scrollbar-3d-light-color设置或检索滚动条亮边框颜色scrollbar-highlight-color设置或检索滚动条3D界面的亮边(ThreedHighlight)颜色scrollbar-...
超简单CSS3水平动态进度条+小圆球+背景色渐变
weixin_30699463的博客
09-01 598
实现的的效果图如下：效果是动态加载的 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
css3加载动画
04-27
在CSS3中，我们可以使用`border-radius`属性创建圆角，配合`transform`属性中的`rotate()`来实现旋转效果。通过调整边框宽度和颜色，可以创建出齿轮的立体感。 4. `animation`属性：要让齿轮动起来，我们需要将`@...
css3 加载动画
09-14
在现代网页设计中，CSS3加载动画已经成为提升用户体验的重要元素，它们在页面内容加载时提供视觉反馈，使得用户知道网站正在工作并等待响应。CSS3加载动画利用了CSS3的新特性，如转换（Transitions）、动画...
CSS3实现swap交换动画
09-24
主要为大家介绍了CSS3实现swap动画，实现一个交换动画，一个笑脸慢慢从远处，回到自己的原来位置的一种效果，这种动画在JS里面也是很多见的，感兴趣的小伙伴们可以参考一下
css3动画效果抖动解决方法
09-22
主要介绍了css3动画效果抖动解决方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
纯CSS3创意气泡动画特效
07-24
首先，我们要理解CSS3中的关键帧动画。关键帧动画是通过定义动画在不同时间点的状态来创建平滑过渡的一种方法。`@keyframes`规则是实现这一功能的核心，它允许开发者定义一个动画的开始和结束状态，以及中间的任意...
css 竖行进度图_css实现横向与竖向进度条效果的方法_WEB前端开发,css,进度条
weixin_35797963的博客
02-01 399
js如何创建不可变的对象_WEB前端开发js创建不可变的对象的方法是：1、Object.preventExtensions()方法；2、Object.seal()方法；3、Object.freeze()方法。 1、横向进度条的实现代码横向进度条.loadbar{width:200px;height:25px;background-color:#fff;border:1px solid #ccc;}...
22、一个分段分颜色的进度条组件
qq_44035882的博客
08-30 400
一个分段分颜色的进度条组件
css3进度条颜色,CSS_可以随进度显示不同颜色的css3进度条分享，一款进度条，它的外观是一条 - phpStudy...
weixin_34649252的博客
08-03 432
可以随进度显示不同颜色的css3进度条分享一款进度条，它的外观是一条直线，末端有个小球，在进度变化时可以显示数字百分比，更可以用不同颜色来表示当前进度的状态。来看看效果图。接下来我们来分析一下这款HTML5进度条的实现源码，篇幅有限，我们只挑核心的代码来说。HTML代码很简单，构造一个进度条容器和数字百分比容器：复制代码代码如下:0首先我们来对进度条的容器进行样式渲染，利用CSS3的渐变属性来实现...
纯css实现进度条效果
weixin_30599769的博客
03-11 688
　　去年7月份做一个公司商城的微信页面（微信用的chrome内核）需要写一个提示返现进度的进度条效果。 　　一个完整的进度条效果其实可以拆分一下： 　　　　一段背景； 　　　　一小段的静态的斜纹进度条； 　　　　斜纹进度条用线性渐变linear-gradient 类实现，原理很好理解，2个参数： 　　　　　　1、角度； 　　　　　　2、关键点（包含2个参数，1是颜色，2是长度位置） ...
html动态进度条代码_进度条滚动效果Css3
weixin_30277297的博客
01-20 1904
效果：Css3实现进度条展示效果https://www.zhihu.com/video/1184507155678535680关键字：linear-gradient第一步：需要给一个div的框框<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <titl...
css改变滚动条的颜色-横向滚动demo效果示例（整理）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
11-03 9721
&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;改变滚动条的颜色&lt;/title&gt; &lt;style&gt; .inner{ width: 265px; height: 400px; position: absolute; top: 33px; left: 13px; /*cur........
制作 携程网移动端首页
chenyiboke的博客
11-21 4147
1. 技术选型 方案： 我们采取单独制作移动页面方案 技术： 布局采取flex布局 2. 设置视口标签以及引入初始化样式 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale...
css3中动画的使用举例
最新发布
05-02
好的，关于css3中动画的使用举例，我可以为您提供一个简单的示例。比如：假设您想要在网站上添加一个闪烁的效果，可以使用以下代码实现： ``` /* 定义闪烁的关键帧动画 */ @keyframes blink { 0% { opacity: 1; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

辰逸博客

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值