css3中的动画效果

最新推荐文章于 2022-08-03 11:36:39 发布

chuaie3795

最新推荐文章于 2022-08-03 11:36:39 发布

阅读量69

点赞数

原文链接：https://my.oschina.net/u/3628277/blog/1490180

版权

css3中的animation属性动画效果代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3的animation功能</title>
    <style>
        div{
            background:#ff0000;
            color:white;
            width:200px;
            position:absolute;
            top:200px;
            left:200px;
        }
        @-webkit-keyframes myTest {
            /*开始帧*/
            0%{
                background:#ff0000;
                transform: rotate(0deg);
            }
            25%{
                background:#0000ff;
                transform:rotate(30deg);
            }
            50%{
                background:#fff000;
                transform:rotate(0deg);
            }
            75%{
                background:#000000;
                transform:rotate(-30deg);
            }
            100%{
                /*结束帧*/
                background:#00ff00;
                transform:rotate(0deg);
            }
        }
        div:hover{
            -webkit-animation:myTest 5s linear;
        }
    </style>
</head>
<body>
<div>this is a test text</div>
</body>
</html>

css3中的transition属性动画效果:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transition属性</title>
    <style>
        /*transition 属性是一个简写属性，用于设置四个过渡属性：*/
        /*transition-property:规定应用过渡效果的 CSS 属性的名称。（当指定的 CSS 属性改变时，过渡效果将开始）*/
        /*transition-duration:规定完成过渡效果需要多少秒或毫秒(请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。)*/
        /*transition-timing-function:规定速度效果的速度曲线(linear:匀速)*/
        /*transition-delay:定义过渡效果何时开始(延迟时间，默认0s)*/
        div{
            background:#fff000;
            width:200px;
            transition: background 3s linear,color 1s linear,width 2s linear,transform 2s linear;
        }
        div:hover{
            background:#ff0000;
            color:#fff;
            width:600px;
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
<div>this is a test text</div>
</body>
</html>