css3實現寬度漸變

時間 2019-11-10

標籤 css3 css 實現寬度漸變欄目 CSS 简体版

原文原文鏈接

用css3實現寬度漸顯效果，記錄一下css

效果：html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>寬度漸變更畫</title>
        <style>
            .bg {
                width: 365px;
                height: 366px;
                position: relative;
                background: url(img/bg.png);
            }
            .line {
                width: 407px;
                height: 252px;
                left: -20px;
                top: 55px;
                monitor-heartbeattion: absolute;
                background: url(img/line.png);
                z-index: 3;
                -webkit-animation: show2 3s ease-in-out;
                animation: show2 3s ease-in-out;
            }
            @-webkit-keyframes show2{
                0%{    
                    opacity:0;
                    width:0;
                }
                100%{
                    opacity:1;
                    width:407px;
                }
            }
            @keyframes show2{
                0%{
                    opacity:0;
                    width:0;
                }
                100%{
                    opacity:1;
                    width:407px;
                }
            }
        </style>
    </head>
    <body>
        <div class="bg">
            <div class="line"></div>
        </div>              
    </body>
</html>

相關標籤/搜索