CSS动画属性(一)加两实例

@keyframes

定义

  1. 使用可以创建动画(逐步改变从一个CSS样式设定到另一个。)
  2. 可以设置多次
  3. 变化发生时使用%/关键字from和to

0%是开头动画,100%是当动画完成。

为了获得最佳的浏览器支持,始终定义为0%和100%的选择器。

注意: 使用animation属性来控制动画的外观,还使用选择器绑定动画。.

语法:

@keyframes animationname {keyframes-selector {css-styles;}}

animationname 定义animation的名称。

keyframes-selector 动画持续时间的百分比。
合法值:0-100%from (和0%相同)to (和100%相同)注意: 您可以用一个动画keyframes-selectors。

css-styles 一个或多个合法的CSS样式属性

实例一

使一个div元素逐渐移动200像素:
在这里插入图片描述
在这里插入图片描述

实例二

在这里插入图片描述
在这里插入图片描述

代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>wulin</title>
<style> 
div
{width:100px;height:100px;background:red;position:relative;animation:mymove 5s infinite;-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}@keyframes mymove
{0%   {top:0px; left:0px; background:red;}25%  {top:0px; left:100px; background:blue;}50%  {top:100px; left:100px; background:yellow;}75%  {top:100px; left:0px; background:green;}100% {top:0px; left:0px; background:red;}
}@-webkit-keyframes mymove /* Safari and Chrome */
{0%   {top:0px; left:0px; background:red;}25%  {top:0px; left:100px; background:blue;}50%  {top:100px; left:100px; background:yellow;}75%  {top:100px; left:0px; background:green;}100% {top:0px; left:0px; background:red;}
}
</style>
</head>
<body><p><strong>注意:</strong>@keyframes不兼容IE 9 and 以及更早版本的浏览器.</p><div></div></body>
</html>
;`

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

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

相关文章

数据分析 | NumPy

NumPy&#xff0c;全称是 Numerical Python&#xff0c;它是目前 Python 数值计算中最重要的基础模块。NumPy 是针对多维数组的一个科学计算模块&#xff0c;这个模块封装了很多数组类型的常用操作。 使用numpy来创建数组 import numpy as npdata np.array([1, 2, 3]) print…

网络学习:邻居发现协议NDP

目录 前言&#xff1a; 一、报文内容 二、地址解析----NS/NA 目标的被请求组播IP地址 邻居不可达性检测&#xff1a; 重复地址检测 路由器发现 地址自动配置 默认路由器优先级和路由信息发现 重定向 前言&#xff1a; 邻居发现协议NDP&#xff08;Neighbor Discovery…

Linux mount命令教程:如何挂载和管理文件系统(附实例详解和注意事项)

Linux mount命令介绍 mount命令用于将设备上找到的文件系统挂载到以/为根的大树结构&#xff08;Linux文件系统&#xff09;。相反&#xff0c;另一个命令umount可以用来将这些设备从树中分离。 Linux mount命令适用的Linux版本 mount命令在所有主流的Linux发行版中都是可用…

【晴问算法】入门篇—贪心算法—区间不相交问题

题目描述 给定n个开区间&#xff0c;从中选择尽可能多的开区间&#xff0c;使得这些开区间两两没有交集。 输入描述 输出描述 输出一个整数&#xff0c;表示最多选择的开区间个数。 样例1输入 4 1 3 2 4 3 5 6 7 输出 3 解释 最多选择(1,3)、(3,5)、(6,7)三个区间&#xff0c;它…

CSS中水平垂直居中的实现

利用绝对定位&#xff0c;先将元素的左上角通过top:50%和left:50%定位到页面的中心&#xff0c;然后再通过translate来调整元素的中心点到页面的中心。该方法需要考虑浏览器兼容问题。 .parent { position: relative; } .child { position: absolute; left: 50%; …

SAP前台处理:销售业务集成<VA03/VL03N/VLPOD/VF03) 01/02

一、背景&#xff1a; 从销售订单创建VA01>发货过账VL01N >POD确认>VF01开票 这个流程涉及的凭证流及各个节点如何查询上游下游凭证&#xff1b; 二、凭证流&#xff1a; 从销售订单查看销售凭证流 VA03 双击交货单&#xff1a;带出交货单对应行项目及分批次项目…

SpringBoot(文件上传功能,阿里云OSS存储,几种配置文件用法)【详解】

目录 一、新增员工 二、文件上传-技术点 1. 文件上传功能 1.客户端上传文件三要素 2 服务端接收文件 Controller接收文件示例 修改允许上传的文件大小 2. 本地存储文件 3. 阿里云OSS存储&#xff08;这里只写一种&#xff0c;可以用其它的&#xff09; 1.介绍 2.开通…

c# .net6 Task 多线程介绍

c# .net6 Task 多线程介绍 一、Task 启动方式 1. new Task() 直接new Task对象&#xff0c;传入Action委托&#xff0c;该方法不具有参数且不返回值&#xff0c;然后调用Start()即可。 Task task new Task(() >{Console.WriteLine($"01:这里开启了一个线程&#xf…

24计算机考研调剂 | 武汉科技大学

武汉科技大学冶金新技术与功能金属材料研究梯队招收研究生 考研调剂招生信息 学校:武汉科技大学 专业: 工学->治金工程 工学->材料科学与工程 工学->计算机科学与技术 工学->动力工程及工程热物理 工学->机械工程 年级:2024 招生人数:20 招生状态:正在招…

【前端】CSS常见的选择器

CSS&#xff08;层叠样式表&#xff09;提供了多种选择器&#xff0c;用于选择要应用样式的 HTML 元素。在CSS中选择器是一种模式&#xff0c;用于匹配HTML文档中的某些元素并且应用到这些元素上。我们可以通过选择器给特定的元素设置样式。 常见的 CSS 选择器 元素选择器&am…

try~catch语句

用try~catch语句来处理异常&#xff0c;将可能出现的异常操作放在 try部分&#xff0c;将发生异常后的处理放在catch部分。 带finally子语句的try~catch 语法格式 执行机制 ★注意★&#xff1a; try~catch中执行了return → finally子语句仍被执行&#xff1b; try~catch中执…

VScode(8)之阅读大型CC++工程

VScode(8)之阅读大型CC工程(Linux内核)代码 Author&#xff1a;Once Day Date&#xff1a;2023年4月25日/2024年3月17日 漫漫长路&#xff0c;有人对你微笑过嘛… 全系列文章请查看专栏: VScode开发_Once-Day的博客-CSDN博客 参考文档: 1. 历史包袱 由于上世纪70-80年代的…

【亲测可行】Mac上clion boost库的安装与使用

很多博客上关于boost库的安装与使用都有问题&#xff0c;所以自己写一篇文章来纠正一些错误 这里采用homebrew安装 brew install boost安装好以后boost目录在 /opt/homebrew/Cellar/boost/xxx版本 下&#xff0c;然后可以看到lib&#xff08;库文件&#xff09;和include&…

语音神经科学—04.Speech Computations of the Human Superior Temporal Gyrus

Speech Computations of the Human Superior Temporal Gyrus&#xff08;人类颞上沟的言语计算&#xff09; 专业术语 Superior Temporal Gyrus 颞上沟 phoneme 音素 syllable 音节 speech perception 语音感知 vocal tract 声道 acoustic 声学的 articulatory 发音的 spectro…

【基于Seeed xiao ESP32S3 Sense的自动化HA鱼缸设计】

1.前言 基于Seeed xiao ESP32S3 Sense的自动化HA鱼缸 在当今物联网与智能家居科技日益发达的时代&#xff0c;将先进技术和传统养鱼艺术融合&#xff0c;创造出智能、自动化且极具观赏价值的鱼缸已成为一种创新趋势。SeeedStudio推出的Xiao ESP32-S3 Sense开发板以其卓越的性能…

command failed: npm install --loglevel error --legacy-peer-deps

在使用vue create xxx创建vue3项目的时候报错。 解决方法&#xff0c;之前使用的https://registry.npm.taobao.org 证书过期更换镜像地址即可 操作如下&#xff1a; 1.cd &#xff5e;2.执行rm .npmrc3. sudo npm install -g cnpm --registryhttp://registry.npmmirror.com…

建立人才信息化管理体系,提高企业核心竞争力

很多企业在发展中&#xff0c;都引入了信息化工具系统来提升管理效率。在人力资源管理方面&#xff0c;也有不少信息化系统。通过大量调研发现&#xff0c;在人才管理的初级阶段&#xff0c;企业通过对员工数量统计、员工结构统计、入离职、人才梯队数据、招聘管理数据、培训管…

基于高斯模型的运动目标检测(车辆检测),Matlab实现

博主简介&#xff1a; 专注、专一于Matlab图像处理学习、交流&#xff0c;matlab图像代码代做/项目合作可以联系&#xff08;QQ:3249726188&#xff09; 个人主页&#xff1a;Matlab_ImagePro-CSDN博客 原则&#xff1a;代码均由本人编写完成&#xff0c;非中介&#xff0c;提供…

Vue3:标签的ref属性用法

一、情景说明 我们在写前端页面的时候&#xff0c;肯定会遇到获取DOM内容的情况。 以往&#xff0c;我们是用原生的js方法去获取&#xff0c;如document.getXxxx 但是&#xff0c;这中方法会有个问题&#xff0c;如果父组件和子组件的id相同&#xff0c;则会出错。 在Vue3中&…

ASP.NET 服务器控件

目录 一、使用的软件 1、下载 2、新建文件&#xff08;写一个简单的web网页&#xff09; 二、相关知识点 1、Web窗体网页的组件 &#xff08;1&#xff09;可视化组件 &#xff08;2&#xff09;用户接口逻辑 2、Web Form网页的代码模型 &#xff08;1&#xff09;单文件…