12.21学习内容（1）

最新推荐文章于 2024-06-15 08:45:00 发布
最新推荐文章于 2024-06-15 08:45:00 发布
阅读量54 收藏
点赞数 1
文章标签： 学习 css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_67724481/article/details/128401993
版权

1 过渡

CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P5D6bpec-1671627261571)(MD文档.assets\transition.gif)]

1.1 它是如何工作的？

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

  • 指定要添加效果的CSS属性
  • 指定效果的持续时间。

示例代码如下：

div {
	width: 100px;
	height: 100px;
	background: red;
	transition: width 2s;
	-webkit-transition: width 2s;
	-o-transition: width 2s;
}

如果未指定的期限，transition 将没有任何效果，因为默认值是 0。

定的CSS属性的值更改时效果会发生变化。一个典型CSS属性的变化是用户鼠标放在一个元素上时：

div:hover {
	width: 200px;
}

示例效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hb9hBsXK-1671627261573)(MD文档.assets\transition-1.gif)]

1.2 多项改变

要添加多个样式的变换效果，添加的属性由逗号分隔。

示例代码如下：

div.transition {
	width: 100px;
	height: 100px;
	color: white;
	text-align: center;
	transform: rotateZ(0deg);
	background: red;
	transition: width 2s, height 2s, transform 2s;
	-webkit-transition: width 2s, height 2s, transform 2s;
	-o-transition: width 2s, height 2s, transform 2s;
}
div.transition:hover {
	width: 300px;
	height: 300px;
	transform: rotateZ(45deg);
}

示例效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oyqfzigg-1671627261574)(MD文档.assets\transition-2.gif)]

1.3 速度曲线

transition-timing-function 属性规定过渡效果的速度曲线。

transition-timing-function 属性可接受以下值：

  • ease - 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
  • linear - 规定从开始到结束具有相同速度的过渡效果
  • ease-in -规定缓慢开始的过渡效果
  • ease-out - 规定缓慢结束的过渡效果
  • ease-in-out - 规定开始和结束较慢的过渡效果
  • cubic-bezier(n,n,n,n) - 允许您在三次贝塞尔函数中定义自己的值

下面的例子展示了可以使用的一些不同的速度曲线：

div {
	width: 200px;
	height: 50px;
	color: white;
	text-align: center;
	background: red;
	transition: width 2s;
	-webkit-transition: width 2s;
	-o-transition: width 2s;
}
div:hover {
	width: 300px;
}
.timing1 {
	transition-timing-function: linear;
}
.timing2 {
	transition-timing-function: ease;
}
.timing3 {
	transition-timing-function: ease-in;
}
.timing4 {
	transition-timing-function: ease-out;
}
.timing5 {
	transition-timing-function: ease-in-out;
}

示例效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QSccfOiQ-1671627261576)(MD文档.assets\transition-3.gif)]

1.4 延迟过渡效果

transition-delay 属性规定过渡效果的延迟（以秒计）。

下例在启动之前有 1 秒的延迟：

div {
  transition-delay: 1s;
}

示例效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-J2M7tTEl-1671627261577)(MD文档.assets\transition-4.gif)]

1.5 简写属性

实例：

div {
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 2s;
}

以上样式可简写为：

div {
  transition: width 2s linear 2s;
}

2 动画

CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-760ToYpN-1671627261578)(MD文档.assets\animation.gif)]

2.1 什么是 CSS 动画？

动画使元素逐渐从一种样式变为另一种样式。

您可以随意更改任意数量的 CSS 属性。

如需使用 CSS 动画，您必须首先为动画指定一些关键帧。

关键帧包含元素在特定时间所拥有的样式。

2.2 @keyframes 规则

如果你在 @keyframes 规则中指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式。

要使动画生效，必须将动画绑定到某个元素。

示例效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k6wlIKqC-1671627261580)(MD文档.assets\keyframes-1.gif)]

示例代码如下：

/* 动画代码 */
@keyframes example1 {
	from {
		background-color: red;
	}
	to {
		background-color: yellow;
	}
}
/* 应用动画的元素 */
.example1 {
	animation-name: example1;
	animation-duration: 4s;
}

