详解css3中transition过渡属性

问题?详解css3中transition过渡属性


transition过渡属性是指,当css样式属性发生变化的时候,中间有一个变化的过程,该属性就是为了描述这个过程在呢么变化的。

例子:

	#div1{
			width: 200px;
			height: 200px;
			background-color: blue;
			/* transition css3属性,表示的是过渡 ,表示一个元素的样式,变成另外一个样式,有动画的过程,必须写在原来属性中,ease表示不是匀速的。默认是匀速的,延迟0s开始*/
			transition: all 2s ease 0s;
		}
	 #div1:hover{
			background-color: green;
			width: 0px;
			height: 0px;
			/* border-radius: 50%;
			box-shadow: 2px 2px 2px black; */
			/*transform:旋转属性(度数)
			translateX:移动属性*/
		} 

如上例所示,就可以看到css样式变化的过程,而transition这个属性就描述了,相应的例子中也写了它相关的几个条件,分别是CSS属性的名称 ,过渡时间,过渡方式,延迟时间。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值