CSS

【CSS】秋のCSS3アニメーションエフェクトAutumnal CSS Animation Effect

October 7, 2018
Autumnal CSS3 Animation Effect

Autumnal CSS Animation Effectは秋のCSS3アニメーションエフェクト。

HTML

        <div class="container">
            <h1>Autumn</h1>
            <div class="leaves">
                <div><img src="leaf1.png" alt=""></div>
                <div><img src="leaf2.png" alt=""></div>
                <div><img src="leaf3.png" alt=""></div>
                <div><img src="leaf4.png" alt=""></div>
                <div><img src="leaf1.png" alt=""></div>
                <div><img src="leaf2.png" alt=""></div>
                <div><img src="leaf3.png" alt=""></div>
                <div><img src="leaf4.png" alt=""></div>
            </div>
            <div class="leaves leaves2">
                <div><img src="leaf1.png" alt=""></div>
                <div><img src="leaf2.png" alt=""></div>
                <div><img src="leaf2.png" alt=""></div>
                <div><img src="leaf4.png" alt=""></div>
                <div><img src="leaf1.png" alt=""></div>
                <div><img src="leaf2.png" alt=""></div>
                <div><img src="leaf4.png" alt=""></div>
                <div><img src="leaf4.png" alt=""></div>
            </div>
            <div class="leaves leaves3">
                <div><img src="leaf1.png" alt=""></div>
                <div><img src="leaf2.png" alt=""></div>
                <div><img src="leaf2.png" alt=""></div>
                <div><img src="leaf4.png" alt=""></div>
                <div><img src="leaf1.png" alt=""></div>
                <div><img src="leaf2.png" alt=""></div>
                <div><img src="leaf4.png" alt=""></div>
                <div><img src="leaf4.png" alt=""></div>
            </div>
            <div class="leaves leaves4">
                <div><img src="leaf1.png" alt=""></div>
                <div><img src="leaf2.png" alt=""></div>
                <div><img src="leaf1.png" alt=""></div>
                <div><img src="leaf4.png" alt=""></div>
                <div><img src="leaf1.png" alt=""></div>
                <div><img src="leaf2.png" alt=""></div>
                <div><img src="leaf4.png" alt=""></div>
                <div><img src="leaf4.png" alt=""></div>
            </div>
        </div>

MIT