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

作者：袖梨 2022-06-25

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3过渡效果（transition）的使用实例</title>
<style>
html {
	margin-bottom: 1px;
	overflow-y: scroll;
	height: 100%;
}

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>
</head>

<body>
<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>
</body>
</html>

</td>
	  </tr>
	</table>

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

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

相关文章

精彩推荐