前端学习-过渡效果

CSS3中过渡动画

1.重点是设置过渡的速度、时间、属性、延迟时间

	#d1{ 				width: 100px; 				height: 100px; 				background: aquamarine; 				/*过渡效果*/ 				/* transition: width 2s; */ 				transition-property:width,background;/* 过渡属性 */				              				transition-duration: 2s;/*过渡时间长度*/ 				transition-timing-function: ease; 				/* 过渡速度 ease:(默认值)从慢到快再慢 				 ease-in慢进 				 ease-out慢出 				linear:匀速 				或者自定义复制贝塞尔曲线cubic-bezier(1, 0.07, 0, 1.38)*/                 transition-delay: 3s;/*过渡延迟,开始变化之前的时间*/ 			} 			#d1:hover{ 				width:700px; 				height: 100px; 				background: #7FFFD4; 			}  

自定义复制贝塞尔曲线cubic-bezier(1, 0.07, 0, 1.38)可以获得该曲线的动态效果。
前端学习-过渡效果
分开设定变化速度

transition-property:width,background;/* 过渡的属性,此时宽度和背景同时开始变化 */ transition-duration: 2s,10s;/*过渡时间长度*/ 

一次性设置所有

transition-property: all 

上述代码效果即为以下图的变化
前端学习-过渡效果
前端学习-过渡效果
实验操作:小米悬浮操作,光标放上去有悬浮效果

.d1{ 				width: 300px; 				height: 400px; 				margin: 20 auto; 				background: skyblue; 				box-shadow: 0 0 0px #ccc; 				transition: all 0.5s; 			} 			.d1:hover{ 				/*水平 竖直 模糊 阴影颜色*/ 				box-shadow: 0px 5px 10px #999; 			} 

运行效果:
前端学习-过渡效果

区块链毕设网(www.qklbishe.com)全网最靠谱的原创区块链毕设代做网站
部分资料来自网络,侵权联系删除!
资源收费仅为搬运整理打赏费用,用户自愿支付 !
qklbishe.com区块链毕设代做网专注|以太坊fabric-计算机|java|毕业设计|代做平台 » 前端学习-过渡效果

提供最优质的资源集合

立即查看 了解详情