跟着pink老师前端入门教程-day17

news2024/11/24 1:37:38

2、CSS3 动画

动画(animation)是CSS3中就要有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果

相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果

2.1 动画的基本使用

制作动画分为两步

1. 先定义动画

2. 再使用(调用)动画

1.1 用keyframes定义动画(类似定义类选择器)
@keyframes 动画名称 {
        0%{
                width:100px;
        }
        100%{
                width:200px;
        }
}
1.2 元素调用动画
div {
        width: 200px;
        height: 200px;
        background-color: aqua;
        margin: 100px auto;
        /* 调用动画 */
        animation-name: 动画名称 ;
        /* 持续时间 */
        animation-duration: 持续时间 ;
}
    <title>用keyframes 定义动画</title>
    <style>
        /* 想页面一打开,一个盒子就从左边走到右边 */
        /* 1. 定义动画 */
        @keyframes move {

            /* 开始状态 */
            0% {
                transform: translateX(px);
            }

            /* 结束状态 */
            100% {
                transform: translateX(1000px);
            }
        }

        div {
            width: 200px;
            height: 200px;
            background-color: saddlebrown;
            /* 2.调用动画 */
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 2s;
        }
    </style>
</head>

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

动画序列

0% 是动画的开始,100% 是动画的完成。这样的规则就是动画序列。

@keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。

动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数

请用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 100%

    <style>
        /* from 和 to 等价于0% 和100%  */
        @keyframes move {
            from {
                transform: translate(0, 0);
            }

            to {
                transform: translate(1000px, 0);
            }
        }

        div {
            width: 100px;
            height: 100px;
            background-color: salmon;
        }
    </style>
</head>

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

HTML

    <title>动画序列</title>
    <style>
        /* 1、可以做多个状态的变化,keyframe关键词 */
        /* 里面的百分比不能是整数 */
        @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: salmon;
            animation: move;
            animation-duration: 10s;
        }
    </style>
</head>

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

效果图

2.2 动画常用属性

    <title>动画常用属性</title>
    <style>
        @keyframes move {
            0% {
                transform: translate(0, 0);
            }

            100% {
                /* 2.5s时走在这里 */
                transform: translate(1000px, 0);
            }
        }

        div {
            width: 200px;
            height: 200px;
            background-color: sandybrown;
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 2s;
            /* 运动曲线 */
            animation-timing-function: ease-in;
            /* 何时开始 */
            animation-delay: 0s;
            /* 重复次数:infinite无限 */
            /* animation-iteration-count: infinite; */
            /* 是否反方向播放,默认normal alternate:反方向*/
            /* animation-direction: alternate; */
            /* 动画结束后状态 默认的是backwards 回到起始状态 可以让他停在结束状态-forward */
            animation-fill-mode: forwards;
        }
        /* 鼠标经过div 让div停止动画,鼠标离开后就继续动画 */
        div:hover {
            /* 规定动画是否正在运行或暂停。默认是"running",还有"paused" */
            animation-play-state: paused;
        }
    </style>
</head>

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

2.3 动画简写属性

animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;

简写属性里面不包含 animation-play-state

暂停动画:animation-play-state: puased; 经常和鼠标经过等其他配合使用

想要动画走回来 ,而不是直接跳回来:animation-direction : alternate

盒子动画结束后,停在结束位置: animation-fill-mode : forwards

    <title>动画简写属性</title>
    <style>
        @keyframes move {
            0% {
                transform: translate(0, 0);
            }

            100% {
                /* 2.5s时走在这里 */
                transform: translate(1000px, 0);
            }
        }

        /* animation:动画名称 持续时间 运动曲线 
                      何时开始 播放次数 是否反方向 
                      动画起始或者结束的状态; */
        div {
            width: 200px;
            height: 200px;
            background-color: sandybrown;
            /* linear匀速 */
            /* animation: move 2s linear 0s 1 alternate forwards; */
            /* 前两个属性 name duration 必写 */
        }
    </style>
</head>

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

2.4 速度曲线细节

animation-timing-function:规定动画的速度曲线,默认是“ease

    <title>速度曲线细节</title>
    <style>
        div {
            /* 打字机 */
            font-size: 20px;
            width: 0;
            height: 30px;
            overflow: hidden;
            /* 让文字强制一行显示 */
            white-space: nowrap;
            background-color: saddlebrown;
            /* steps 就是分几步来完成动画,有了steps 就不用写ease或者linear */
            animation: w 4s steps(10) forwards;
        }

        @keyframes w {
            0% {
                width: 0;
            }

            100% {
                width: 200px;
            }
        }
    </style>
