纯CSS3骏马奔腾动画特效

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>纯CSS3骏马奔腾动画特效</title>

    <link rel="stylesheet" href="css/style.css">

</head>
<body>
<input type="checkbox" id="toggle" >
<label for="toggle">

    <div class="floor"></div>

    <div class="🐴 animate">
        <div class="front-leg right">
            <div class="shoulder">
                <div class="upper">
                    <div class="knee">
                        <div class="lower">
                            <div class="ankle">
                                <div class="foot">
                                    <div class="hoof"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="back-leg right">
            <div class="top">
                <div class="thigh">
                    <div class="lower-leg">
                        <div class="foot">
                            <div class="hoof"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tail">
            <div class="nub">
                <div class="section">
                    <div class="section">
                        <div class="section">
                            <div class="section">
                                <div class="section">
                                    <div class="section last">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="body">
            <div class="section">
                <div class="section">
                    <div class="section">
                        <div class="section">
                            <div class="section last">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="back-side"></div>
        </div>

        <div class="neck">
            <div class="under"></div>
            <div class="front"></div>
            <div class="base"></div>
            <div class="top"></div>
            <div class="shoulder"></div>
        </div>
        <div class="front-leg left">
            <div class="shoulder">
                <div class="upper">
                    <div class="knee">
                        <div class="lower">
                            <div class="ankle">
                                <div class="foot">
                                    <div class="hoof"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="back-leg left">
            <div class="top">
                <div class="thigh">
                    <div class="lower-leg">
                        <div class="foot">
                            <div class="hoof"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="head">
            <div class="skull"></div>
            <div class="nose"></div>
            <div class="face"></div>
            <div class="lip"></div>
            <div class="jaw"></div>
            <div class="chin"></div>
            <div class="ear"></div>
            <div class="eye"></div>
        </div>
    </div>

    <div class="dust front">
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
    </div>
    <div class="dust back">
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
    </div>
</label>

</body>
</html>


15323441764我微电

评论者:[[ schemeInfo.user.username ]]

评论内容:[[ schemeInfo.pbody ]]

评论时间:[[ schemeInfo.ptime ]]





发表你的评论:

提交评论
上一篇:
下一篇: