PS: 2018/06/07 图片失效,补回去.

纯css3制作写轮眼开眼及进化过程原作者已经找不到了,只能直接贴搜到的转帖.
这是以前贪好玩跟着别人做出来练手的,结构都一样,主要是加个背景修改细节跟动画而已,轮回眼部分有些溢出,但是现在不往动画研究就懒得改了,图个一乐吧。(建议全屏预览)
背景图长这样子
图片描述
因为中间的过渡动画没办法截出来,只能贴上变化的画面,强烈建议看看
图片描述
图片描述
图片描述
图片描述
图片描述

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

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-->
                        <!--万花筒-->
                        <div class="tube ani-rotateTube">
                            <span class="bar"></span>
                            <span class="bar"></span>
                            <span class="bar"></span>
                        </div>
                        <!--万花筒end-->
                    </div>
                </div>
                <!--写轮眼结束-->
                <!--轮回眼开始-->
                <div class="trans skewRight">
                    <span class="bar ani-shadow"></span>
                </div>
                <!--轮回眼end-->
            </div>
            <!--右眼结束-->
        </div>
    </body>

</html>

Css

<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    body {
        background: #000;
        width: 1350px;
    }
    .wrapper {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    .container {
        width: 800px;
        height: 200px;
        margin: 200px auto;
        /*background: #000000;*/

        position: relative;
    }
    .eyesBoxs {
        width: 130px;
        height: 70px;
        position: absolute;
        top: 50px;
    }
    .pullLeft {
        top: 60px;
        left: 225px;
    }
    .pullRight {
        top: 60px;
        right: 10px;
    }
    .profile {
        width: 130px;
        height: 70px;
        /*background: #fff;*/

        position: absolute;
        top: 0;
        left: 0;
        /*border-radius: 0 70px 0 50px;*/
    }
    /*.shadow {
        display: block;
        width: 130px;
        height: 70px;
        position: absolute;
        top: 0;
        z-index: 5;
        border-radius: 0 90px 0 60px;
        box-shadow: 5px 12px 2px 5px rgba(0, 0, 0, .25) inset;
    }*/

    .skewLeft {
        border-radius: 10px 180px 25px 50px;
        transform: skew(20deg, 5deg);
        -webkit-transform: skew(20deg, 1deg);
    }
    .skewRight {
        border-radius: 0 100px 10px 140px;
        transform: skew(-10deg, -1deg) scale(-1, 1);
        -webkit-transform: skew(-10deg, 1deg) scale(-1, 1);
        -o-transform: scale(-1, 1);
    }
    .basic {
        width: 60px;
        height: 60px;
        background: #000;
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 10;
        margin-top: -30px;
        border-radius: 60%;
    }
    .basic:before {
        content: "";
        display: block;
        width: 10px;
        height: 11px;
        position: absolute;
        left: 15px;
        top: 15px;
        z-index: 100;
        border-radius: 60%;
        background-image: radial-gradient(circle, rgb(225, 225, 225), rgb(225, 225, 225), rgba(225, 225, 225, 0.9), rgba(225, 225, 225, 0.3));
        -webkit-background-image: radial-gradient(circle, rgb(225, 225, 225), rgb(225, 225, 225), rgba(225, 225, 225, 0.9), rgba(225, 225, 225, 0.3));
        -o-background-image: radial-gradient(circle, rgb(225, 225, 225), rgb(225, 225, 225), rgba(225, 225, 225, 0.9), rgba(225, 225, 225, 0.3));
    }
    .pullLeft .basic {
        margin-left: -33px;
    }
    .pullRight .basic {
        margin-left: -27px;
    }
    .eyes {
        width: 55px;
        height: 55px;
        background: #ff0000;
        position: absolute;
        top: 8px;
        border-radius: 60%;
        box-shadow: 0 0 2px 4px #bd0000 inset, 0 0 0 2px #000;
    }
    .pullLeft .eyes {
        left: 35px;
    }
    .pullRight .eyes {
        right: 35px;
    }
    .eyes .line {
        width: 64%;
        height: 64%;
        background: #ff0000;
        position: absolute;
        right: 0;
        left: 0;
        top: 10px;
        margin: 0 auto;
        border-radius: 60%;
        box-shadow: 0 0 2px 0 #b20000 inset;
    }
    .eyes .line:before {
        content: "";
        display: block;
        width: 10px;
        height: 11px;
        position: absolute;
        left: 3px;
        top: 4px;
        z-index: 100;
        border-radius: 60%;
        background-image: radial-gradient(circle, rgb(225, 225, 225), rgb(225, 225, 225), rgba(225, 225, 225, 0.7), rgba(225, 225, 225, 0.3));
        -webkit-background-image: radial-gradient(circle, rgb(225, 225, 225), rgb(225, 225, 225), rgba(225, 225, 225, 0.7), rgba(225, 225, 225, 0.3));
        -o-background-image: radial-gradient(circle, rgb(225, 225, 225), rgb(225, 225, 225), rgba(225, 225, 225, 0.7), rgba(225, 225, 225, 0.3));
    }
    .eyes .line:after {
        content: "";
        display: block;
        width: 10px;
        height: 10px;
        position: absolute;
        background: #000;
        right: 0;
        left: -1px;
        top: 13px;
        z-index: 100;
        margin: 0 auto;
        border-radius: 60%;
        transform: rotate(150deg);
        -webkit-transform: rotate(150deg);
        -o-transform: rotate(150deg);
        animation: colour 20s ease-in infinite;
        -webkit-animation: colour 20s ease-in infinite;
        -o-animation: colour 20s ease-in infinite;
    }
    @keyframes colour {
        0% {
            background: #000;
        }
        35% {
            background: #000;
        }
        40% {
            background: #f00;
        }
        100% {
            background: #f00;
        }
    }
    @-webkit-keyframes colour {
        0% {
            background: #000;
        }
        35% {
            background: #000;
        }
        40% {
            background: #f00;
        }
        100% {
            background: #f00;
        }
    }
    @-o-keyframes colour {
        0% {
            background: #000;
        }
        35% {
            background: #000;
        }
        40% {
            background: #f00;
        }
        100% {
            background: #f00;
        }
    }
    /*******三勾玉 开始*******/

    .hook {
        width: 92%;
        height: 92%;
        position: absolute;
        right: 0;
        left: 0;
        top: 5%;
        margin: 0 auto;
        border-radius: 60%;
    }
    .hook .bar {
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        border-radius: 60%;
    }
    .hook .bar b {
        display: block;
        width: 8px;
        height: 8px;
        background: #000;
        position: absolute;
        left: 0;
        bottom: 0;
        border-radius: 60%;
    }
    .hook .bar b:after {
        content: "";
        width: 8px;
        height: 8px;
        border-color: transparent transparent #000 transparent;
        border-style: solid;
        border-width: 0 0 5px 0;
        position: absolute;
        top: -1px;
        left: -3px;
        z-index: 100;
        border-radius: 0 0 0 70%;
        transform: rotate(-75deg);
        -webkit-transform: rotate(-75deg);
        -o-transform: rotate(-75deg);
    }
    .hook .bar:nth-child(1) {
        transform: rotate(10deg);
        -webkit-transform: rotate(10deg);
        -o-transform: rotate(10deg);
    }
    .hook .bar:nth-child(2) {
        transform: rotate(130deg);
        -webkit-transform: rotate(130deg);
        -o-transform: rotate(130deg);
    }
    .hook .bar:nth-child(3) {
        transform: rotate(250deg);
        -webkit-transform: rotate(250deg);
        -o-transform: rotate(250deg);
    }
    /*******三勾玉 结束********/
    /*******万花筒 开始*******/

    .tube {
        width: 93%;
        height: 93%;
        position: absolute;
        right: 0;
        left: 0;
        top: 2px;
        margin: 0 auto;
        background: #000;
        border-radius: 60%;
    }
    .tube .bar {
        display: block;
        width: 10px;
        height: 20px;
        border-style: solid;
        border-width: 0 0 0 10px;
        border-color: transparent transparent transparent black;
        position: absolute;
        border-radius: 100% 0 0 0;
    }
    .tube .bar:nth-child(1) {
        top: -10px;
        left: 2px;
        transform: rotate(-10deg);
        -webkit-transform: rotate(-10deg);
        -moz-transform: rotate(-10deg);
    }
    .tube .bar:nth-child(2) {
        bottom: 0;
        right: -10px;
        transform: rotate(105deg);
        -webkit-transform: rotate(105deg);
        -moz-transform: rotate(105deg);
    }
    .tube .bar:nth-child(3) {
        bottom: -3px;
        left: -10px;
        transform: rotate(235deg);
        -webkit-transform: rotate(235deg);
        -moz-transform: rotate(235deg);
    }
    /*******万花筒 结束*******/
    /*******轮回眼 开始*******/

    .trans {
        width: 130px;
        height: 70px;
        position: absolute;
        overflow: hidden;
        top: 0;
        left: 0;
        border-radius: 0 50px 0 20px;
    }
    .trans .bar {
        display: block;
        width: 9px;
        height: 9px;
        background: #000;
        position: absolute;
        top: 50%;
        z-index: 2;
        margin: -4px 0 0 -4px;
        border-radius: 60%;
    }
    .trans .bar:after {
        content: "";
        display: block;
        width: 11px;
        height: 12px;
        position: absolute;
        top: -13px;
        left: -13px;
        z-index: 100;
        border-radius: 60%;
        background: rgba(250, 250, 250, 85);
    }
    .pullLeft .trans .bar {
        transform: skewX(-15deg);
        -webkit-transform: skewX(-15deg);
        -o-transform: skewX(-15deg);
    }
    .pullLeft .trans .bar {
        left: 48%;
    }
    .pullRight .trans .bar {
        transform: skewX(-15deg) scale(-1, 1);
        -webkit-transform: skewX(-15deg) scale(-1, 1);
        -o-transform: skewX(-15deg) scale(-1, 1);
    }
    .pullRight .trans .bar {
        right: 48%;
    }
    /*******轮回眼 结束*******/
    /*基本眼*/

    .ani-narrow {
        animation: ani-narrow 20s ease-out infinite;
        -webkit-animation: ani-narrow 20s ease-out infinite;
        -o-animation: ani-narrow 20s ease-out infinite;
    }
    @keyframes ani-narrow {
        0% {
            opacity: 1;
            transform: scale(1);
        }
        6% {
            opacity: 1;
            transform: scale(1);
        }
        8% {
            opacity: 0;
            transform: scale(0);
        }
        87% {
            opacity: 0;
            transform: scale(0);
        }
        90% {
            opacity: 1;
            transform: scale(1);
        }
        100% {
            opacity: 1;
            transform: scale(1);
        }
    }
    @-webkit-keyframes ani-narrow {
        0% {
            opacity: 1;
            -webkit-transform: scale(1);
        }
        5% {
            opacity: 1;
            -webkit-transform: scale(1);
        }
        8% {
            opacity: 0;
            -webkit-transform: scale(0);
        }
        87% {
            opacity: 0;
            -webkit-transform: scale(0);
        }
        90% {
            opacity: 1;
            -webkit-transform: scale(1);
        }
        100% {
            opacity: 1;
            -webkit-transform: scale(1);
        }
    }
    /*红色眼*/

    .ani-zoom {
        animation: ani-zoom 20s linear infinite;
        -webkit-animation: ani-zoom 20s linear infinite;
        -o-animation: ani-zoom 20s linear infinite;
    }
    @keyframes ani-zoom {
        0% {
            opacity: 0;
            transform: scale(0);
        }
        6% {
            opacity: 0;
            transform: scale(0);
        }
        7% {
            opacity: 1;
            transform: scale(1);
        }
        60% {
            opacity: 1;
            transform: scale(1);
        }
        62% {
            opacity: 0;
            transform: scale(1.5);
        }
        100% {
            opacity: 0;
            transform: scale(0);
        }
    }
    @-webkit-keyframes ani-zoom {
        0% {
            opacity: 0;
            -webkit-transform: scale(0);
        }
        5% {
            opacity: 0;
            -webkit-transform: scale(0);
        }
        6% {
            opacity: 1;
            -webkit-transform: scale(1);
        }
        60% {
            opacity: 1;
            -webkit-transform: scale(1);
        }
        62% {
            opacity: 0;
            -webkit-transform: scale(1.5);
        }
        100% {
            opacity: 0;
            -webkit-transform: scale(0);
        }
    }
    /*三勾玉*/

    .ani-rotateHook {
        animation: ani-rotateHook 20s ease-in infinite;
        -webkit-animation: ani-rotateHook 20s ease-in infinite;
        -o-animation: ani-rotateHook 20s ease-in infinite;
    }
    @keyframes ani-rotateHook {
        0% {
            opacity: 0;
            transform: scale(0) rotate(0);
        }
        10% {
            opacity: 0;
            transform: scale(0) rotate(0);
        }
        13% {
            opacity: 1;
            transform: scale(1) rotate(-2600deg);
        }
        20% {
            opacity: 1;
            transform: scale(1) rotate(-2600deg);
        }
        35% {
            opacity: 1;
            transform: scale(1) rotate(-5000deg);
        }
        38% {
            opacity: 0;
            transform: scale(0.6) rotate(-6400deg);
        }
        100% {
            opacity: 0;
            transform: scale(0) rotate(0);
        }
    }
    @-webkit-keyframes ani-rotateHook {
        0% {
            opacity: 0;
            -webkit-transform: scale(0) rotate(0);
        }
        10% {
            opacity: 0;
            -webkit-transform: scale(0) rotate(0);
        }
        13% {
            opacity: 1;
            -webkit-transform: scale(1) rotate(-2600deg);
        }
        20% {
            opacity: 1;
            -webkit-transform: scale(1) rotate(-2600deg);
        }
        35% {
            opacity: 1;
            -webkit-transform: scale(1) rotate(-5000deg);
        }
        38% {
            opacity: 0;
            -webkit-transform: scale(0.6) rotate(-6400deg);
        }
        100% {
            opacity: 0;
            -webkit-transform: scale(0) rotate(0);
        }
    }
    /*万花筒*/

    .ani-rotateTube {
        animation: ani-rotateTube 20s ease-in-out infinite;
        -webkit-animation: ani-rotateTube 20s ease-in-out infinite;
        -o-animation: ani-rotateTube 20s ease-in-out infinite;
    }
    @keyframes ani-rotateTube {
        0% {
            opacity: 0;
            transform: scale(0) rotate(0);
        }
        35% {
            opacity: 0;
            transform: scale(0) rotate(0);
        }
        45% {
            opacity: 1;
            transform: scale(1) rotate(-1360deg);
        }
        58% {
            opacity: 1;
            transform: scale(1) rotate(-1360deg);
        }
        64% {
            opacity: 0;
            transform: scale(0) rotate(1360deg);
        }
        100% {
            opacity: 1;
            transform: scale(1) rotate(-1360deg);
        }
    }
    @-webkit-keyframes ani-rotateTube {
        0% {
            opacity: 0;
            -webkit-transform: scale(0) rotate(0);
        }
        35% {
            opacity: 0;
            -webkit-transform: scale(0) rotate(0);
        }
        45% {
            opacity: 1;
            -webkit-transform: scale(1) rotate(-1360deg);
        }
        58% {
            opacity: 1;
            -webkit-transform: scale(1) rotate(-1360deg);
        }
        64% {
            opacity: 0;
            -webkit-transform: scale(0) rotate(1360deg);
        }
        100% {
            opacity: 1;
            -webkit-transform: scale(1) rotate(-1360deg);
        }
    }
    /*轮回眼*/

    .ani-shadow {
        animation: ani-shadow 20s linear infinite;
        -webkit-animation: ani-shadow 20s linear infinite;
        -o-animation: ani-shadow 20s linear infinite;
    }
    @keyframes ani-shadow {
        0% {
            opacity: 0;
            box-shadow: none;
        }
        58% {
            opacity: 0;
            box-shadow: none;
        }
        64% {
            opacity: 1;
            box-shadow: 0 0 0 14px #464646, 0 0 0 16px #000, 0 0 0 30px #6c6c6c, 0 0 0 32px #000, 0 0 0 44px #a6a6a6, 0 0 0 46px #000;
        }
        87% {
            opacity: 1;
            box-shadow: 0 0 0 14px #464646, 0 0 0 16px #000, 0 0 0 30px #6c6c6c, 0 0 0 32px #000, 0 0 0 44px #a6a6a6, 0 0 0 46px #000;
        }
        90% {
            opacity: 0;
            box-shadow: none;
        }
        100% {
            opacity: 0;
            box-shadow: none;
        }
    }
    @-webkit-keyframes ani-shadow {
        0% {
            opacity: 0;
            box-shadow: none;
        }
        58% {
            opacity: 0;
            box-shadow: none;
        }
        64% {
            opacity: 1;
            box-shadow: 0 0 0 14px #464646, 0 0 0 16px #000, 0 0 0 30px #6c6c6c, 0 0 0 32px #000, 0 0 0 44px #a6a6a6, 0 0 0 46px #000;
        }
        87% {
            opacity: 1;
            box-shadow: 0 0 0 14px #464646, 0 0 0 16px #000, 0 0 0 30px #6c6c6c, 0 0 0 32px #000, 0 0 0 44px #a6a6a6, 0 0 0 46px #000;
        }
        90% {
            opacity: 0;
            box-shadow: none;
        }
        100% {
            opacity: 0;
            box-shadow: none;
        }
    }
    .ani-narrow,
    .ani-rotateHook,
    .ani-rotateTube,
    .ani-shadow,
    .ani-zoom,
    .eyes .line:after {
        animation-fill-mode: both;
        -webkit-animation-fill-mode: both;
        -o-animation-fill-mode: both;
    }
</style>

Afterward
621 声望62 粉丝

努力去做,对的坚持,静待结果