animation-duration 属性定义需要多长时间才能完成动画。如果未指定 animation-duration 属性，则动画不会发生，因为默认值是 0s（0秒）。

在上面的例子中，通过使用关键字“from”和“to”（代表 0％（开始）和 100％（完成）），我们设置了样式何时改变。

你也可以使用百分比值。通过使用百分比，你可以根据需要添加任意多个样式更改。

下面的例子将在动画完成 25％，完成 50％ 以及动画完成 100％ 时更改 <div> 元素的背景颜色：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NQ1xtJZq-1671627261582)(MD文档.assets\keyframes-2.gif)]

示例代码如下：

/* 动画代码 */
@keyframes example2 {
	0% {
		background-color: red;
	}
	25% {
		background-color: yellow;
	}
	50% {
		background-color: blue;
	}
	100% {
		background-color: green;
	}
}
/* 应用动画的元素 */
.example2 {
	animation-name: example2;
	animation-duration: 4s;
}

下面的例子将在动画完成 25％，完成 50％ 以及动画完成 100％ 时更改背景颜色和 <div> 元素的位置：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l34wLEQT-1671627261583)(MD文档.assets\keyframes-3.gif)]

实例代码如下：

/* 动画代码 */
@keyframes example3 {
	0% {
		background-color: red;
		left: 0px;
		top: 0px;
	}
	25% {
		background-color: yellow;
		left: 200px;
		top: 0px;
	}
	50% {
		background-color: blue;
		left: 200px;
		top: 200px;
	}
	75% {
		background-color: green;
		left: 0px;
		top: 200px;
	}
	100% {
		background-color: red;
		left: 0px;
		top: 0px;
	}
}
/* 应用动画的元素 */
.example3 {
	animation-name: example3;
	animation-duration: 4s;
}

2.3 延迟动画

animation-delay 属性规定动画开始的延迟时间。

示例1：

div {
	width: 100px;
	height: 100px;
	position: relative;
	background-color: red;
}
@keyframes example1 {
	from {
		background-color: red;
	}
	to {
		background-color: yellow;
	}
}
.example1 {
	animation-name: example1;
	animation-duration: 4s;
	animation-delay: 2s;
}

负值也是允许的。如果使用负值，则动画将开始播放，如同已播放 N 秒。

示例2：

@keyframes example2 {
	from {
		background-color: red;
	}
	
	to {
		background-color: yellow;
	}
}
.example2 {
	animation-name: example2;
	animation-duration: 4s;
	animation-delay: -2s;
}

示例效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9ext7dhC-1671627261585)(MD文档.assets\keyframes-4.gif)]

2.4 运行次数

animation-iteration-count 属性指定动画应运行的次数。

实例：

@keyframes example {
	from {
		background-color: red;
	}
	to {
		background-color: yellow;
	}
}
div {
	width: 100px;
	height: 100px;
	position: relative;
	background-color: red;
	animation-name: example;
	animation-duration: 4s;
	animation-iteration-count: 3;
}

2.5 反向或交替运行动画

animation-direction 属性指定是向前播放、向后播放还是交替播放动画。

animation-direction 属性可接受以下值：

  • normal - 动画正常播放（向前）。默认值
  • reverse - 动画以反方向播放（向后）
  • alternate - 动画先向前播放，然后向后
  • alternate-reverse - 动画先向后播放，然后向前

实例：

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;
}

2.6 速度曲线

animation-timing-function 属性规定动画的速度曲线。

animation-timing-function 属性可接受以下值：

  • ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）
  • linear - 规定从开始到结束的速度相同的动画
  • ease-in - 规定慢速开始的动画
  • ease-out - 规定慢速结束的动画
  • ease-in-out - 指定开始和结束较慢的动画
  • cubic-bezier(*n*,*n*,*n*,*n*) - 运行您在三次贝塞尔函数中定义自己的值

下面这些例子展示了可以使用的一些不同速度曲线：

