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

纯css3制作写轮眼开眼及进化过程原作者已经找不到了,只能直接贴搜到的转帖.

这是以前贪好玩跟着别人做出来练手的，结构都一样，主要是加个背景修改细节跟动画而已，轮回眼部分有些溢出，但是现在不往动画研究就懒得改了，图个一乐吧。(建议全屏预览)

背景图长这样子

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

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

Html

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;

}

用python画写轮眼_仿写轮眼修改版相关推荐

  1. 用python画熊猫_当熊猫不够用熊猫

    用python画熊猫 Python短裤 (Python Shorts) Pandas is one of the best data manipulation libraries in recent ...

  2. python 画云图_【词云图】如何用python的第三方库jieba和wordcloud画词云图

    一直想学一下如何用python画词云图,觉得很好玩,本文就写一下我自己的一些尝试. 1.提前准备 一般准备以下四样就可以啦. 第一,电脑安装python,我装的是3.6. 第二,安装第三方库jieba ...

  3. 怎么用python画花瓣_怎么用python画花朵

    怎么用python画花朵?下面给大家讲解一下具体步骤: 第一步,打开菜单栏,输入idle,打开shell. 第二步,新建一个文件,并命名. 第三步,导入turtle模块,创建一个新窗口用于绘图,再创建 ...

  4. 知道经纬度用python画路线图_神级程序员教你用Python如何画一个中国地图！（好好玩）...

    为什么是Python 先来聊聊为什么做数据分析一定要用 Python 或 R 语言.编程语言这么多种, Java , PHP 都很成熟,但是为什么在最近热火的数据分析领域,很多人选择用 Python ...

  5. 用python画风车_用Python画小女孩放风筝的示例

    我就废话不多说了,直接上代码吧! # coding:utf-8 2import turtle as t 3import random 4# 画心 5def xin(): 6 def curvemove ...

  6. 用python画熊猫_熊猫read_excel（）–用Python读取Excel文件

    用python画熊猫 We can use the pandas module read_excel() function to read the excel file data into a Dat ...

  7. 如何用python画椭圆_怎么用python画椭圆？

    使用python画椭圆的方法: 首先使用两行代码引入Matplotlib扩展包:import matplotlib.pyplot as plt from matplotlib.patches impo ...

  8. 用python画圆锥_用python画一幅美瞳，今日份来自程序员的浪漫

    如果说,眼睛是心灵的窗户,那么,美瞳就是心灵的彩窗,就像下图中这样. 而我们今天所要挑战的,就是用python画美瞳,而且是五分钟之内画三百副争奇斗艳.各领风骚.绝不重样的美瞳.作为这颗地球上最纯情的 ...

  9. 怎么用python画房子_用python画一个小房子

    用python画一个小房子 2020年07月22日 | 萬仟网IT编程 | 我要评论 如何用python画一个小房子?效果图如下:代码如下:import turtle# 前置p = turtle.Pe ...

最新文章

  1. ecshop 修改评论功能
  2. 【mysql知识点】查看和修改系统参数
  3. linux 键盘 数值,键盘数值对照表
  4. 【答案放在最后，看题看不到答案】2019年上半年软件设计师 上午选择题
  5. CentOS下安装Memcached，Linux下安装Memcached，centos下安装memcached，linux下安装memcached...
  6. c 服务器传输大文件,cend.me：不须经过服务器，直接点对点的文件传输免费服务...
  7. Mol. Biol. Evol. | 中科院动物所揭示石山叶猴适应喀斯特环境的遗传机制
  8. 【华为云技术分享】ARM体系结构基础(3)
  9. php无限次执行函数,php-PHP一个方法根据传递值怎么执行多次？
  10. 《深入理解 Spring Cloud 与微服务构建》第四章 Dubbo
  11. 宝塔 php redis not found in_PHP之PSR-4规范：自动加载
  12. 计算机多媒体简历,计算机多媒体简历
  13. linux 服务器 告警声,服务器故障，报警声汇总
  14. 移动视频通话的过去、现在和未来
  15. 服务网格在好未来学而思网校的实践和思考
  16. R语言绘制频数分布直方图或密度分布曲线
  17. 计算机应用技术的论文如何写,计算机应用技术专业论文大纲模板范本 计算机应用技术专业论文大纲怎么写...
  18. Swin Transformer 不重叠窗口
  19. （精）Tableau数据可视化设计 实验报告
  20. 编写一个判断素数的函数，在主函数输入一个整数时，输出是否素数的信息。

热门文章

  1. linux 日志压缩及清理,linux下的日志压缩脚本
  2. 用Python分析S11决赛EDGvsDK，教你怎么硬核吹EDG
  3. JAVA中 怎么判断输入的字符串是不是一个数字
  4. Spring不同事务管理方式与声明式事务管理局部回滚处理方案
  5. 捡了鼠标开网吧系列——nodejs爬取电影链接
  6. 中国移动将于3月31日发布2018年全年财报
  7. 职业倾向测试脸型软件,脸型看你最适合啥工作
  8. vue自定义全局loading加载组件
  9. azure的虚拟机怎么选_如何正确选择Azure云虚拟机？
  10. mysql字符串索引原理_Mysql索引介绍和原理