收藏本站[收不到邮件][导航][自媒体]
架构师,致力于程序员计算机编程知识交流的一个平台!

架构师_程序员_码农网

 找回密码
 注册[Register]

QQ登录

只需一步，快速开始

搜索
架构师_程序员_码农网»架构师 › 前端设计&Web › Html/CSS/JavaScript › CSS3制作写轮眼（动画）
返回列表 发新帖
查看: 12938|回复: 5

[CSS/DIV] CSS3制作写轮眼（动画）

[复制链接]
天下无双
发表于 2014-11-14 17:55:02 | 显示全部楼层 |阅读模式
[mw_shl_code=css,true]<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
.container{ width:750px; 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,.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));
        -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: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);
        -o-transform:rotate(105deg);
}
.tube .bar:nth-child(3){
        bottom:-3px;
        left:-10px;
        transform:rotate(235deg);
        -webkit-transform:rotate(235deg);
        -o-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,.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);}
        5%{opacity:1;transform:scale(1);}
        10%{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);}
        10%{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);}
}
@-o-keyframes ani-narrow{
        0%{opacity:1;-o-transform:scale(1);}
        5%{opacity:1;-o-transform:scale(1);}
        10%{opacity:0;-o-transform:scale(0);}
        87%{opacity:0;-o-transform:scale(0);}
        90%{opacity:1;-o-transform:scale(1);}
        100%{opacity:1;-o-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);}
        5%{opacity:0;transform:scale(0);}
        8%{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);}
        8%{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);}
}
@-o-keyframes ani-zoom{
        0%{opacity:0;-o-transform:scale(0);}
        5%{opacity:0;-o-transform:scale(0);}
        8%{opacity:1;-o-transform:scale(1);}
        60%{opacity:1;-o-transform:scale(1);}
        62%{opacity:0;-o-transform:scale(1.5);}
        100%{opacity:0;-o-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);}
        9%{opacity:0;transform:scale(0) rotate(0);}
        13%{opacity:1;transform:scale(1) rotate(-360deg);}
        35%{opacity:1;transform:scale(1) rotate(-360deg);}
        38%{opacity:0;transform:scale(1.8) rotate(-540deg);}
        100%{opacity:0;transform:scale(0) rotate(0);}
}
@-webkit-keyframes ani-rotateHook{
        0%{opacity:0;-webkit-transform:scale(0) rotate(0);}
        9%{opacity:0;-webkit-transform:scale(0) rotate(0);}
        13%{opacity:1;-webkit-transform:scale(1) rotate(-360deg);}
        35%{opacity:1;-webkit-transform:scale(1) rotate(-360deg);}
        38%{opacity:0;-webkit-transform:scale(1.8) rotate(-540deg);}
        100%{opacity:0;-webkit-transform:scale(0) rotate(0);}
}
@-o-keyframes ani-rotateHook{
        0%{opacity:0;-o-transform:scale(0) rotate(0);}
        9%{opacity:0;-o-transform:scale(0) rotate(0);}
        13%{opacity:1;-o-transform:scale(1) rotate(-360deg);}
        35%{opacity:1;-o-transform:scale(1) rotate(-360deg);}
        38%{opacity:0;-o-transform:scale(1.8) rotate(-540deg);}
        100%{opacity:0;-o-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);}
        40%{opacity:1;transform:scale(1) rotate(-360deg);}
        60%{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);}
        35%{opacity:0;-webkit-transform:scale(0) rotate(0);}
        40%{opacity:1;-webkit-transform:scale(1) rotate(-360deg);}
        60%{opacity:1;-webkit-transform:scale(1) rotate(-360deg);}
        100%{opacity:1;-webkit-transform:scale(1) rotate(-360deg);}
}
@-o-keyframes ani-rotateTube{
        0%{opacity:0;-o-transform:scale(0) rotate(0);}
        35%{opacity:0;-o-transform:scale(0) rotate(0);}
        40%{opacity:1;-o-transform:scale(1) rotate(-360deg);}
        60%{opacity:1;-o-transform:scale(1) rotate(-360deg);}
        100%{opacity:1;-o-transform:scale(1) rotate(-360deg);}
}
.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;}
}
@-o-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-zoom,.ani-rotateHook,
.ani-rotateTube,.ani-shadow,.eyes .line:after{
        animation-fill-mode:forwards;
        -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>
                <div class="tube ani-rotateTube">
                        <span class="bar"></span>
                        <span class="bar"></span>
                        <span class="bar"></span>
                </div>
            </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>
                <div class="tube ani-rotateTube">
                        <span class="bar"></span>
                        <span class="bar"></span>
                        <span class="bar"></span>
                </div>
            </div>
        </div>
        <div class="trans skewRight">
                <span class="bar ani-shadow"></span>
        </div>
    </div>
        <!--右眼结束-->
</div>
</body>
</html>[/mw_shl_code]

评分

参与人数 1MB +1 贡献 +1 收起 理由
admin + 1 + 1 赞一个!

查看全部评分





上一篇：泪奔！微软在北京时间2014.11.13日宣布.net开源
下一篇：跳动的电子时钟
码农网，只发表在实践过程中,遇到的技术难题，不误导他人。
回复

举报

天下无双
 楼主| 发表于 2014-11-14 17:57:04 | 显示全部楼层
本帖最后由 天下无双 于 2014-11-14 18:00 编辑

360软件小助手截图20141114175619.png 102146039136664.jpg
码农网，只发表在实践过程中,遇到的技术难题，不误导他人。
回复 支持 反对

举报

admin
发表于 2014-11-14 17:58:15 | 显示全部楼层
好东西  我先收藏了
码农网，只发表在实践过程中,遇到的技术难题，不误导他人。
回复 支持 反对

举报

发表于 2014-11-14 21:53:23 | 显示全部楼层
一个眼睛就这么多代码？
码农网，只发表在实践过程中,遇到的技术难题，不误导他人。
回复 支持 反对

举报

天下无双
 楼主| 发表于 2014-11-14 22:12:26 | 显示全部楼层
北城织温22度 发表于 2014-11-14 21:53
一个眼睛就这么多代码？

这可不只是一个眼睛哦！你在线运行一遍就知道了
码农网，只发表在实践过程中,遇到的技术难题，不误导他人。
回复 支持 反对

举报

腹黑的李子
发表于 2014-11-14 22:23:43 | 显示全部楼层
好厉害，还有轮回眼呐
码农网，只发表在实践过程中,遇到的技术难题，不误导他人。
回复 支持 反对

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则

免责声明：
码农网所发布的一切软件、编程资料或者文章仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。如有侵权请邮件与我们联系处理。
Mail To:help@itsvse.com

QQ|手机版|小黑屋|架构师 ( 鲁ICP备14021824号-2 )|网站地图

GMT+8, 2025-6-18 05:24

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表