CSS过渡

最新推荐文章于 2020-04-28 21:44:38 发布

小鱼干.

最新推荐文章于 2020-04-28 21:44:38 发布

阅读量147

点赞数

分类专栏： CSS随手记文章标签： CSS

本文链接：https://blog.csdn.net/weixin_40326100/article/details/88730476

版权

CSS随手记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

什么是过渡？

使用CSS属性值，在一段时间内进行平缓的变化效果

过渡的编写位置

将过渡放在触发操作（hover）和元素样式的区别：

将过渡放在元素声明的样式中，既管去，又管回

将过渡放在触发操作（hover）的样式中，既管去，不管回

1：指定过渡属性

作用：指定哪个属性值在变化的时候需要使用过渡效果来体现

属性：transition-property

取值：

1：all 能使用过渡的属性，一律用过渡体现

2：具体属性名称：

例如：过渡背景颜色：transition-property: background;，例如：过渡边框的圆角：transition-property: border-radius;

transition-property:all;       /*所有属性都过渡，包括图片，边框，字体等*/

允许使用过渡效果的属性：

1：颜色属性

2：取值为数字的属性

3：转换属性

4：阴影属性

5：渐变属性

6：visibility属性

2：指定过渡时长

作用：指定在多长的时间内完成过渡的操作

属性：transition - duration

取值：以 s 或 ms 为单位的数值， 1000ms = 1s

transition-duration:2s;     /*2秒过渡*/

3：指定过渡的速度时间曲线函数

属性：transition-timing-function

取值：

1：ease：默认值，慢速开始，快速变快，慢速结束

2：linear：匀速

3：ease - in：慢速开始，加速结束

4：ease - out：快速开始，慢速结束

5：ease - in - out：慢速开始和结束，中间先加速后减速

transition-timing-function:linear;     /*匀速过渡*/

4：指定过渡延时时间

属性：transition - delay

取值：以 s 或者 ms 为单位的数值

transition-delay:2s;      /*延时 2s*/

5：过渡的缩写：

transition: 指定属性，过渡时间，曲线函数，延时

示例：图片和div加载过渡效果源码

<style>
		#d1{
			width: 200px;
			height: 200px;
			background-color: yellow;
			
			/*过渡效果，当鼠标悬停时，触发此过渡，当鼠标离开时，匀速返回原状*/
			transition-property:all; /*所有属性都过渡*/
			transition-duration:2s; /*2秒过渡*/
			transition-timing-function:linear; /*匀速过渡*/
		}
		#d1:hover{ /**/
			background-color: skyblue;
			
		}
		#img{
			transition-property:all; /*所有属性都过渡*/
			transition-duration:2s; /*2秒过渡*/
			transition-timing-function:linear; /*匀速过渡*/
			transition-delay:2s;  /*延时 2s*/

		}
		#img:hover{
			transform:scale(1.5);		/*缩放1.5倍*/

		}
		/*过渡的编写位置
			将过渡放在元素声明的样式中，既管去，又管回*/
	</style>
</head>
<body>
	<div id = "d1"></div>
	<img src="ding.png" alt="钉钉" id = "img">

小鱼干.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS过渡

什么是过渡？使用CSS属性值，在一段时间内进行平缓的变化效果过渡的编写位置将过渡放在触发操作（hover）和元素样式的区别：将过渡放在元素声明的样式中，既管去，又管回将过渡放在触发操作（hover）的样式中，既管去，不管回
复制链接

扫一扫