当前位置: 代码迷 >> HTML/CSS >> 运用CSS3生成简单的属性动画
  详细解决方案

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

热度:107   发布时间:2012-08-25 10:06:20.0
使用CSS3生成简单的属性动画

使用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