跟着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>

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

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

相关文章

【Simulink系列】——动态系统仿真 之 简单系统

引入 不同的系统具有不同的输入与输出。一般来说&#xff0c;输入输出数目越多&#xff0c;系统越复杂。最简单的系统只要一个输入一个输出&#xff08;SISO&#xff09;&#xff0c;且其任意时刻的输出只与当前时刻的输入有关。 一、简单系统定义 对于满足下列条件的系统&a…

重新配置vue项目时出现的:连接已断开问题

在新机器上配置完node.js、vue-cli&#xff0c;配置了node_modules后&#xff0c;命令行运行vue ui后&#xff0c;出现了如下报错&#xff1a; C:\Users\LEN>vue ui &#x1f680; Starting GUI... &#x1f320; Ready on http://localhost:8000 node:events:496throw e…

揭秘店铺详情API接口:提升顾客信任与购物体验的利器

在电商领域&#xff0c;了解店铺的详细信息对于提升顾客的信任和忠诚度至关重要。为了帮助开发者获取和管理特定店铺的信息&#xff0c;电商平台通常提供店铺详情API接口。本文将指导你如何使用这个API接口来获取店铺的名称、描述、地址、评分等详细信息&#xff0c;并将这些信…

通过 ChatGPT 的 Function Call 查询数据库

