CSS之动画

 动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        @keyframes colorChange {
            0% {
                color: red;
            }
            20% {
                color: yellow;
            }
            50% {
                color: aquamarine;
            }
            80% {
                color: beige;
            }
            100% {
                color: chartreuse;
            }
        }

        P {
            font-size: 50px;
            /*动画名称*/
            animation-name: colorChange;
            /*动画时长*/
            animation-duration: 3s;
            /*动画速度曲线*/
            animation-timing-function: linear;
            /*动画延迟时间*/
            animation-delay: 2s;
            /*动画播放次数    infinite    无限次播放*/
            animation-iteration-count: 2;
            /*动画在下一个是否逆向播放*/
            /*animation-direction: alternate;*/

            animation-fill-mode: forwards;
        }
    </style>
    <title>动画</title>
</head>
<body>

<p>杰瑞教育</p>

</body>
</html>

运行效果是字体变色

 

鼠标触摸下滑栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #container {
            width: 200px;
            height: 50px;
            background-color: #cccccc;
        }

        #top {
            width: 150px;
            height: 100%;
            float: right;
            background-color: #F2AD0A;
        }

        #hidden {
            width: 150px;
            height: 0px;
            background-color: #4D2E83;
            position: relative;
            top: 50px;
            transition: all 1s ease;
            overflow: hidden;
        }

        #top:hover #hidden {
            height: 300px;
        }
    </style>
    <title>老师做的栏</title>
</head>
<body>

<div id="container">
    <div id="top">
        <div id="hidden">
            <ul>
                <li>asfdasdf</li>
                <li>sdfasdf</li>
                <li>asdfjl</li>
            </ul>
        </div>

    </div>
</div>

</body>
</html>

运行图：

光标移动到橙色区域后：出现下滑栏

 

posted @ 2017-07-30 21:45  哈喽杏红  阅读(170)  评论(0)  编辑  收藏  举报