div {
	width: 200px;
	height: 50px;
	color: white;
	text-align: center;
	position: relative;
	background-color: red;
	animation-name: example;
	animation-duration: 4s;
}
@keyframes example {
	from {
		background-color: red;
	}
	to {
		background-color: yellow;
	}
}
.example1 {
	animation-timing-function: linear;
}
.example2 {
	animation-timing-function: ease;
}
.example3 {
	animation-timing-function: ease-in;
}
.example4 {
	animation-timing-function: ease-out;
}
.example5 {
	animation-timing-function: ease-in-out;
}

示例效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ct7e7OB0-1671627261586)(MD文档.assets\keyframes-5.gif)]

2.7 填充模式

CSS 动画不会在第一个关键帧播放之前或在最后一个关键帧播放之后影响元素。animation-fill-mode 属性能够覆盖这种行为。

在不播放动画时（在开始之前，结束之后，或两者都结束时），animation-fill-mode 属性规定目标元素的样式。

animation-fill-mode 属性可接受以下值：

  • none - 默认值。动画在执行之前或之后不会对元素应用任何样式。
  • forwards - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。
  • backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。
  • both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。

实例：

@keyframes example {
	from {
		background-color: red;
	}
	to {
		background-color: yellow;
	}
}
div {
	width: 100px;
	height: 100px;
	position: relative;
	background-color: red;
	animation-name: example;
	animation-duration: 4s;
	animation-fill-mode: forwards;
}

2.8 简写属性

实例：

div {
  animation-name: example;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

以上样式可以简写为：

div {
  animation: example 4s linear 2s infinite alternate;
}

3 章节总结

  • 过渡
  • 动画
    ve;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-fill-mode: forwards;
    }

[^解析]: 这个实例中，&lt;div&gt; 元素在动画结束时保留来自最后一个关键帧的样式值。

### 3.8 简写属性

实例：