用 Function Calling 的方式实现手机流量包智能客服的例子。 def get_sql_completion(messages, model"gpt-3.5-turbo"):response client.chat.completions.create(modelmodel,messagesmessages,temperature0,tools[{ # 摘自 OpenAI 官方示例 https://github.com/…

未定义基类问题解决

基类A, 子类B 原因 出现了超前部署&#xff0c;循环依赖&#xff0c;即A.h中包含了B.h &#xff0c;B.h中包含了A.h从而出现错误。 解决 将基类中的包含头文件#include"B.h"删除即可

想打游戏 可是windows一直出问题 应该如何解决呢 我来告诉你

如何你想让系统一直不出问题 你需要按照我的方法: 1 用 users 用户组用户 不登陆管理员账户 特别不登陆windows默认创建的那个用户 安装软件时 输密码安装 2 不安装国产软件 和 杀毒软件 3 使用firefox这个浏览器 或 google浏览器&#xff08;但gogole不保证安全&…

扩展学习|统计学习理论(SLT)与极限学习机(ELM)应用于大社会数据分析

文献来源&#xff1a;[1] Oneto L , Bisio F , Cambria E ,et al.Statistical Learning Theory and ELM for Big Social Data Analysis[J].IEEE Computational Intelligence Magazine, 2016, 11(3):45-55.DOI:10.1109/MCI.2016.2572540. 提取链接&#xff1a;链接&#xff1a;h…

移远(Quectel)物联网通信解决方案

一、方案简介 无线通信模块是具备无线通信的电路模块&#xff0c;它能通过无线连接传输数据&#xff0c;能识别分析主控制器发来的命令&#xff0c;控制节点设备的工作&#xff0c;或者向主控制器发送当前节点设备的工作状态。 市面上常用的无线通信模组包括蓝牙模组、WLAN模…

灵伴科技(Rokid)借助 Knative 实现 AI 应用云原生 Serverless 化

作者&#xff1a;朱炜栋、元毅、子白 公司介绍 Rokid 创立于 2014 年&#xff0c;是一家专注于人机交互技术的产品平台公司&#xff0c;2018 年即被评为国家高新技术企业。Rokid 作为行业的探索者、领跑者&#xff0c;目前致力于 AR 眼镜等软硬件产品的研发及以 YodaOS 操作系…

数据结构—基础知识:哈夫曼编码

文章目录 数据结构—基础知识&#xff1a;哈夫曼编码哈夫曼编码的主要思想有关编码的概念哈夫曼编码满足两个性质&#xff1a; 数据结构—基础知识&#xff1a;哈夫曼编码 哈夫曼编码的主要思想 在进行数据压缩时&#xff0c;为了使压缩后的数据文件尽可能短&#xff0c;可采…

使用Python的turtle模块实现简单的烟花效果

import turtle import random import math# 设置窗口大小 width, height 800, 600 screen turtle.Screen() screen.title("Fireworks Explosion") screen.bgcolor("black") screen.setup(width, height)# 定义烟花粒子类 class Particle(turtle.Turtle):…

当程序员买了一台新 Mac

作为一名程序员&#xff0c;最趁手的“兵器”那还得是 MBP&#xff0c;有了一台新的 MBP 之后&#xff0c;肯定是要安装一大堆软件或工具的&#xff0c;把电脑装扮成自己喜欢的样子。 正好最近入手了一台新电脑&#xff0c;把安装软件的过程记录下来&#xff0c;下次再需要装环…

STM32控制DHT11温湿度传感器模块获取温湿度数据

时间记录&#xff1a;2024/1/29 一、DHT11引脚介绍 &#xff08;1&#xff09;VCC&#xff1a;电源引脚&#xff0c;3.3-5.5V &#xff08;2&#xff09;DATA&#xff1a;数据输入输出引脚 &#xff08;3&#xff09;NC&#xff1a;保留引脚&#xff0c;悬空即可 &#xff08;…

颐和园龙纹珍宝展亮相,文物预防保护科技护航

在皇家园林颐和园的深处&#xff0c;一场独特的文化盛宴正静静上演。2月1日&#xff0c;“祥龙贺岁—颐和园藏龙纹题材文物特展”在德和园华丽揭幕。此次特展汇聚了66件珍贵文物&#xff0c;包括玉器、瓷器、书画、珐琅、家具等&#xff0c;每一件都是颐和园园藏的瑰宝。这些文…

Flink SQL Client 安装各类 Connector、组件的方法汇总(持续更新中....)

一般来说&#xff0c;在 Flink SQL Client 中使用各种 Connector 只需要该 Connector 及其依赖 Jar 包部署到 ${FLINK_HOME}/lib 下即可。但是对于某些特定的平台&#xff0c;如果 AWS EMR、Cloudera CDP 等产品会有所不同&#xff0c;主要是它们中的某些 Jar 包可能被改写过&a…

【Wireshark教程】流量分析,使用Wireshark寻找主机信息

🍬 博主介绍👨‍🎓 博主介绍:大家好,我是 hacker-routing ,很高兴认识大家~ ✨主攻领域:【渗透领域】【应急响应】 【python】 【VulnHub靶场复现】【面试分析】 🎉点赞➕评论➕收藏 == 养成习惯(一键三连)😋 🎉欢迎关注💗一起学习👍一起讨论⭐️一起进步…

力扣labuladong一刷day72天动态规划

力扣labuladong一刷day72天动态规划 文章目录 力扣labuladong一刷day72天动态规划一、343. 整数拆分二、96.不同的二叉搜索树 一、343. 整数拆分 题目链接&#xff1a;https://leetcode.cn/problems/integer-break/description/ 思路&#xff1a;本题为整数拆分&#xff0c;可…

clickhouse如何清除多个分区数据 alter table drop partition操作

官网drop partition操作 官网链接&#xff1a;https://clickhouse.com/docs/zh/sql-reference/statements/alter/partition#drop-partitionpart 官网上之有清除单个分区的例子&#xff0c;并没有对清除多个分区的场景进行描述&#xff0c;之前清除分区时也是按照官网例子进行…

MySQL系统配置

MySQL系统配置 内存相关 sort_buffer_size 定义了每个线程排序缓存区的大小&#xff0c;当索引无法满足需要的顺序信息时会用到&#xff0c;执行计划中出现using filesort&#xff0c;MySQL在有查询、需要做排序操作时才会为每个缓冲区分配内存&#xff08;直接分配该参数的全部…

在 PyTorch 中动态构建和更新模型

1. PyTorch 中动态构建和更新模型 在 PyTorch 中&#xff0c;动态构建和更新模型是其核心特性之一。这意味着开发者无需预先定义完整的计算图&#xff0c;而是在运行时根据需要构建神经网络结构&#xff0c;并可以随时修改模型参数、添加或删除网络层等。这种动态图机制为研…