HTML,CSS制作写轮眼开眼

最新推荐文章于 2023-03-09 09:26:52 发布

编程世界-云

最新推荐文章于 2023-03-09 09:26:52 发布

阅读量3.8k

点赞数 1

文章标签： html css 前端 web前端前端开发

本文链接：https://blog.csdn.net/weixin_45761317/article/details/103440103

版权

背景图长这样子

因为中间的过渡动画没办法截出来,只能贴上变化的画面,强烈建议看看

因为全部代码太长,我分开贴出来

Html

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
    </head>

    <body>
        <div class="wrapper">
            <img src="//cdn.files.qdfuns.com/article/content/picture/201806/12/212057px8onxoyxokyq88x.jpg" width="1350">
        </div>
        <div class="container">
            <!--左眼开始-->
            <div class="eyesBoxs pullLeft">
                <!--轮廓开始-->
                <div class="profile skewLeft"></div>
                <div class="shadow skewLeft"></div>
                <!--轮廓结束-->
                <div class="basic ani-narrow"></div>
                <!--写轮眼开始-->
                <div class="eyes ani-zoom">
                    <div class="line">
                        <!--三勾玉-->
                        <div class="hook ani-rotateHook">
                            <span class="bar">
                                <b></b>
                            </span>
                            <span class="bar">
                                <b></b>
                            </span>
                            <span class="bar">
                                <b></b>
                            </span>
                        </div>
                        <!--三勾玉end-->
                        <!--万花筒-->
                        <div class="tube ani-rotateTube">
                            <span class="bar"></span>
                            <span class="bar"></span>
                            <span class="bar"></span>
                        </div>
                        <!--万花筒end-->
                    </div>
                </div>
                <!--写轮眼结束-->
                <!--轮回眼开始-->
                <div class="trans skewLeft">
                    <span class="bar ani-shadow"></span>
                </div>
                <!--轮回眼end-->
            </div>
            <!--左眼结束-->

            <!--右眼开始-->
            <div class="eyesBoxs pullRight">
                <!--轮廓开始-->
                <div class="profile skewRight"></div>
                <div class="shadow skewRight"></div>
                <!--轮廓结束-->
                <div class="basic ani-narrow"></div>
                <!--写轮眼开始-->
                <div class="eyes ani-zoom">
                    <div class="line">
                        <!--三勾玉-->
                        <div class="hook ani-rotateHook">
                            <span class="bar">
                                <b></b>
                            </span>
                            <span class="bar">
                                <b></b>
                            </span>
                            <span class="bar">
                                <b></b>
                            </span>
                        </div>
                        <!--三勾玉end--