```css
div {
  animation-name: example;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

以上样式可以简写为：

div {
  animation: example 4s linear 2s infinite alternate;
}
王梦旭707
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
SVN服务端安装和仓库的创建.zip_12.21_blankrj1
09-24
BIOS_Acer_v2.21_Windows, 0 , 2014-01-27 BIOS_Acer_v2.21_Windows\Q5WV1221.exe, 8149073 , 2013-12-16 BIOS_Acer_v2.21_Windows\Readme.txt, 190 , 2014-01-27
MoShiPiPei.rar_12.21
09-22
有一串10000位数的主串由1、2、3、4四位数随机获得，n位模式串是指有4的n次方个模式串，如2位模式串有：11、12、13、14、21、22、23、24、31、32、33、34、41、42、43、44等16个数组成。现在进行模式匹配，假设主串...
FFT.rar_12.21
09-20
FFT变换结果为对称型，矩形窗是使信号突然截断，旁瓣会很大，且衰减较慢，旁瓣的第一个负 峰值为主瓣的21％，第一个正峰值为主瓣的12.6％，第二个负峰值为主瓣的9％，效果一般，泄漏较大。
Els.zip.rar_12.21
09-24
* 对于如何选择合适类还没有经验，这里直接在JFrame上设计paint()方法将所有内容绘制。没有掌握面向对象编程还- -！ * 建模上借鉴了小时候玩的那中手柄游戏，将主面板划分为12*20的小格；后来为了设计碰撞，又改...
gaa.rar_12.21_GAA
09-23
题目是：max f (x1, x2) = 21.5 + x1&#8226 sin(4pi*x1) + x2&#8226 sin(20pi*x2) s.t. -3.0 <= x1 <= 12.1 4.1 <= x2 <= 5.8
如何学习Golang语言!
FengyangCoder的博客
06-09 453
起源与设计哲学：Go语言由Robert Griesemer、Rob Pike和Ken Thompson三位Google工程师设计，旨在解决现代编程中的一些常见问题，如编译速度、运行效率和并发编程。主要特点：Go语言的语法简单、编译速度快、运行效率高，支持静态类型和内存安全，具有垃圾回收功能，并且原生支持并发编程。
STM学习记录（四）———中断及NVIC
qq_63556165的博客
06-14 520
一个学习32单片机的小白~ 有问题评论或私信指出~提示：以下是本篇文章正文内容，下面案例可供参考在主程序运行过程中，出现了特定的中断触发条件（中断源），使得CPU暂停当前正在运行的程序，转去处理中断程序，处理完成后又返回被暂停的位置继续执行。1.中断就相当于我们人在处理事情时会先选择重要的事情去做处理完之后回到被打断的事情继续执行。
扩展学习|风险管理的文献综述汇总（持续更新向）
weixin_63253486的博客
06-10 788
本片博客主要介绍风险管理领域本人所看到的一些有意思的文章，并就风险管理领域的相关内容进行一个分享。
[ue5]建模场景学习笔记（5）——必修内容可交互的地形，交互沙（3）
qq_40128113的博客
06-09 319
5.第一想法直接clear掉，但直接clear会把想要保留的痕迹一并去除，跑起来就没有痕迹！所以不行，要做一个转载，先把痕迹保留在一个载体上，清楚原来痕迹，用sandsave表示，再把这个载体的痕迹保存回原来rt，这样之前的痕迹被清空了，只留下了保存在载体上的部分，正好符合我们想要的部分。我们现在已经能够让这片地形出现在任意地方，只要角色走在这片地形上，就能够产生痕迹，但这片区域总是需要人工指定，又无法把这片区域无限扩大（显存爆炸），因此尝试使角色无论走到哪里都能产生痕迹。否则绘制不到画板上。
【电子信息工程专业课】学习记录
共同进步！
06-12 285
- # **数字信号处理** * ## 离散时间信号与系统 + ### 周期延拓 一个连续时间信号经过理想采样后，其频谱将沿着频率轴以采样频率Ωs = 2π / T 为间隔而重复。 + ### 混频 各周期的延拓分量产生频谱交替的现象 + ### 奈奎斯特采样定理 fs > 2fh
Qt---pro文件的学习
weixin_51883798的博客
06-11 459
【代码】Qt---pro文件的学习。
怎么学习汇川Codesys PLC教程？
NAV3055的博客
06-12 302
各位好，我在B站和抖音上都有发布视频的，搜索我的名称“阿凡工控分享”即可。在CSDN上发表文章也是想把我的一点见解和经验分享出来，进一步的方便大家进行学习。
Linux入门学习（2）
binhyun的博客
06-09 914
Linux相关的指令，删除文件，删除文件夹，进入目录，家目录，用户类型等等
Nginx学习笔记（十）如何配置HTTPS协议？（公网）
ACGkaka的博客
06-10 708
Nginx学习笔记（十）如何配置HTTPS协议？（公网）
网络学习(15)|有http/1为什么还会有http/2
weixin_44435110的博客
06-12 264
HTTP/1（具体来说是HTTP/1.1）在互联网的早期阶段是非常成功的，它标准化了客户端和服务器之间的请求-响应模型，使得Web能够迅速扩展和普及。然而，随着Web的复杂性和流量的增加，HTTP/1.1的一些设计上的局限性开始显现，导致了性能瓶颈和效率问题。
Vue3学习日记（day2）
BrianGriffin的博客
06-10 985
对于官方文档的后续零碎化知识，需要理解后续知识并通过例子来进行练习。
DevOps学习回顾01-技能发展路线-岗位能力-体系认知(射箭和拉弓的区别)
最新发布
何所有的博客
06-15 1425
关于DevOps的职业内容探索~
【Android】Android系统性学习——Android系统架构
xuanyulevel6的博客
06-12 887
部分内容参考《Android进阶解密》 – 刘望舒。
eNSP学习——配置前缀列表
TXFBAP的博客
06-11 1045
理解前缀列表的应用场景 掌握前缀列表的配置方法 理解前缀列表与ACL的区别
Directory is not readable: D:\tools\Hadoop\hadoop-2.7.7\data\dfs\datanode\current\BP-490180523-172.16.12.21-1692258474572
08-29
请注意，以上是基于提供的引用内容的推测，具体解决方法可能会因具体环境而有所不同。建议您按照以上步骤来解决问题，并在遇到其他问题时及时查找相关资料或咨询专业人士。<span class="em">1</span><span class="em...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值