CSS之动画
一.动画
动画类型
CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。
transform属性可以定义一些主要的动画属性，
- translate：平移，translat（100px），向右平移100px
- scale：缩放，scale（120%），放大20%
- skew：阴影，skew（30deg），顺时针阴影30度
- rotate：旋转，rotate（30deg），顺时针旋转30度
transform-origin：改变动画的起始地点，一般以原点为起点
动画过渡
- property：需过度的属性，如transform
- duration：过度的时长，如：1s
- timing-function：缓动函数，css定义好了四种，可以自行选择，如：ease-in-out
- delay：开始延迟事件，事件触发后多久触发动画
测试动画：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS动画</title>
<script src="../static/js/jquery-3.7.1.js"></script>
<style>
#box1{
width: 200px;
height: 200px;
background-color: blueviolet;
transform: translate(100px);
transform-origin: top left;
transform: rotate(30deg);
}
#box2{
width: 200px;
height: 200px;
background-color: blueviolet;
transition: transform 2s ease;
}
#box3{
width: 200px;
height: 200px;
background-color: blueviolet;
transition: transform 1s ease-in-out 1s;
}
#box4{
width: 200px;
height: 200px;
background-color: aqua;
border-radius: 200px;
text-align: center;
}
#box5{
width: 50px;
height: 50px;
margin: 0 auto;
background-color: brown;
border-radius: 50px;
}
#box3:hover{
transform: translate(100px);
transform-origin: top left;
}
#box2:hover{
transform: scale(0.5);
transform-origin: top left;
} </style> </head>
<body>
<div id="box1">
<p>
移动的盒子
</p>
</div>
<br>
<div id="box2">
<p>
移动的盒子
</p>
</div>
<br>
<div id="box3">
<p>
移动的盒子
</p>
</div>
<div id="box4" onclick="fun1()">
<div id="box5"> </div>
</div>
</body>
</html>
帧动画
@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
一般可以通过0% ~~ 100%来描述一个帧内的过程
0%为帧开始的阶段
50%为帧进行到一般的阶段
100%为此帧完成的阶段
如果此帧动画比较特别，只用起始帧和结束帧，那么可以使用0%和100%，也可以使用from 和 to关键字
@keyframes格式：
@keyframes name{
0%{
transform： ；
}
100%{
transform： ；
}
}
解释：
name：表示这个帧动画的名字，全局必须唯一
0%{ }：为帧开始的情况下，执行什么动画类型，由transform描述
100%{ }：为帧结束的情况下，执行什么动画类型，由transfrom描述
有了帧动画后，需要启动事项，它就是 animation
它描述了帧动画的过渡属性
animation：keyframes-name，duration，timing-function，delay，fill-mode，direction，play-state
keyframes-name：帧动画的名字
duration：帧动画执行的单帧时间
timing-function：缓动函数
delay：开始延迟事件，事件触发后多久触发动画
fill-mode：设置动画执行前和执行后的样式，动画初始化为开始帧（none，默认），动画结束后停留在结束帧（forwards），前二者都包含（both）
direction：normal（顺时针，默认的），reverse（逆时针），alternate（先正向后反向）
play-state：帧动画的执行状态，如触发后一直执行动画（infinite），执行一次（running）
帧动画测试：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS动画</title>
<script src="../static/js/jquery-3.7.1.js"></script>
<style>
#box4{
width: 200px;
height: 200px;
background-color: aqua;
border-radius: 200px;
text-align: center;
}
#box5{
width: 50px;
height: 50px;
margin: 0 auto;
background-color: brown;
border-radius: 50px;
}
#box4:hover{
animation: spin 2s linear infinite;
}
@keyframes spin {
0%{
transform: rotate(0deg);
}
25%{
transform: rotate(180deg);
}
100%{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div id="box4" onclick="fun1()">
<div id="box5"> </div>
</div>
</body>
</html>
解释：
当鼠标悬浮在div盒子上的时候
animation就会被触发
然后根据描述的帧动画动作和过程进行动画
可以直接复制下来去测试是什么效果
二.CSS补充
1.box-sizing
当我们在css设置一个div盒子的大小时，一般是优先规定width和height，当需要对盒子中的文本内容进行样式的时候，会设置一些边框和内边距
当设置这些属性后，会自增盒子的大小，如：设置了盒子的宽度为200px，但又设置了边框为2px，内边距为20px，那么盒子最后的宽度为为：200px + 2px + 2px + 20px + 20px
多的部分是左右边框和左右内边距
为了对布局进行稳定样式，那么我们在预设值的时候就应当避免后序的样式对盒子的整体进行改变，所以需要使用到box-sizing属性
它一共有两个属性值：
- content-box: 这是默认值。浏览器对盒模型的解释遵从W3C标准，当定义width和height时，它的参数值不包括border和padding。
- border-box: 当定义width和height时，border和padding的参数值被包含在width和height之内。
我们需要用到border-box属性值，将后续的盒子边框和内边距都归为初始的盒子
注意点：外边距是不会被限制到的
2.justify-content
justify-content属性用于控制flexbox容器内的弹性子项在主轴（main axis）上的对齐方式。主轴的方向取决于flexbox容器的flex-direction属性。默认情况下，主轴的方向是水平的，从左到右。
前提是当前的结点必须是弹性布局，也就是先设置属性为：display: flex; 就可以设置当前结点为弹性布局
当一个元素被设置为Flex布局（display: flex;）后，其子元素将自动成为弹性项目（flex items），并按照一定的方式进行排列和对齐。Flex布局的主要思想是使父容器能够调节子元素的宽度/高度，以适应不同的屏幕尺寸和显示设备。
justify-context就会对此节点的子元素进行弹性布局，其属性值有以下：
- flex-start：弹性子项向行头紧挨着填充，第一个弹性子项的main-start外边距边线被放置在该行的main-start边线，后续弹性子项依次平齐摆放。
- flex-end：弹性子项从行尾开始排列，第一个弹性子项的main-end外边距边线被放置在该行的main-end边线，后续弹性子项依次平齐摆放。
- center：弹性子项在主轴上居中排列，第一个弹性子项的main-start外边距边线被放置在该行的main-start边线，后续弹性子项依次平齐摆放，且等间距均匀地排列在主轴上。
- space-between：弹性子项均匀排列在主轴上，首个元素放置于起点，末尾元素放置于终点。
- space-around：弹性子项均匀排列在主轴上，每个元素周围分配相同的间距，首尾元素与父容器边界的距离是另一边间距的一半。
- space-evenly：弹性子项均匀排列在主轴上，每个元素之间的间距相等，包括首尾元素与边框的间距
3.background-size
contain：缩小图片来适应元素的尺寸，同时保持图片的原始宽高比。图片会被剪裁以完全适应元素，但不会超出元素边界。cover：扩展图片来填满元素，同时保持图片的原始宽高比。图片可能会被剪裁以适应元素，确保整个元素被覆盖。100px 100px：将图片调整为指定的大小（例如 100px x 100px）。50% 100%：将图片调整为相对于包含元素的指定大小。例如，如果元素的宽度为 200px，则图片的宽度将为 100px。
4.<i></i>
对包含的文本进行斜体
需要注意的是，<i>标签只是简单地更改文本的样式，而不是语义。在某些情况下，使用CSS的font-style: italic;属性可能更为合适，因为这样可以保持HTML的语义清晰。
5.height: 100vh
height: 100vh; 是一个CSS样式规则，用于设置HTML元素的高度。
这里的 100vh 是一个视口单位（Viewport Unit），vh 代表视口高度的百分比。100vh 意味着元素的高度将等于视口（浏览器窗口）的高度的100%。换句话说，元素的高度将与浏览器窗口的高度相等，不论窗口大小如何变化。
6.颜色rgba（0~255，0~255, 0~255, 0~1）
我们知道rgb就是三基色，红黄蓝，可以通过这三种颜色配置出其它的颜色
而rgba多了一个属性值，是用来控制此颜色的透明度的
255, 255, 255分别代表红色、绿色和蓝色的分量。每个分量的值范围从0到255。在这里，每个分量的值都是255，这意味着红色、绿色和蓝色都被设置为最大值，所以这是一个白色的颜色。.7是透明度（alpha 值），范围从0（完全透明）到1（完全不透明）。在这个例子中，.7表示有一定的透明度，约为70%的不透明度。
CSS之动画的更多相关文章
- 第四十二课：基于CSS的动画引擎
由于低版本浏览器不支持css3 animation,因此我们需要根据浏览器来选择不同的动画引擎.如果浏览器支持css3 animation,那么就使用此动画引擎,如果不支持,就使用javascript ...
- Effeckt.css项目：CSS交互动画应用集锦
目前,网上有大量基于CSS转换的实验和示例,但它们都过于分散,而Effeckt.css的目标就是把所有基于CSS/jQuery动画的应用集中起来,例如:弹窗.按钮.导航.列表.页面切换等等. Effe ...
- 基于animation.css实现动画旋转特效
分享一款基于animation.css实现动画旋转特效.这是一款基于CSS3实现的酷炫的动画旋转特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class ...
- vue中使用第三方插件animate.css实现动画效果
vue中使用第三方插件animate.css实现动画效果1.首先先引入第三方类animated.css2.将你所需要动画的标签用包裹起来3.在transition元素中添加enter-active-c ...
- CSS波纹动画
波纹动画 在此运用到css的动画属性,以及背景等相关属性. 值得一说的是下面代码中一直写到的这样一行代码:filter: alpha(opacity=0~100) ,这是考虑到浏览器兼容的问题. IE ...
- css hover 动画 transition:background-color 0.2s,color 0.2s; 外层套内层，正常是 里外层 鼠标上来 外层有hover，如果就想到里层hover触发外层hover，要用外层position 定义绝对定位，内层的hover跳出外层的div，这样视觉上就是两个单独的div，进行内外层联动。
css hover 动画 transition:background-color 0.2s,color 0.2s; 外层套内层,正常是 里外层 鼠标上来 外层有hover,如果就想到里层hover触发 ...
- CSS变形动画
CSS变形动画 前言 在开始介绍CSS变形动画之前,可以先了解一下学习了它之后能做什么,有什么用,这样你看这篇文章可能会有一些动力. 学习了CSS变形动画后,你可以为你的页面做出很多炫酷的效果,如一个 ...
- CSS帧动画
CSS帧动画 基础知识 通过定义一段动画中的关键点.关键状态来创建动画.@Keyframes相比transition对动画过程和细节有更强的控制. 过渡动画是两个状态间的变化,帧动画可以处理动画过程中 ...
- css keyframes动画属性设置
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- css 3 动画
1.transition,其作用是:平滑的改变CSS的值.无论是点击事件,焦点事件,还是鼠标hover,只要值改变了,就是平滑的,就是动画. transition 属性介绍: transition-p ...
随机推荐
- 深挖 Python 元组 pt.1
哈喽大家好,我是咸鱼 好久不见甚是想念,2023 年最后一次法定节假日已经结束了,不知道各位小伙伴是不是跟咸鱼一样今天就开始"搬砖"了呢? 我们知道元组(tuple)是 Pytho ...
- 小提琴图的绘制方法：Python matplotlib实现
本文介绍基于Python中matplotlib模块与seaborn模块,利用多个列表中的数据,绘制小提琴图(Violin Plot)的方法. 小提琴图作为一种将箱型图与核密度图分别所能表达的信 ...
- go使用snmp库查询mib数据
转载请注明出处: OID(Object Identifier)是一种用于标识和唯一命名管理信息库中的对象的标准方式.给定一个OID,可以确定特定的管理信息库对象,并对其进行操作. go语言使用snmp ...
- 探索CPU的黑盒子：解密指令执行的秘密
引言 在我们之前的章节中,我们着重讲解了CPU内部的处理过程,以及与之密切相关的数据总线知识.在这个基础上,我们今天将继续深入探讨CPU执行指令的相关知识,这对于我们理解计算机的工作原理至关重要. C ...
- 浅谈Python异步编程
1. 异步编程概述 异步编程是一种编程范式,用于处理那些需要等待I/O操作完成或者耗时任务的情况.在传统的同步编程中,代码会按照顺序逐行执行,直到遇到一个耗时操作,它会阻塞程序的执行直到操作完成.这种 ...
- IPv4：根据CIDR显示地址范围
最近遇到一个很有意思的点,于是就记录下来. CIDR一般是由IP地址和子网掩码组成,即 IP地址/子网掩码 格式. 子网掩码表示前面地址中的前多少位,为网络位,后面部分代表主机部分.例如:192.16 ...
- DO、DTO、BO、AO、VO、POJO定义和转换的正确姿势
一.引言DO.DTO.BO.AO.VO.POJO的概念看似简单,但是想区分好或者理解好也不容易,本文简单梳理一下. 通过各层POJO的使用,有助于提高代码的可读性和可维护性. ------------ ...
- SQL改写案例2
postgresql 并没有像 oracle .dm 有这么丰富的 hint,在不改 sql 的情况下能干预执行计划. 如果想学好 postgresql.kingbase.MySQL 的sql 调优 ...
- Ubuntu 20.04 使用 vlmscd 搭建 KMS 服务端
前言 为了内网系统激活需要,搭建此客户端. 1. 下载二进制文件 打开项目官网:https://github.com/Wind4/vlmcsd 下载项目二进制文件: 选择对应系统和架构 选择性能较好的 ...
- Linux RN6752 驱动编写
一.概述 关于 RN6752V1 这个芯片这里就不做介绍了,看到这篇笔记的小伙伴应该都明白,虽然说 RN6752V1 芯片是 AHD 信号的解码芯片,但是也可以把芯片当做是一个 YUV 信号的 MIP ...