HTML/CSS日记（十）

最新推荐文章于 2023-03-23 16:43:53 发布

Tmil

最新推荐文章于 2023-03-23 16:43:53 发布

阅读量175

点赞数

分类专栏： HTML/CSS 文章标签： css html

本文链接：https://blog.csdn.net/qq_46067727/article/details/125072602

版权

HTML/CSS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

过渡：

通过过渡可以指定一个属性发生变化时的切换方式，有数值的属性基本都支持过渡效果，过渡时必须是从一个有效数值向另一个有效数值过渡，auto不能实现。

transition-property，指定要执行过渡的属性，如果所有属性都需要过渡，则使用all关键字。transition-duration，指定过渡效果的持续时间。transition-timing-function，过渡的时序函数，制定过渡的执行方式，可选值：ease，默认值，慢速开始，加速再减速；linear，匀速运动；ease-in，加速运动；ease-out，减速运动；ease-in-out，先加速后减速；cubic-bezier(0,0,1,1)通过贝赛尔曲线指定时序函数，里面的四个数值是曲线上两个小球的坐标，https://cubic-bezier.com；steps(2，start/end)，分步执行过渡效果，第一个值指定分几次执行，第二个值：end，在时间结束时执行过渡；start，在时间开始时执行过渡。transition-delay，过渡效果的延迟，等待相应时间后再执行过渡。transition，简写属性，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟，其余值无顺序要求。

动画：

动画和过渡类似，不同的是过渡需要在某个属性发生变化时才能触发，动画可以自动触发动态效果。设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行的每一个步骤。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.b1{
			width: 100px;
			height: 100px;
			background-color: wheat;
			/*要对当前元素生效的关键帧名字*/
			animation-name: test;
			/*动画执行的时间*/
			animation-duration: 3s;
			/*动画的延时*/
			animation-delay: 0.3s;
			/*动画的时序函数*/
			animation-timing-function: ease-in-out;
			/*动画的属性与过渡类似，但要比动画多一些属性*/
			/*动画执行的次数，值为infinite时执行无限次*/
			animation-iteration-count: 3;
			/*动画执行的方向，可选值：
			  normal，默认值from向to执行
			  reverse，to向from运行
			  alternate，from向to运行，重复执行时反向执行
			  alternate-reverse，to向from运行，重复执行时反向执行*/
			animation-direction: alternate;
			/*动画的填充模式，可选值：
			  none，默认值，动画执行完毕元素回到原位置
			  forwards，动画执行完毕元素停止在动画结束时的位置
			  backwards，动画延时等待时，元素就会处于开始位置
			  both，结合forwards、backwards的值*/
			animation-fill-mode: forwards;
			/*animation，简写属性，duration在前，delay在后，其他值无顺序要求*/
		}
		.b1:hover div{
			/*设置动画的执行状态，可选值：
			  running，默认值动画执行
			  paused，动画暂停*/
			animation-play-state: paused;
		}
		/*关键帧的名字定义为test*/
		@keyframes test{
			/*from表示动画的开始位置，也可以使用百分比表示*/
			from{
				margin-left: 0;
			}
			/*to表示动画的结束位置，也可以使用百分比表示*/
			to{
				margin-left: 1000px;
			}
		}
	</style>
</head>
<body>
	<div class="b1"></div>
</body>
</html>

变形：

变形就是指通过CSS来改变元素的形状或位置，变形不会影响页面布局。

transform用来设置元素的变形效果，可选值：

平移：translateX()，x轴方向，正值右移，负值左移、translateY()，y轴方向，正值下移，负值上移、translateZ()，z轴方向，正值前移（变近），负值后移。括号内可以写像素或百分比，百分比是相对于元素自身计算的。如果对元素进行旋转操作，xyz轴也会跟着旋转而改变方向。

/*z轴平移属于立体效果，默认情况下网页不支持透视，如果需要看见效果，必须设置网页的视距(人眼到屏幕的距离)*/
html{
	perspective: 800px;
}
/*或者如下写法(视距写在其他值前面)：*/
.b1{
	transform: perspective(800px);
}

元素居中方式：

/*这种居中方式只适用于元素大小固定，如果不指定宽高，则元素会铺满页面*/

/*.box1{
	background-color: aliceblue;
	position: absolute;
	width: 100px;
	height: 100px;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}*/
.b1{
	background-color: aliceblue;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
}

旋转：rotateX()，正值3D向后旋转（横着转）、rotateY()，正值3D向右旋转（竖着转）、rotateZ()，正值平面向右旋转（平着转）。括号内的值单位可以是deg（角度）或turn（圈）。旋转后，元素的xyz轴也跟着旋转了。

浏览器有透视效果，图片旋转180deg后，可以看到背面（对称效果），如果不希望看到背面可以设置backface-visibility: hidden;（默认值visible）。

缩放：scaleX()，水平方向缩放、scaleY()，垂直方向缩放、scale()，双方向缩放。括号内填放大的倍数。

指定变形的原点：transform-origin：20px 20px; 默认值center。

(作者观看的学习视频：B站尚硅谷）

Tmil

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML/CSS日记（十）

过渡：通过过渡可以指定一个属性发生变化时的切换方式，有数值的属性基本都支持过渡效果，过渡时必须是从一个有效数值向另一个有效数值过渡，auto不能实现。transition-property，指定要执行过渡的属性，如果所有属性都需要过渡，则使用all关键字。transition-duration，指定过渡效果的持续时间。transition-timing-function，过渡的时序函数，制定过渡的执行方式，可选值：ease，默认值，慢速开始，加速再减速；linear，匀速运动；ease-in，加速运动；ea
复制链接

扫一扫