前端学习-过渡效果

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;
			}

运行效果：

本文地址：https://blog.csdn.net/qq_43368682/article/details/107374396