Html、Css3动画效果

文章目录

  • 第九章 动画
    • 9.1 transform动画
    • 9.2 transition过渡动画
    • 9.3 定义动画

第九章 动画

9.1 transform动画

transform 2D变形

translate():平移函数,基于X、Y坐标重新定位元素的位置

scale():缩放函数,可以使任意元素对象尺寸发生变化

rotate():旋转函数,取值是一个度数值

skew():倾斜函数,取值是一个度数值

div{transform:translate(100px,100px);transform:translate(100px,100px) scale(1.5)
}rotate( )函数只是旋转,而不会改变元素的形状
skew( )函数是倾斜,元素不会旋转,会改变元素的形状

9.2 transition过渡动画

transition: 要过度的属性 时间 过度函数 延迟时间;

transition: 要过度的属性  时间  过度函数  延迟时间;要过的属性:可以使用 all 或者一个一个的写
时间:    单位s秒   ms毫秒
过度函数:ease:速度由快到慢(默认值)linear:速度恒速(匀速运动)ease-in:速度越来越快(渐显效果)ease-out:速度越来越慢(渐隐效果)ease-in-out:速度先加速再减速(渐显渐隐效果)

9.3 定义动画

/* 定义动画*/
@keyframes imgacion{0%{transform: rotate(0deg) scale(1);}100%{transform: rotate(360deg) scale(1.2);}}/* 使用动画*/img:hover{animation-name: imgacion;animation-duration: 2s;}
}

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

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

相关文章

【系统架构设计师-2010年】综合知识-答案及详解

更多内容请见: 备考系统架构设计师-核心总结索引 文章目录 【第1题】【第2题】【第3题】【第4~5题】【第6题】【第7~8题】【第9题】【第10题】【第11题】【第12题】【第13题】【第14题】【第15题】【第16题】【第17题】【第18题】【第19题】【第20题】【第21题】【第22题】【第…

高斯平面直角坐标讲解,以及地理坐标转换高斯平面直角坐标

高斯平面直角坐标系(Gauss-Krger 坐标系)是基于 高斯-克吕格投影 的一种常见的平面坐标系统,主要用于地理信息系统 (GIS)、测绘和工程等领域。该坐标系将地球表面的经纬度(地理坐标)通过一种投影方式转换为平面直角坐标,以便在二维平面中进行距离、面积和角度的计算。 一…

自动化抢票 12306

自动化抢票 12306 1. 明确需求 明确采集的网站以及数据内容 网址: https://kyfw.12306.cn/otn/leftTicket/init数据: 车次相关信息 2. 抓包分析 通过浏览器开发者工具分析对应的数据位置 打开开发者工具 F12 或鼠标右键点击检查 刷新网页 点击下一页/下滑网页页面/点击搜…

基于云原生向量数据库 PieCloudVector 的 RAG 实践

近年来,人工智能生成内容(AIGC)已然成为最热门的话题之一。工业界出现了各种内容生成工具,能够跨多种模态产生多样化的内容。这些主流的模型能够取得卓越表现,归功于创新的算法、模型规模的大幅扩展,以及海…

HalconDotNet中的图像特征与提取详解

文章目录 简介一、边缘特征提取二、角点特征提取三、区域特征提取四、纹理特征提取五、形状特征提取 简介 图像特征提取是图像处理中的一个重要步骤,用于从图像中提取有意义的特征,以便进行进一步的分析和处理。HalconDotNet提供了多种图像特征提取方法&…

用Boot写mybatis的增删改查

一、总览 项目结构: 图一 1、JavaBean文件 2、数据库操作 3、Java测试 4、SpringBoot启动类 5、SpringBoot数据库配置 二、配置数据库 在项目资源包中新建名为application.yml的文件,如图一。 建好文件我们就要开始写…

【MySQL00】【 杂七杂八】

文章目录 一、前言二、MySQL 文件1. 参数文件2. 日志文件3. 套接字文件4. pid 文件5. 表结构定义文件6. InnoDB 存储引擎文件 二、BTree 索引排序三、InnoDB 关键特性1. 插入缓冲1.1 Insert Buffer 和 Change Buffer1.1 缓冲合并 2. 两次写2. 自适应哈希索引3. 异步IO4. 刷新邻…

江协科技STM32学习- P9 OLED调试工具