</head>

<body>
    <div>你好呀,我最好的朋友</div>
</body>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1431845.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Python3 交叉编译 numpy pandas scipy scikit-learn

1. 概述 由于需要将Python3.7 和一些软件包交叉编译到 armv7 平台硬件&#xff0c;如果是arm64位的系统&#xff0c;很多包都有预编译好的版本&#xff0c;可直接下载。本文主要在基于 crossenv(https://github.com/benfogle/crossenv)环境下交叉编译。 2. 编译环境搭建 创建…

处理SERVLET中的错误

处理SERVLET中的错误 问题陈述 一位用户在使用在线计算机应用程序时输入一个非数字字符做数字加法。servlet试图将用户输入的值转换成整数型时,引发了NumberFormException类型的异常。要创建一个Web应用程序来使用自定义错误页面处理该异常。该自定义错误页面需要向用户提供关…

【原创】点火线圈项目

一、项目介绍 此点火线圈项目主要实现对各部件的自动组装、测试、以及下料。 二、各个工位实现动作流程 1、合装移载位,这个工位通过伺服电机和气缸夹爪把上游设备加工的点火线圈插头移载到合装位。 通过伺服设置抓料位置(绝对定位)伺服电机到了抓料位后伸出气缸伸出,夹…

acwing869. 试除法求约数870. 约数个数AcWing871. 约数之和872. 最大公约数

869. 试除法求约数 思路&#xff1a; 约数和质数的求解有着共性&#xff0c; 就是都是使用 for (int i 1; i < n/i; i) 进行计算的。这样的原因是因为约数必然也是两两一组&#xff0c; 那么我们求出小的自然也就知道另一个&#xff0c;只要再判断一下n/i和i是否相同&a…

Qt PCL学习(一):环境搭建

参考 (QT配置pcl)PCL1.12.1QT5.15.2vs2019cmake3.22.4vtk9.1.0visual studio2019Qt5.15.2PCL1.12.1vtk9.1.0cmake3.22.2 本博客用到的所有资源 版本一览&#xff1a;Visual Studio 2019 Qt 5.15.2 PCL 1.12.1 VTK 9.1.0https://pan.baidu.com/s/1xW7xCdR5QzgS1_d1NeIZpQ?pw…

队列---数据结构

定义 队列&#xff08;Queue&#xff09;简称队&#xff0c;也是一种操作受限的线性表&#xff0c;只允许在表的一端进行插入&#xff0c;而在表的另一端进行删除。向队列中插入元素称为入队或进队&#xff1b;删除元素称为出队或离队。 队头&#xff08;Front&#xff09;&a…

小米平板6获取root权限教程

1. 绑定账号 1> 打开"设置-我的设备-全部参数-连续点击MIUI版本按钮"&#xff0c;直到提示已打开开发者模式( p s : 这里需要重点关注红框平板型号和 M I U I 版本&#xff0c;例如我这里平板型号是 X i a o m i P a d 6 &#xff0c; M I U I 版本是 14.0.10 &am…

3 编辑器(Vim)

1.完成 vimtutor。备注&#xff1a;它在一个 80x24&#xff08;80 列&#xff0c;24 行&#xff09; 终端窗口看起来效果最好。 2.下载我们提供的 vimrc&#xff0c;然后把它保存到 ~/.vimrc。 通读这个注释详细的文件 &#xff08;用 Vim!&#xff09;&#xff0c; 然后观察 …

MySQL数据库①_MySQL入门(概念+使用)

目录 1. 数据库的概念 1.1 数据库的存储介质 1.2 主流数据库 2. MySQL的基本使用 2.1 链接数据库 2.2 服务器管理 2.3 数据库&#xff0c;服务器和表关系 2.4 简单MySQL语句 3. MySQL架构 4. SQL分类 5. 存储引擎 本篇完。 1. 数据库的概念 数据库是按照数据结构来…

智能决策的艺术:探索商业分析的最佳工具和方法

文章目录 一、引言二、商业分析思维概述三、数据分析在商业实践中的应用四、如何培养商业分析思维与实践能力五、结论《商业分析思维与实践&#xff1a;用数据分析解决商业问题》亮点内容简介作者简介目录获取方式 一、引言 随着大数据时代的来临&#xff0c;商业分析思维与实…

