CSS3学习手记（10）过渡

最新推荐文章于 2025-05-26 12:27:37 发布

weixin_34355715

最新推荐文章于 2025-05-26 12:27:37 发布

阅读量79

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zry2510/p/7084811.html

本文介绍了CSS3过渡的基本概念及其使用方法。包括transition-property用于指定过渡的属性，transition-duration定义过渡的持续时间，transition-timing-function设置过渡动画类型，transition-delay用于设定过渡延迟时间等关键知识点。

CSS3过渡

允许css的属性值在一定的时间内平滑地过渡
在鼠标单击、获取焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值

transition

transition-property属性检索或设置对象中的参与过渡的属性

语法

transition-property:none|all|property

参数说明

none 没有属性改变
all 默认值
property 元素属性名

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
      body{background: #abcdef}
      div{width: 100px;height: 100px;margin: auto;background:lightcyan; transition-property:background}
      div:hover{cursor: pointer;background: red;transition-property:background }
        </style>    
    </head>
    <body>
    <div></div>
    </body>
</html>

鼠标经过方块变红，离开后恢复正常

transition-duration属性检索设置对象过渡的持续时间

语法

transition-duration:time;

参数说明

规定完成过渡效果需要花费的时间（以秒或毫秒计）
默认值是0

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
      body{background: #abcdef}
      div{width: 100px;height: 100px;margin: auto;background:lightcyan; transition-property:background;transition-duration: 3s}
      div:hover{cursor: pointer;background: red;transition-property:background;transition-duration: 3s }
        </style>    
    </head>
    <body>
    <div></div>
    </body>
</html>