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

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>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

HSRP配置指南

实验大纲 第 1 部分&#xff1a;验证连通性 步骤 1&#xff1a;追踪从 PC-A 到 Web 服务器的路径 步骤 2&#xff1a;追踪从 PC-B 到 Web 服务器的路径 步骤 3&#xff1a;观察当 R3 不可用时&#xff0c;网络的行为 第 2 部分&#xff1a;配置 HSRP 主用和 备用路由器 步…

WebGL+Three.js入门与实战——绘制水平移动的点、通过鼠标控制绘制(点击绘制、移动绘制、模拟画笔)

个人简介 &#x1f440;个人主页&#xff1a; 前端杂货铺 &#x1f64b;‍♂️学习方向&#xff1a; 主攻前端方向&#xff0c;正逐渐往全干发展 &#x1f4c3;个人状态&#xff1a; 研发工程师&#xff0c;现效力于中国工业软件事业 &#x1f680;人生格言&#xff1a; 积跬步…

【微服务】skywalking自定义链路追踪与日志采集

目录 一、前言 二、自定义链路追踪简介 2.1 自定义链路追踪应用场景 2.2 链路追踪几个关键概念 三、skywalking 自定义链路追踪实现 3.1 环境准备 3.2 集成过程 3.2.1 导入核心依赖 3.2.2 几个常用注解 3.2.3 方法集成 3.2.4 上报追踪信息 四、skywalking 自定义日志…

代码随想录 Leetcode491. 非递减子序列

题目&#xff1a; 代码(首刷看解析 2024年2月3日&#xff09;&#xff1a; class Solution { private:vector<vector<int>> res;vector<int> path; public:void backtracking(vector<int>& nums, int startIndex) {if (path.size() > 1) {res.…

HiveSQL题——collect_set()/collect_list()聚合函数

一、collect_set() /collect_list()介绍 collect_set()函数与collect_list()函数属于高级聚合函数&#xff08;行转列&#xff09;&#xff0c;将分组中的某列转换成一个数组返回&#xff0c;常与concat_ws()函数连用实现字段拼接效果。 collect_list&#xff1a;收集并形成lis…

Amazon Bedrock 知识库现可提供完全托管的 RAG 体验

Amazon Bedrock 知识库预览版已于9月问世。从今天开始&#xff0c;Amazon Bedrock 知识库正式全面发布。正式推出。 借助知识库&#xff0c;可安全地将 Amazon Bedrock 中的基础模型 (FM) 连接到贵公司的数据&#xff0c;供检索增强生成 (RAG) 使用。模型生成的响应更具相关性…

海外IP代理:解锁网络边界的实战利器

文章目录 引言&#xff1a;正文&#xff1a;一、Roxlabs全球IP代理服务概览特点&#xff1a;覆盖范围&#xff1a;住宅IP真实性&#xff1a;性价比&#xff1a;在网络数据采集中的重要性&#xff1a; 二、实战应用案例一&#xff1a;跨境电商竞品分析步骤介绍&#xff1a;代码示…

简单几步,借助Aapose.Cells将 Excel 工作表拆分为文件

近年来&#xff0c;Excel 文件已成为无数企业数据管理的支柱。然而&#xff0c;管理大型 Excel 文件可能是一项艰巨的任务&#xff0c;尤其是在高效共享和处理数据时。为了应对这一挑战&#xff0c;大型 Excel 工作簿被拆分为较小的工作簿以增强电子表格管理。Aspose提供了这样…

堪称灾难级攻击的 UDP FLOOD洪水攻击,应该如何防护?

DDOS又称为分布式拒绝服务&#xff0c;全称是Distributed Denial of Service。DDOS本是利用合理的请求造成资源过载&#xff0c;导致服务不可用&#xff0c;从而造成服务器拒绝正常流量服务。就如酒店里的房间是有固定的数量的&#xff0c;比如一个酒店有50个房间&#xff0c;当…

【Kafka】服务器Broker与Controller详解

