纯css设置元素过渡效果

最新推荐文章于 2024-01-28 19:18:07 发布

weixin_30443075

最新推荐文章于 2024-01-28 19:18:07 发布

阅读量771

点赞数

原文链接：http://www.cnblogs.com/liyouwu/p/9721960.html

版权

1.首先，先设置一个div，待会我们使用css3给这个div设置过渡效果。

2.然后给div设置宽高和背景，这里我就设置成200像素，深粉色。

3.接着开始设置transition属性，通过这个属性就可以给元素添加过渡效果。

4.如图所示，第一个参数表示的是要过渡的属性值，第二个参数表示的是过渡时间，这里我就设置背景过渡。

5.接着再设置鼠标经过div元素时背景颜色为暗蓝色。

6.之后，预览div背景过渡效果，当鼠标放在div元素上面就会由深粉色过渡到暗蓝色，过渡时间是五秒钟（这里因为是静态图片，待会我会贴出源码）。

7.如果要设置多个属性过渡可以把它们用逗号隔开，比如要同时设置背景和宽度过渡，则可以这样写。

8.接着再给div:hover设置宽度为400像素。

9.这样，当我们鼠标经过div元素时，背景会过渡，同时div元素的宽度也会由200像素过渡到400像素。.

为了更好参考，我就贴出源代码，直接保存为HTML文件就可以查看效果了哦。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>搜狗指南 </title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background: deeppink;
transition: background 5s,width 5s;
}
div:hover{
background: darkblue;
width: 400px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

原文地址：https://zhinan.sogou.com/guide/detail/?id=316512424205

转载于:https://www.cnblogs.com/liyouwu/p/9721960.html

weixin_30443075

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
纯css设置元素过渡效果

1.首先，先设置一个div，待会我们使用css3给这个div设置过渡效果。2.然后给div设置宽高和背景，这里我就设置成200像素，深粉色。3.接着开始设置transition属性，通过这个属性就可以给元素添加过渡效果。4.如图所示，第一个参数表示的是要过渡的属性值，第二个参数表示的是过渡时间，这里我就设置背景过渡。5.接着再设置鼠标经过div元素时背景颜色为暗蓝色。6.之后...
复制链接

扫一扫