html 5 过渡属性高度宽度颜色样式等。。。

最新推荐文章于 2021-06-18 02:52:47 发布

weixin_30847271

最新推荐文章于 2021-06-18 02:52:47 发布

阅读量115

点赞数

原文链接：http://www.cnblogs.com/benpaodegegen/p/7278280.html

版权

过渡属性

下面的表格列出了所有的转换属性：

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属性。	3
transition-property	规定应用过渡的 CSS 属性的名称。	3
transition-duration	定义过渡效果花费的时间。默认是 0。	3
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。	3
transition-delay	规定过渡效果何时开始。默认是 0。	3




<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:yellow;
transition-property:width;
transition-duration:1s;
transition-timing-function:linear;
transition-delay:2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-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-delay:2s;
}

div:hover
{
width:200px;
}
</style>
</head>
<body>

<div></div>

<p>请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。</p>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

<p><b>注释：</b>这个过渡效果会在开始之前等待两秒。</p>

</body>
</html>

转载于:https://www.cnblogs.com/benpaodegegen/p/7278280.html

weixin_30847271

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html 5 过渡属性高度宽度颜色样式等。。。

过渡属性下面的表格列出了所有的转换属性：属性描述CSStransition简写属性，用于在一个属性中设置四个过渡属性。3transition-property规定应用过渡的 CSS 属性的名称。3transition-duration定义过渡效果花费的时间。默认是 0。3transition-t...
复制链接

扫一扫