这里写自定义目录标题 Broker概述Broker总体工作流程Broker重要参数 Controller为什么需要Controller具体作用数据服务Leader选举选举流程脑裂问题羊群效应触发leader选举 Broker 概述 Kafka服务实例&#xff0c;负责消息的持久化、中转等功能。一个独立的Kafka 服务器被就是…

AES算法:数据传输的安全保障

在当今数字化时代&#xff0c;数据安全成为了一个非常重要的问题。随着互联网的普及和信息技术的发展&#xff0c;我们需要一种可靠的加密算法来保护我们的敏感数据。Advanced Encryption Standard&#xff08;AES&#xff09;算法应运而生。本文将介绍AES算法的优缺点、解决了…

金和OA jc6 UploadFileBlock 任意文件上传漏洞

免责声明&#xff1a;文章来源互联网收集整理&#xff0c;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;所产生的一切不良后果与文章作者无关。该…

SpringBoot实战项目第一天

环境搭建 后端部分需要准备&#xff1a; sql数据库 创建SpringBoot工程&#xff0c;引入对应的依赖(web\mybatis\mysql驱动) 配置文件application.yml中引入mybatis的配置信息 创建包结构&#xff0c;并准备实体类 完成今日开发后项目部分内容如下图示 用户注册于登录部分…

【MongoDB】跨库跨表查询(python版)

MongoDB跨表跨库查询 1.数据准备&#xff1a;2.跨集合查询3.跨库查询应该怎么做&#xff1f; 讲一个简单的例子&#xff0c;python连接mongodb做跨表跨库查询的正确姿势 1.数据准备&#xff1a; use order_db; db.createCollection("orders"); db.orders.insertMan…

机器学习 | 如何利用集成学习提高机器学习的性能?

目录 初识集成学习 Bagging与随机森林 Otto Group Product(实操) Boosting集成原理 初识集成学习 集成学习&#xff08;Ensemble Learning&#xff09;是一种通过组合多个基本模型来提高预测准确性和泛化能力的机器学习方法。它通过将多个模型的预测结果进行整合或投票来做…

增加Vscode引用路径

增加Vscode引用路径 增加Vscode引用路径问题说明解决思路1在Vscode中进行配置缺点 解决思路2 增加Vscode引用路径 问题说明 在嵌入式开发中需要经常用到库函数(SPL), Vscode需要配置引用路径才能对函数名或变量进行跳转 解决思路1 与Keil5 MDK类似, 在配置C/C的json文件中添…

计算机网络_1.6.2 计算机网络体系结构分层的必要性

1.6.2 计算机网络体系结构分层的必要性 一、五层原理体系结构每层各自主要解决什么问题1、物理层2、数据链路层3、网络层4、运输层5、应用层 二、总结三、练习 笔记来源&#xff1a; B站 《深入浅出计算机网络》课程 本节主要介绍实现计算机网络需要解决哪些问题&#xff1f;以…

【Crypto | CTF】BUUCTF 大帝的密码武器1

天命&#xff1a;这题真的是来刷经验的&#xff0c;有点吐血 首先这题是贼简单&#xff0c;但我居然跪到了&#xff0c;所以特此写这一篇来惩戒自己心太大 拿到文件&#xff0c;文件写着zip&#xff0c;改成zip后缀名即可&#xff0c;也不算啥难的 打开里面的两份文件&#x…

NLP入门系列—Attention 机制

NLP入门系列—Attention 机制 Attention 正在被越来越广泛的得到应用。尤其是 [BERT]火爆了之后。 Attention 到底有什么特别之处&#xff1f;他的原理和本质是什么&#xff1f;Attention都有哪些类型&#xff1f;本文将详细讲解Attention的方方面面。 Attention 的本质是什…

LabVIEW传感器通用实验平台

LabVIEW传感器通用实验平台 介绍了基于LabVIEW的传感器实验平台的开发。该平台利用LabVIEW图形化编程语言和多参量数据采集卡&#xff0c;提供了一个交互性好、可扩充性强、使用灵活方便的传感器技术实验环境。 系统由硬件和软件两部分组成。硬件部分主要包括多通道数据采集卡…