当前位置: 开发笔记 > 编程语言 > 正文

纯css3制作写轮眼开眼及进化过程[转]

作者：DD906114329 | 来源：互联网 | 2023-05-16 13:16

目前已经测试IE10、Firefox浏览器、Chrome浏览器、Opera浏览器、360浏览器（两种模式）兼容已通过。温馨提示：以上浏览器版本号均最新的；动画过程中每个阶段大约会停留5秒钟，希望

目前已经测试 IE10、Firefox浏览器、Chrome浏览器、Opera浏览器、360浏览器（两种模式）兼容已通过。

温馨提示：以上浏览器版本号均最新的；动画过程中每个阶段大约会停留5秒钟，希望你不会中幻术^_^。

在线演示　　　　源码下载

根据某位网友的建议，我做了点小修改：重新计算了一下时间，让效果可循环，整个循环一圈需要20秒的时间，每个阶段还是和原来一样大约停留5秒钟。

HTML代码：

*{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;
}

转载源地址：http://www.cnblogs.com/flylee90/archive/2014/11/10/4086102.html

推荐阅读

bit
CSS3如何实现loading预加载动画特效

小编给大家分享一下CSS3如何实现loading预加载动画特效，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章 ... [详细]

蜡笔小新 2023-09-16 12:05:33
int
CSS3实现背景颜色渐变

background:-webkit-gradient(linear,10%10%，100%100%， ... [详细]

蜡笔小新 2023-09-25 18:49:33
int
常用的CSS属性及用法整理

本文整理了常用的CSS属性及用法，包括背景属性、边框属性、尺寸属性、可伸缩框属性、字体属性和文本属性等，方便开发者查阅和使用。 ... [详细]

蜡笔小新 2023-12-09 03:01:43
int
CSS3背景颜色渐变效果

1.CSS3透明度渐变（从左到右）#grad{background:-webkit-linear-gradient(left,rgba(198,226,255,1),rgba(19 ... [详细]

蜡笔小新 2023-09-17 20:26:32
int
Material Design Lite ，简洁惊艳的前端工具箱。

2019独角兽企业重金招聘Python工程师标准MaterialDesignLite简介本文主要介绍MaterialDesign设计语言的HTMLCSSJS部分实现。对应每一 ... [详细]

蜡笔小新 2023-10-13 13:44:20
int
怎么用css3实现图片的高斯模糊效果

小编给大家分享一下怎么用css3实现图片的高斯模糊效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后 ... [详细]

蜡笔小新 2023-09-24 14:56:09
less
webstorm开发vue组件时，支持scss/less等预处理语言

vue组件支持预处理语言的关键点：<stylerelstylesheetscss>.mint-swipe{hei ... [详细]

蜡笔小新 2023-09-17 15:50:09
less
在DIV内垂直居中UL - Centering Vertically an UL inside a DIV

iamtryingtomakeanavigationmenuinsidea200pxx200pxsquare,thisnavigationlist(UL)chang ... [详细]

蜡笔小新 2023-09-16 19:05:52
less
html5+css3网站菜单的示例分析

这篇文章主要为大家展示了“html5+css3网站菜单的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习 ... [详细]

蜡笔小新 2023-09-16 11:05:47
bit
android studio生成jks,android studio生成 keystore 以及获取 SHA1值等

合并列值－合并为一列问题需求：createtabletab(Aint,Bint,Cint)inserttabselect1,2,3unionallsel ... [详细]

蜡笔小新 2023-12-11 12:32:55
function
使用n3-charts绘制以日期为x轴的数据

本文介绍了如何使用n3-charts绘制以日期为x轴的数据，并提供了相应的代码示例。通过设置x轴的类型为日期，可以实现对日期数据的正确显示和处理。同时，还介绍了如何设置y轴的类型和其他相关参数。通过本文的学习，读者可以掌握使用n3-charts绘制日期数据的方法。 ... [详细]

蜡笔小新 2023-12-10 00:19:21
function
css元素可拖动,如何使用CSS禁止元素拖拽？

一、用户行为三剑客以下3个CSS属性：user-select属性可以设置是否允许用户选择页面中的图文内容；user-modify属性可以设置是否允许输入 ... [详细]

蜡笔小新 2023-10-17 14:35:15
bit
为什么borderimage在CSS中很少被使用，你可能不知道的小知识

之前我曾经写过一篇关于CSS的border-image属性的文章。现在几乎所有的现代浏览器都支持这个属性——除了IE10及以下IE版本。看起来这是一个非常 ... [详细]

蜡笔小新 2023-10-13 16:23:53
bit
前端实用的CSS3技巧有哪些

本文小编为大家详细介绍“前端实用的CSS3技巧有哪些”，内容详细，步骤清晰，细节处理妥当，希望这篇“前端实用的CSS3技巧有哪些”文章能帮助大家 ... [详细]

蜡笔小新 2023-09-25 13:50:50
int
CSS3是怎么实现全景特效？

很有意思的全景动画：（直接上代码）html部分：<div><div>css部分：.panorama{width:300px;hei ... [详细]

蜡笔小新 2023-09-16 12:37:52

DD906114329

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章