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. 靠，上班打游戏！不，我只是在Minecraft里管理Kubernetes...
  2. Kubernetes的ConfigMap说明
  3. 【数理知识】《随机过程》方兆本老师-第1章-引论
  4. 收藏一个在线思维导图的制作网站
  5. 3.3-3.9 周记
  6. python列表总结
  7. 【hihocoder 1312】搜索三·启发式搜索(启发式搜索写法)
  8. PyTorch热身小案例
  9. 高并发架构系列：如何解决Redis雪崩、穿透、并发等5大难题
  10. python横向输出字符串_Python字符串拼接和格式化输出
  11. 一步教会fpga数字信号处理
  12. pycharm和python解释器安装
  13. 联想ThinkPad E15 2021款 酷睿版怎么样？测评值得买吗？
  14. OpenGL ES：相机预览添加滤镜效果
  15. 学并发编程，透彻理解这三个核心是关键
  16. btcTrade_project
  17. 安卓开发Android studio运行出现ERROR: Installed Build Tools revision 32.0.0 is corrupted.的解决方法
  18. java贪心,java实现贪心算法
  19. node.js命令行程序在Windows系统和Linux系统下的部署
  20. 微信小程序html文章添加跳转链接,微信小程序跳转外部链接（h5页面）以及数据交互...

热门文章

  1. 富人和穷人 12个经典差异
  2. 2022 年全国职业院校技能大赛高职组云计算赛项赛题解析-“私有云 赛项” 之 《私有云运维开发》！！超详细！
  3. QT4、5、6各版本之间的特点和选择
  4. 不禁网页的浏览器_明明浏览“不良网站”危险，为啥手机浏览器却不强制禁止访问？...
  5. linux 系统裁减指南,Linux 系统裁减指南
  6. 2018年最新版微信公众号本地测试方案
  7. 功能测试数据测试之边界值测试方法
  8. php 不重复订单号,php如何生成不重复的订单号
  9. 二手手机交易存个人信息安全隐患？旧手机到底该怎么样处理？
  10. java计算机毕业设计校园旺角超市外卖平台源码+mysql数据库+lw文档+系统+调试部署