找回密码
当前位置：前端开发者 > CSS > 正文

前端开发CSS3 火影写轮眼 万花筒 轮回眼.....

2018-12-03 分类：CSS / Node.js 阅读(873) 评论(0)
ui设计 web前端开发框架
前端开发框架选型
node.js前端开发框架教程集锦

html 代码

<!DOCTYPE html>
    <head>
        <meta charset=”utf-8″ />
        <title>纯CSS3实现眨眼</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            .container {
                width: 800px;
                height: 200px;
                margin: 30px auto;
                overflow: hidden;
                background: #000;
                position: relative;
            }
            .eyesBoxs {
                width: 130px;
                height: 70px;
                position: absolute;
                top: 50px;
            }
            .pullLeft {
                left: 100px;
            }
            .pullRight {
                right: 100px;
            }
            .profile {
                width: 130px;
                height: 70px;
                background: #fff;
                position: absolute;
                top: 0;
                left: 0;
                overflow: hidden;
                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, 0.25) inset;
            }
            .skewLeft {
                transform: skewX(15deg);
                -webkit-transform: skewX(15deg);
                -o-transform: skewX(15deg);
            }
            .skewRight {
                transform: skewX(-15deg) scale(-1, 1);
                -webkit-transform: skewX(-15deg) scale(-1, 1);
                -o-transform: skewX(-15deg) 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)
                );
            }
            .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)
                );
            }
            .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);
                animation: colour 0.5s ease-in 7s;
                -webkit-animation: colour 0.5s ease-in 7s;
            }
            @keyframes colour {
                0% {
                    background: #000;
                }
                100% {
                    background: #f00;
                }
            }
            @-webkit-keyframes colour {
                0% {
                    background: #000;
                }
                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);
            }
            .hook .bar:nth-child(1) {
                transform: rotate(10deg);
                -webkit-transform: rotate(10deg);
            }
            .hook .bar:nth-child(2) {
                transform: rotate(130deg);
                -webkit-transform: rotate(130deg);
            }
            .hook .bar:nth-child(3) {
                transform: rotate(250deg);
                -webkit-transform: rotate(250deg);
            }
            /*******三勾玉 结束*******/
            /*******万花筒 开始*******/
            .tube {
                width: 93%;
                height: 93%;
                position: absolute;
                right: 0;
                left: 0px;
                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);
            }
            .tube .bar:nth-child(2) {
                bottom: 0px;
                right: -10px;
                transform: rotate(105deg);
                -webkit-transform: rotate(105deg);
            }
            .tube .bar:nth-child(3) {
                bottom: -3px;
                left: -10px;
                transform: rotate(235deg);
                -webkit-transform: rotate(235deg);
            }
            /*******万花筒 结束*******/
            /*******轮回眼 开始*******/
            .trans {
                width: 130px;
                height: 70px;
                position: absolute;
                overflow: hidden;
                top: 0;
                left: 0;
                border-radius: 0 70px 0 50px;
            }
            .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, 0.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 0.5s linear 1s;
                -webkit-animation: ani-narrow 0.5s linear 1s;
            }
            @keyframes ani-narrow {
                from {
                    transform: scale(1);
                }
                to {
                    opacity: 0;
                    transform: scale(0);
                }
            }
            @-webkit-keyframes ani-narrow {
                from {
                    -webkit-transform: scale(1);
                }
                to {
                    opacity: 0;
                    -webkit-transform: scale(0);
                }
            }
            .ani-zoom {
                /*红色眼*/
                animation: ani-zoom 11s linear 0.8s;
                -webkit-animation: ani-zoom 11s linear 0.8s;
            }
            @keyframes ani-zoom {
                0% {
                    opacity: 0;
                    transform: scale(0);
                }
                6% {
                    opacity: 1;
                    transform: scale(1);
                }
                95% {
                    opacity: 1;
                    transform: scale(1);
                }
                100% {
                    opacity: 0;
                    transform: scale(1.5);
                }
            }
            @-webkit-keyframes ani-zoom {
                0% {
                    opacity: 0;
                    -webkit-transform: scale(0);
                }
                6% {
                    opacity: 1;
                    -webkit-transform: scale(1);
                }
                95% {
                    opacity: 1;
                    -webkit-transform: scale(1);
                }
                100% {
                    opacity: 0;
                    -webkit-transform: scale(1.5);
                }
            }
            .ani-rotateHook {
                /*三勾玉*/
                animation: ani-rotateHook 5s ease-in 2.5s;
                -webkit-animation: ani-rotateHook 5s ease-in 2.5s;
            }
            @keyframes ani-rotateHook {
                0% {
                    opacity: 0;
                    transform: scale(0) rotate(0);
                }
                15% {
                    opacity: 1;
                    transform: scale(1) rotate(-360deg);
                }
                90% {
                    opacity: 1;
                    transform: scale(1) rotate(-360deg);
                }
                100% {
                    opacity: 0;
                    transform: scale(1.8) rotate(-540deg);
                }
            }
            @-webkit-keyframes ani-rotateHook {
                0% {
                    opacity: 0;
                    -webkit-transform: scale(0) rotate(0);
                }
                15% {
                    opacity: 1;
                    -webkit-transform: scale(1) rotate(-360deg);
                }
                90% {
                    opacity: 1;
                    -webkit-transform: scale(1) rotate(-360deg);
                }
                100% {
                    opacity: 0;
                    -webkit-transform: scale(1.8) rotate(-540deg);
                }
            }
            .ani-rotateTube {
                /*万花筒*/
                animation: ani-rotateTube 5s ease-in-out 6.5s;
                -webkit-animation: ani-rotateTube 5s ease-in-out 6.5s;
            }
            @keyframes ani-rotateTube {
                0% {
                    opacity: 0;
                    transform: scale(0) rotate(0);
                }
                30% {
                    opacity: 1;
                    transform: scale(1) rotate(-360deg);
                }
                100% {
                    opacity: 1;
                    transform: scale(1) rotate(-360deg);
                }
            }
            @-webkit-keyframes ani-rotateTube {
                0% {
                    opacity: 0;
                    -webkit-transform: scale(0) rotate(0);
                }
                30% {
                    opacity: 1;
                    -webkit-transform: scale(1) rotate(-360deg);
                }
                100% {
                    opacity: 1;
                    -webkit-transform: scale(1) rotate(-360deg);
                }
            }
            .ani-shadow {
                /*轮回眼*/
                animation: ani-shadow 1s linear 11s;
                -webkit-animation: ani-shadow 1s linear 11s;
            }
            @keyframes ani-shadow {
                0% {
                    opacity: 0;
                    box-shadow: none;
                }
                100% {
                    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;
                }
            }
            @-webkit-keyframes ani-shadow {
                0% {
                    opacity: 0;
                    box-shadow: none;
                }
                100% {
                    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;
                }
            }
            /* 规定动画在播放之前或之后，其动画效果是否可见。 */
            .ani-narrow,
            .ani-zoom,
            .ani-rotateHook,
            .ani-rotateTube,
            .ani-shadow,
            .eyes .line:after {
                animation-fill-mode: both;
                -webkit-animation-fill-mode: both;
                -o-animation-fill-mode: both;
            }
        </style>
    </head>
    <body>
        <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>
                <!– 轮回眼结束 –>
            </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>
                <!– 轮回眼结束 –>
            </div>
            <!– 右眼结束 –>
        </div>
    </body>
</html>
vue 前端框架 开发者
ie8支持的前端开发框架
钉钉开发前端框架
赞(0)
前端开发者 » 前端开发CSS3 火影写轮眼 万花筒 轮回眼.....
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论