Cox等级资料是个坑

R语言做&#xff01;初学者先进来看看&#xff01;&#xff01;&#xff01; SCI冲 COX多因素模型需要满足的条件&#xff1a; 1.各观测值间相互独立&#xff0c;即残差之间不存在自相关&#xff1b; 2.因变量和自变量之间存在线性关系&#xff1b; 3.残差的方差齐&#xf…

蓝桥杯备战——12.超声波与测频代码优化

1.优化分析 昨天我在看原理图的发现超声波模块的反馈引脚P11刚好可以使用PCA模块0的捕获功能&#xff0c;我就想着把PCA功能留给超声波&#xff0c;然后测频功能还是改成定时器0来完成&#xff0c;然后前后台功能改成定时器1。 至于我为什么要这么改呢&#xff0c;看一下我原…

【2024美赛】C题 Problem C: Momentum in Tennis网球运动中的势头 网球问题一python代码

相关链接 &#xff08;1&#xff09;问题分析 &#xff08;2&#xff09;26页论文 1 题目 http://t.csdnimg.cn/BzhFu 2 问题一数学模型 采用隐马尔可夫模型&#xff08;Markov Model&#xff09;&#xff0c;这是一种描述随机过程的数学模型&#xff0c;它满足马尔可夫性…

Powershell Install 一键部署Prometheus

前言 Prometheus是一个开源的系统监控和报警系统,现在已经加入到CNCF基金会,成为继k8s之后第二个在CNCF托管的项目,在kubernetes容器管理系统中,通常会搭配prometheus进行监控,同时也支持多种exporter采集数据,还支持pushgateway进行数据上报,Prometheus性能足够支撑上…

redis 6.x集群搭建

redis6集群搭建 安装文件下载 redis-6.2.6.tar.gz 编译 tar -zxvf redis-6.2.6.tar.gz cd redis-6.2.6/ make MALLOClibc make install PREFIX/opt/soft/redis复制可执行文件 cp /opt/soft/redis/redis-cli /usr/bin/redis-cli cp /opt/soft/redis/redis-server /usr/bi…

ffmpeg操作实战001:视频+音频文件融合

一、功能需求 把视频文件video.mp4 和音频文件audio.wav融合在一起&#xff0c;输出视频文件output.mp4 二、操作指令 ffmpeg -i video.mp4 -i audio.wav -c:v copy -map 0:v:0 -map 1:a:0 output.mp4 三、参数说明 ffmpeg: 这是用于执行FFmpeg命令行工具的命令。-i video…

数据结构(C语言)代码实现(六)——单链表的实现

目录 参考、格式 头文件LinkList.h 一、将函数的小括号写成中括号 二、读取权限冲突 三、L->Last指针没有移动 四、函数指针的使用 头文件完整代码 测试函数&#xff08;主函数&#xff09;test.cpp 测试结果 参考、格式 数据结构课本2.3节&#xff08;严蔚敏版&a…

虚幻UE5Matehuman定制自己的虚拟人,从相机拍照到UE5制作全流程

开启自己的元宇宙,照片扫描真实的人类,生成虚拟形象,保姆级教程,欢迎大家指正。 需要的软件: 制作流程: 一.拍照。 围绕自己拍照,大概20多张图就差不多了,把脑门漏出来,无需拍后脑勺。 拍照方式 例如,拍照时尽量不要在脸上体现出明显的光源方向。

如何在Shopee平台上进行测款选品

在如今竞争激烈的电商市场&#xff0c;选择合适的产品成为卖家们提高销售业绩的重要一环。在Shopee平台上进行测款选品&#xff0c;可以帮助卖家找到符合市场需求的产品&#xff0c;提高销售业绩。本文将介绍一些策略和步骤&#xff0c;帮助卖家在Shopee平台上进行测款选品。 …

PCL安装以及CGAL构建三维凸包

基础理论专栏目录 - 知乎 (zhihu.com) 凸包问题——概述 - 知乎 (zhihu.com) 1、安装PCL 安装pcl,我的是window10,vs2019。我安装的是1.13 win10系统下 VS2019点云库PCL1.12.0的安装与配置_windows 10使用pcl-CSDN博客 照着上述博客进行配置&#xff0c;再结合这个设置环境变…