过渡属性

过毒属性的作用就是在元素的默认样式与最终样式变化之间产生一个过程,在C3中新增了一个属性叫transition
transition: all 1s linear 0s;
注:
01.第一个参数的作用是设置元素身上的哪些属性产生过渡,一般用all表示所有属性都过渡。
02.第二个参数的作用设置过渡需要的时长,单位是s不要省略。
03.第三个参数的作用设置过渡的动画形式,linear表示匀速。
04.第四个参数当前过渡等待多久之后才会执行(延时)即使为0,单位也不能省。
05.hover选择某个元素被鼠标移上时的状态。
06.transition这个属性即可以添加在元素默认状态,也可以添加在鼠标移上的状态,区别就是第二种做法在鼠标离开的时候不会在有过渡变化。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>过滤属性	</title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background-color: green;
				/* 此时我们希望从默认的绿色变成黄色有一个中间的过程,这个时候就可以使用c3中的过渡属性transition */
				transition: width 5s linear 0s;
			}
			/* transition:all 5s linera 1s */
			/* :hover就是一个选择器
			 div:hover 选中的就是div元素被鼠标移上时的状态*/
			div:hover{
				background-color: orange;
				width: 600px;
			}
		</style>
	</head>
	<body>
		<!-- 过渡:一个元素本身默认有一种样式的显示,然后当用户执行一些操作的时候
		 (例如鼠标移上)他的样式会编程另外一种显示,而过渡的作用就是让这个元素
		 的样式在默认和最终展示之间有一个中间的变化过程-->
		<div></div>
	</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值