流体勾配効果の実現

動的流体勾配効果

デモは次のとおりです。

<！DOCTYPE html > 
< html > 
    < head > 
        < meta charset = "utf-8"  /> 
        < meta name = "viewport" content = "width = device-width、initial-scale = 1" > 
        < title >测试</ title > 
    </ head > 
    < body > 
        < style > 
            * { 
                margin ：0px ; 
                パディング：

            ■は{ 
                高さ：900px ; 
                背景：＃0299d8 ; 
                background ：linear-gradient（45deg、＃f5576c 0％、＃304ffd 33％、＃7b8df3 66％、＃f093fb 100％）; 
                background-size ：400％; 
                background-position ：0％100％; 
                アニメーション：グラデーション2sイーズインアウト無限。
            } 

            @keyframes gradient { 
                50％{ 
                    background-position ：100％0
                 } 
            } 
        </ style > 
        < div class = "box" > </ div > 
    </ body > 
</ html >