css3动态效果

最新推荐文章于 2024-08-24 04:32:43 发布

boowen

最新推荐文章于 2024-08-24 04:32:43 发布

阅读量734

点赞数

分类专栏： PHP

本文链接：https://blog.csdn.net/boowen/article/details/16824749

版权

PHP 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!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>无标题文档</title>
</head>
<style>/*CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。*/
.q{
width:100px;
height:100px;
background:yellow;
transition:width 2s,height 2s;
-moz-transition:width 2s,height 2s,-moz-transform 2s;/*Firefox4*/
/*Safari and Chrome */
-webkit-transition:width 2s,height 2s,-webkit-transform 2s;
-o-transition:width 2s,height 2s,-o-transform 2s;/*Opera*/
}
.q:hover{
width:200px;
height:200px;
transform:rotate(180deg);
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
-o-transform:rotate(180deg);
}
.h{
width:100px;
height:100px;
background:green;
/*用过渡的 CSS 属性的名称*/
transition-property:width;
/*定义过渡效果花费的时间。默认是 0。*/
transition-duration:1s;
/*规定过渡效果的时间曲线。默认是 "ease"*/
transition-timing-function:linear;
/*过渡效果何时开始。默认是 0。*/
transition-delay:2s;
/*Firefox 4*/
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-trnsition-delay:2s;
/*Safari and chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/*Opera*/
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-elay:2s;
}
.h:hover{
width:200px;
}
.j
{
width:100px;
height:100px;
background:yellow;
transition-property:width 1s linear 2s;
/* Firefox 4 */
-moz-transition:width 1s linear 2s;
/* Safari and Chrome */
-webkit-transition:width 1s linear 2s;
/* Opera */
-o-transition:width 1s linear 2s;
}

.j:hover
{
width:200px;
}
</style>

<body>
<div class="q">请把鼠标指针放到黄色的div元素上，来查看过渡效果。</div>
<p>在internet explorer中是无效的</p>
<div class="h">
</div>
<div class="j">
</div>
</body>
</html