css3基础知识点--过渡效果

最新推荐文章于 2022-05-20 19:00:00 发布

翻滚吧阿俊~~

最新推荐文章于 2022-05-20 19:00:00 发布

阅读量287

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_40283570/article/details/94436196

版权

前端专栏收录该内容

24 篇文章 1 订阅

订阅专栏

CSS3中元素从一种样式转变到另一个的时候，为了使这个过程显得不那么唐突，可以加入一些效果，包括过渡时间、延时时间、过渡的运动方式等，这时就可以用过渡，无需使用flash动画或者JS。

这个过渡有动画的效果，但是需要手动去触发，常常跟鼠标事件结合使用。

1、transition-property 设置过渡的属性，比如：width height background-color
2、transition-duration 设置过渡的时间，比如：1s 500ms（必选，否则不会产生过渡效果）
3、transition-timing-function 设置过渡的运动方式

linear 匀速
ease 开始和结束慢速
ease-in 开始是慢速
ease-out 结束时慢速
ease-in-out 开始和结束时慢速
cubic-bezier(n,n,n,n)
- 比如：cubic-bezier(0.845, -0.375, 0.215, 1.335)
- 曲线设置网站：https://matthewlein.com/ceaser/

4、transition-delay 设置动画的延迟
5、transition: property duration timing-function delay 同时设置四个属性

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css" media="screen">
		.box{
			width: 100px;
			height: 100px;
			background-color: gold;
			/*transition: width 500ms ease 500ms,height 500ms ease 1000ms,background-color 500ms ease 1500ms;*/
			transition: all 500ms ease;
		}
		
		.box:hover{
			width: 200px;
			height: 200px;
			background-color: green;
		}
	</style>
</head>
<body>
	<div class="box"></div>
	
</body>
</html>

应用实例：文字遮罩效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css" media="screen">
		.box{
			width: 200px;
			height: 272px;
			margin:50px auto;
			border: 1px solid #ddd;
			/*超出边框隐藏掉*/
			overflow: hidden;
			/*设置父级盒子和相对定位*/
			position: relative;
		}
		.box img{
			width: 100%;
			height: 272px;
		}

		.info{
			/*相对父级盒子绝对定位，方便控制位置*/
			position: absolute;
			width:200px;
			height:85px;
			/*设置盒子背景色和透明度*/
			background-color:rgba(0,0,0,0.5);
			left: 0;
			top:272px;
			text-indent: 20px;
			color: #fff;
			/*设置过渡效果*/
			transition: all 500ms cubic-bezier(0.845, -0.375, 0.215, 1.335);
			/*多行文字溢出省略号*/
			-webkit-line-clamp:4; 
			display: -webkit-box; 
			-webkit-box-orient:vertical;
			overflow:hidden;
			text-overflow: ellipsis;
		}

		.box:hover .info{
			top:187px;
		}
	</style>
</head>
<body>
	<div class="box">
		<img src="../images/location_bg.jpg" alt="">
		<div class="info">
你若化成风
我幻化成雨
守护你身边
一笑为红颜
你若化成风
我幻化成雨
爱锁在眉间
似水往昔浮流年乖乖 我的小乖乖
你的样子太可爱
追你的男生每个都超级厉害
我却在考虑怎么Say hi
害羞的我这样下去要怎么办
怎么办 爱情甜又酸
我不是Boss
没有超大的House
如果送你Rose
可不可以给我Chance</div>
	</div>
</body>
</html>

翻滚吧阿俊~~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3基础知识点--过渡效果

CSS3中元素从一种样式转变到另一个的时候，为了使这个过程显得不那么唐突，可以加入一些效果，包括过渡时间、延时时间、过渡的运动方式等，这时就可以用过渡，无需使用flash动画或者JS。这个过渡有动画的效果，但是需要手动去触发，常常跟鼠标事件结合使用。1、transition-property 设置过渡的属性，比如：width height background-color2、transi...
复制链接

扫一扫