CSS3过渡效果（transition）的使用实例

时间：2022-06-25 22:29:15 编辑：袖梨来源：一聚教程网

提示：您可以先修改部分代码再运行

body {
	
	background: #444;
	padding: 20px 0 0 0;
	color: white;
	margin: 0 auto;
}

a, a:link, a:visited {
	color: lightblue;
	-webkit-transition: color .4s linear;
	-moz-transition: color .4s linear;
	-o-transition: color .4s linear;
	-ms-transition: color .4s linear;
	transition: color .4s linear;
}

a:hover, a:focus {
	color: white;
}

p {
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	width: 45%;
	margin-left: auto;
	margin-right: auto;
}

p.bottom {
	clear: both;
	padding-top: 40px;
}

#container {
		overflow: hidden;
		padding: 0 0 60px 6px;
}

h1 {
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
			font-weight: normal;
}
.ce{ text-align:center;  line-}
.co{ color:#F00;}
.dco{ color:#F6C; border:1px dashed #FFF; font-weight:normal;}
.box {
	
	
	background: #222;
	margin: 0 auto;
	-webkit-transition: width 2s ease, height 2s ease;
	-moz-transition: width 2s ease, height 2s ease;
	-o-transition: width 2s ease, height 2s ease;
	-ms-transition: width 2s ease, height 2s ease;
	transition: width 2s ease, height 2s ease;
}

.box:hover {
	
	
}
</style>

<div class="ce co">注意，请使用FF Chrome等支持CSS3样式的浏览器观看效果</div>
<div class="box"></div>
<div class="ce">鼠标移到上面方框查看校果</div>
<div class="ce co">CSS样式代码如下：</div>
<div class="dco">
  <p>.box {<br>
    <br>
    <br>
    background: #222;<br>
    margin: 0 auto;<br>
    -webkit-transition: width 2s ease, height 2s ease;<br>
    -moz-transition: width 2s ease, height 2s ease;<br>
    -o-transition: width 2s ease, height 2s ease;<br>
    -ms-transition: width 2s ease, height 2s ease;<br>
    transition: width 2s ease, height 2s ease;<br>
    }</p>
  <p>.box:hover {<br>
    <br>
    <br>
    }</p>
</div>

提示：您可以先修改部分代码再运行

推荐专题

最新下载

热门教程

CSS3过渡效果（transition）的使用实例

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程