🚀write in front🚀 🔎大家好,我是黄桃罐头,希望你看完之后,能对你有所帮助,不足请指正!共同学习交流 🎁欢迎各位→点赞👍 收藏⭐️ 留言📝​…

# VMware 共享文件

VMware tools快速安装 VMware 提供了 open-vm-tools,这是 VMware 官方推荐的开源工具包,通常不需要手动安装 VMware Tools,因为大多数 Linux 发行版(包括 Ubuntu、CentOS 等)都包含了 open-vm-tools,并且已…

Linux网络编程IO管理

网络 IO 涉及到两个系统对象,一个是用户空间调用 IO 的进程或者线程,一个是内核空间的内核系统,比如发生 IO 操作 read 时,它会经历两个阶段: 等待内核协议栈的数据准备就绪;将内核中的数据拷贝到用户态的…

Kafka【八】如何保证消息发送的可靠性、重复性、有序性

【1】消息发送的可靠性保证 对于生产者发送的数据,我们有的时候是不关心数据是否已经发送成功的,我们只要发送就可以了。在这种场景中,消息可能会因为某些故障或问题导致丢失,我们将这种情况称之为消息不可靠。虽然消息数据可能会…

Spring框架基础介绍2.0

目录 AOP概述 面向切面思想 优点: 核心原理: 使用案例: AOP 的基本概念 springAOP 实现 AspectJ 中常用的通知 Spring事物管理 数据库事务管理? spring 事务管理? Spring中的事物管理分为两种形式: 1、编程式事物管理 2、声明…

React入门教程:创建你的第一个React应用

React 是由 Facebook 开发的用于构建用户界面的 JavaScript 库。它以其高效、灵活和组件化的特性受到开发者的广泛欢迎。如果你是前端开发新手,或是从其他框架转向 React,这篇文章将引导你创建一个简单的 React 应用,帮助你快速上手。 1. 环…

低空经济如此火爆,新手如何分一杯羹?

低空经济的火爆为新手提供了诸多参与和分一杯羹的机会。以下是一些具体的建议,帮助新手在这一领域找到切入点: 1. 了解行业概况与趋势 定义与范围:低空经济是指在3000米以下空域内进行各种有人和无人驾驶航空器活动的经济形态,涉…

dubbo的SPI机制

一.dubbo的SPI机制 SPI机制是一个服务发现机制,通过接口的全限定名找到指定目录下对应的文件,然后加载对应的实现类注册到系统中进行使用。 在Java原生跟mysql的驱动加载也使用了这个机制,但是他们只能进行全部实现类的加载(遍历…

mysql创建新表,同步数据

import os import argparse import glob import cv2 import numpy as np import onnxruntime import tqdm import pymysql import time import json from datetime import datetime os.environ[“CUDA_VISIBLE_DEVICES”] “0” # 使用 GPU 0 def get_connection(): “”“创…

最新HTML5中的文件详解

第5章 HTML5中的文件 5.1选择文件 可以创建一个file类型的input,添加multiple属性为true,可以实现多个文件上传。 5.1.1 选择单个文件 1.功能描述 创建file类型input元素,页面中不再有文本框,而是 选择文件 按钮,右侧是上次文件的名称&a…

argodb自定义函数读取hdfs文件的注意点,避免FileSystem已关闭异常

一、问题描述 一位同学反馈,他写的argo存过中调用了一个自定义函数,函数会加载hdfs上的一个文件,但有些节点会报FileSystem closed异常,同时有时任务会成功,有时会失败。 二、问题分析 argodb的计算引擎是基于spark…

解析 MySQL 数据库的 Python 接口:`mysqlclient` 与 `django-mysql` 实战指南20240904

博客标题:深入解析 MySQL 数据库的 Python 接口:mysqlclient 与 django-mysql 实战指南 引言 在现代 Web 开发中,数据库与应用程序的交互是不可避免的核心环节。对于使用 Python 尤其是 Django 框架的开发者来说,如何有效地与 M…

线性因子模型 - 概率PCA和因子分析篇

序言 在探索数据科学与机器学习的浩瀚领域中,深度学习作为一股不可小觑的力量,正以前所未有的方式重塑着我们对数据处理与知识发现的理解。在这一宏大的框架下,概率主成分分析( Probabilistic PCA, pPCA \text{Probabilistic PCA…