使用CSS3生成简单的属性动画

zlpx1983

于 2012-06-03 22:04:19 发布

阅读量119

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： CSS3

本文链接：https://blog.youkuaiyun.com/zlpx1983/article/details/84227978

css 专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何使用CSS3的transition属性创建简单属性动画。通过设置transition-property、transition-duration及transition-timing-function来实现元素颜色变化的平滑过渡效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用CSS3动画/过渡,transition-duration和transition-property,transition-timing-function风格。

<!DOCTYPE html>
<html>
<head>
    <title>Creating simple property animations using CSS3</title>
    <style type="text/css">
        a {
            color: #F00;
            font-size: 4em;
            font-weight: bold;
            -webkit-transition-property: color;
            -webkit-transition-duration: 1s;
            -webkit-transition-timing-function: ease;
        }
        a:hover {
            color: #0F0;
        }
        a:active {
            color: #00F;
        }
    </style>
</head>
<body>
 
    <a id="header">-webkit-transition</a>
 
</body>
</html>

源码下载：

使用CSS3生成简单的属性动画.zip