35、实例应用transition-property属性实现过渡之指定允许过渡的属性

最新推荐文章于 2023-01-05 09:56:27 发布

xuxianmei

最新推荐文章于 2023-01-05 09:56:27 发布

阅读量795

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/tlxxm/article/details/36931655

版权

CSS 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>应用transition-property属性实现过渡之指定允许过渡的属性</title>
<style type="text/css">
.preview
{
	background:url(images/style0.gif) no-repeat;
	position:absolute;
	top:0px;
	left:0px;
	width:240px;
	height:210px;
	border:1px #000000 dashed;}
#xy
{
	background:url(images/style0.gif) no-repeat;
	
		/*设置允许过渡的属性*/
	-moz-transition-property:-moz-transform:rotate(30deg),top;
	-o-transition-property:-moz-transform:rotate(30deg),top;
	-webkit-transition-property:-moz-transform:rotate(30deg),top;
	
	/*设置持续时间*/
	-webkit-transition-duration:1.5s,1.5s;	
	-moz-transition-duration:1.5s,1.5s;
	-webkit-transition-duration:1.5s,1.5s;
	
		/*设置过渡动画类型（速度）*/
	-moz-transition-timing-function:ease-in,ease-in;
	-webkit-transition-timing-function:ease-in,ease-in;
	-o-transition-timing-function:ease-in,ease-in;
	
	/*设置过渡的延迟时间（延迟多少时间才开始过渡）*/
	-moz-transition-delay:1s;
	-webkit-transition-delay:1s;
	-o-transition-delay:1s;
	
	
	top:0px;
	left:100px;
	border:1px #000000 dashed;}
#xy:hover
{
	top:200px;
	/*设置2D转换*/
	-moz-transform:rotate(30deg);
	-webkit-transform:rotate(30deg);
	-o-transform:rotate(30deg);
	
	}

</style>
</head>

<body>
<div id="wall"></div>

<div class="preview">
</div>
<div class="preview" id="xy">
</div>


</body>
</html>