CSS3过渡transition效果实例介绍

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

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

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

效果图：

实现代码：

transition.html

</div>

<!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>

</div> </div>

transitionDemo.html

</div>

<!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;*/

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

相关文章

2017-06-02CSS3新属性transition-property transform box-shadow实例学习
2017-06-02CSS3中的注音对齐属性ruby-align用法指南
2017-06-02css3发光搜索表单分享
2017-06-02CSS3教程(5):网页背景图片
2017-06-02CSS3 please 跨浏览器的CSS3产生器
2017-06-02CSS3弹性伸缩布局之box布局
2017-06-02CSS3教程(6):创建网站多列
2017-06-02CSS3利用text-shadow属性实现多种效果的文字样式展现方法
2017-06-02HTML5时代CSS设置漂亮字体取代图片
2017-06-02CSS3实现10种Loading效果