css3-过渡效果transition、动画效果animation、@keyfarmes规则

最新推荐文章于 2024-05-13 14:34:46 发布

¡Venceremo

最新推荐文章于 2024-05-13 14:34:46 发布

阅读量365

点赞数

分类专栏： CSS3 文章标签：前端

本文链接：https://blog.csdn.net/weixin_47295886/article/details/125824806

版权

CSS3 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

过渡效果transition 当前元素从一种状态过度到另一种状态（发生两个状态的变化）

将元素的某个属性的一个值在指定时间内过度到另一个值

连用：属性名持续时间过渡方法

下面是它的子属性

                transition-property: ;属性名（代表作用的哪一个属性|哪几个属性逗号隔开|所有属性all）
               transition-duration: ;持续时间 s ms
               transition-timing-function: ;过度使用的方法，函数，变换过程是：快慢快的方式还是先慢后宽 linear匀速 ease慢快慢 ease-in慢快 ease-out 快慢 ease-in-out 慢快慢
               transition-delay: ;

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>首页</title>
		<style type="text/css">
		
			#original{
				width: 100px;
				height: 50px;
				line-height: 50px; /*让文本垂直居中*/
				border-radius: 5px; /*圆角*/
				/*原始的状态*/
				color: black;/*文字颜色*/
				background-color: yellow;
				transition: all 1s linear; /*所有属性1s之后过度*/
			}
		
			#original:hover{ /*终止状态*/
				color: white;/*文字颜色*/
				background-color: black;
				
			}
		</style>
		
	</head>

	<body>
		
			<div id="original">web前端学习</div>


	</body>

</html>

动画效果animation:让一个元素完成若干种状态之间的一个转换

                animation-name: ; 填写前面@keyfarmes规则里面的动画名
               animation-duration: ;动画完成的时间 s ms
               animation-timing-function: ;规定动画的速度曲线linear匀速 ease慢快慢 ease-in慢快 ease-out 快慢 ease-in-out 慢快慢
               animation-play-state:当前动画的播放状态;running正在播放 pasued播放完成

@keyfarmes规则

规则前面有一个符号关键帧

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>首页</title>
		<style type="text/css">
			/*keyframes是我们定义的规则*/ 
			@keyframes mycolor{ /*mycolor是我们定义的动画的名字*/
				/*里面是我们定义的动画的关键帧*/
				/*每个关键帧在定义的时候都需要一个名字 这个名字通常使用百分比
				 100%播放完 0%是动画最开始的时候 其他是中间状态*/
				0% {background-color: red;}	/* {里面是某一个属性的取值在当前关键帧下}*/
				50% {background-color: green;}
				100% {background-color: black;} /*在之后的animation中使用此规则*/
			}

			#original{
				width: 100px;
				height: 50px;
				line-height: 50px; /*让文本垂直居中*/
				border-radius: 5px; /*圆角*/
				border: 1px solid black;
			}
		
			#original:hover{ /*终止状态*/
				animation: mycolor 5s linear; /*前面规则中使用的名字 过度的时间 变换的函数匀速*/
				
			}
		</style>
		
	</head>

	<body>
			<div id="original">web前端学习</div>
	</body>

</html>