CSS3过渡transition效果实例介绍

作者：佚名字体：[增加减小] 来源：互联网时间：2017-08-06

本文主要包含CSS3,过渡,transition等相关知识,佚名希望在学习及工作中可以帮助到您

本文实例为大家分享了CSS3过渡transition效果，供大家参考，具体内容如下

效果图：

实现代码：

transition.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Transition</title>
<style>
#block {
width: 400px;
height: 300px;
background-color: #69C;
margin: 0 auto;
transition: background-color 1s, width 0.5s ease-out;
-webkit-transition: background-color 1s, width 0.5s ease-out;
}
#block:hover {
background-color: red;
width: 600px;
}
</style>
</head>
<body>
<div id="block">
</div>
</body>
</html>

transitionDemo.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TransitionDemo</title>
<style>
#wrapper {
width: 1024px;
margin: 0 auto;
}
.progress-bar-bg {
width: 960px;
/*background-color: aliceblue;*/

您可能想查找下面的文章:

相关文章

文章分类

最近更新的内容