CSS：transition属性练习

只爱圣女果

已于 2022-11-21 19:29:36 修改

阅读量462

点赞数 2

分类专栏： html+css练习文章标签： css 前端 html

于 2022-11-21 16:05:51 首次发布

本文链接：https://blog.csdn.net/m0_56238419/article/details/127953756

版权

html+css练习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一.transition属性-过渡效果（类似于ppt里的平滑）

参考：transition属性相关

–核心部分
1.为链接a设置transition属性,两个变量元素；color和background-color

transition: all 1.5s ease-in-out;
display: block;先行将a转化成块元素

2.两种状态：变化前和变化后，hover-变化后

a:hover{
			color: #8914B0;
			background-color: aliceblue;
		}

演示：在这里插入图片描述

二.transition属性-进阶

思想：两个元素的变化，一个链接a，一个为a的before伪元素选择器（小箭头图标），鼠标经过，两者位置进行交换。
note 1:链接a的定位需要设置成绝对定位，否则小箭头返回原位置会出现“残影”
如下：在这里插入图片描述

note 2:对a:hover::before 和a::before设置transition具有不同的效果。
这是对a::before设置的效果

因为一开始图标的位置在左边，当鼠标移到链接上方时，设置图标又移到右边，对a::before（小图标）的设置由hover触发，当鼠标移开时，图标回归原位（就是左边），因此对a::before设置transition属性时对整个过程进行transition效果处理，包括归位。
这是对a:hover::before设置的效果

可以理解为对鼠标移到链接a上方这一单一状态进行transition效果处理，不包括鼠标移开后的小图标的归位状态的transition。
note 3：!!!重要的地方，对a设置box-sizing:border-box属性，用display将a变成block块并设置了宽度，当用padding-left改变文字位置时会影响到block块的宽度。使用box-sizing:border-box属性可以将padding和content封装在盒子里。padding大小不再影响实际的block的width。
部分css代码参考如下：

<style type=text/css>
/*		小图标的变化1：一开始的位置在左边*/
	a::before{
	font-family: 'icon-font';
	content:'\e607';
	position:absolute;
	margin-top:1%;
	right:85%;
	position:absolute;
	-webkit-transition:all .5s;
	transition:all .5s;		
}
/*	链接a的状态2：设置过渡动画效果*/
a:hover{
			color: #8914B0;
			background-color: aliceblue;
			padding-left: 10px;
			position: absolute;
			-webkit-transition:all .5s ease-in-out;
			transition:all .5s ease-in-out;
		}
/*	小图标状态2：标触碰到链接时小图标改变小图标位置*/
a:hover::before{
			right:5%;
				}
</style>