CSS3中的元素过渡属性transition

最新推荐文章于 2023-05-08 20:07:15 发布

如梦灬初醒

最新推荐文章于 2023-05-08 20:07:15 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/TXW6666/article/details/105743498

版权

过渡transition

如果当鼠标移动上div 使盒子变大并改变自己的颜色以及向右移动50px 向下移动50px

初始状态
在这里插入图片描述
鼠标移上的状态

以下是实现上面效果的代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			div {
			    width: 100px;
			    height: 100px;
			    background-color: royalblue;
			    position: absolute;
			}
			div:hover {
			    width: 200px;
			    height: 200px;
			    top: 100px;
			    left: 100px;
			    background-color: cadetblue;
		</style>
	</head>
	<body>
		<div></div>

	</body>
</html>

但是如果我需要这些变化有一个过度的效果如果是使用js编写是有点复杂的而css3给我们提供了一个过渡的属性transition属性

W3C标准中对css3的transition这是样描述的：“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性
因此只需要在元素的样式下加上
transition: all 1s; /all表示监控所有的变化/

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			div {
			    width: 100px;
			    height: 100px;
			    background-color: royalblue;
			    position: absolute;
			     transition: all 1s; /*all表示监控所有的变化*/
			}
			div:hover {
			    width: 200px;
			    height: 200px;
			    top: 100px;
			    left: 100px;
			    background-color: cadetblue;
		</style>
	</head>
	<body>
		<div></div>

	</body>
</html>

在这里插入图片描述
如果是使用js需要写一大推使用css3 只需要几行样式而且脚本方法改变多个元素样式可能会产生冲突元素与元素之间互不影响

transition 有四个属性

transition-property：指定过渡或动态模拟的css属性
transition-duration：指定过渡所需要的时间
transition-timing-function：指定过渡函数
transition-delay：指定开始出现的延迟时间
可以使用复合写法

transition-property 指定属性产生过渡

值	描述
all 默认值	所有属性都将获得过渡效果。
none	没有属性会获得过渡效果。
property	定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。

all是所有属性都将获得过渡效果。这个上面我们已经演示过下面看看多个属性的写法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			div {
			    width: 100px;
			    height: 100px;
			    background-color: royalblue;
			    position: absolute;
			    /*transition: all 1s; */ /*all表示监控所有的变化*/
			   transition: width  1s ,top 1s;/*指定宽度和top产生过渡*/
			}
			div:hover {
			    width: 200px;
			    height: 200px;
			    top: 100px;
			    left: 100px;
			    background-color: cadetblue;
		</style>
	</head>
	<body>
		<div></div>

	</body>
</html>

在这里插入图片描述
从这我们可以看出只有width属性和top属性产生了过度效果，其他的都是直接改变的

当然也不是所有的样式都可以过渡有的是没有过度效果的参与过渡的属性有

color
visibility
opacity
vertical-align
z-index
clip
width/height
top/bottom/left/right
background-color/position
border-top/bottom/left/right-color/width
border/letter/word-spacing
font-size/weight
line-height
margin/padding-top/bottom/left/right
max/min-height/width
outline-color/width
text-indent/shadow

transition-duration渐变时间（必选）

代表几秒钟内过渡如果是时间为0则没有过度效果
比如我需要 top的变化在10内完成只需要改变 top 时间

transition: width  1s ,top 10s;/*指定宽度和top产生过渡*/

在这里插入图片描述
width 属性的过度完成的很快但是top的过都就是一个很缓慢的过程

transition-delay 控制动画的延迟（可选）

如果你想要延迟过渡，也就是说如果我们想要在过渡前停一小会儿，那么就在这个复合属性的后添加我们需要延迟的时间这个属性可以对多个不同的属性进行设置、

比如我们鼠标移上width在10s后开始产生过渡 top在5s后
那么

transition: width  1s 10s,top 5s 3s ;

产生的效果：
在这里插入图片描述

transition-timing-function 指定transition效果的转速曲线（也就是过度的速度变化）

属性	描述
linear	线性过渡，等价贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease（默认）	平滑过渡，等价贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in	由慢到快，等价贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out	由快到慢，等价贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out	由慢到快再到慢，等价贝塞尔曲线(0.42, 0, 0.58, 1.0)
step-start	等同 steps(1, start)
step-end	等同 steps(1, end)

cubic-bezier(n,n,n,n): 自定义贝塞尔曲线的效果，其中的四个参数为从0到1的数字。

如果这些属性里都没有你需要的你可以在浏览器控制台调试你所需要的贝塞尔曲线的效果

在这里插入图片描述

下面是使用 cubic-bezier(0.07, 1.03, 0.98, -0.41) 产生的效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			div {
			    width: 100px;
			    height: 100px;
			    background-color: royalblue;
			    position: absolute;
			    /*transition: all 1s;*/ 
			    transition: width 1s cubic-bezier(0.07, 1.03, 0.98, -0.41) ;
			}
			div:hover {
			    width: 400px;
			    
		</style>
	</head>
	<body>
		<div></div>

	</body>
</html>

在这里插入图片描述

如梦灬初醒

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS3中的元素过渡属性transition

过渡transition如果当鼠标移动上div 使盒子变大并改变自己的颜色以及向右移动50px 向下移动50px初始状态鼠标移上的状态以下是实现上面效果的代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title>...
复制链接

扫一扫