[mw_shl_code=css,adevărat] <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin:0; umplutură: 0; }
.container{ width:750px; Înălțime: 200px; marjă: 30px auto; overflow: ascuns; Context:#000; poziție: relativ; }
.eyesBoxs{lățime:130px; înălțime: 70px; poziție: absolut; top: 50px; }
.pullLeft{left:100px; }
.pullRight{dreapta:100px; }
.profile{
lățime: 130px;
înălțime: 70px;
Context:#fff;
poziție: absolut;
top:0;
stânga: 0;
overflow: ascuns;
rază de margine: 0 70px 0 50px;
}
.shadow{
display:block;
lățime: 130px;
înălțime: 70px;
poziție: absolut;
top:0;
z-index:5;
rază de frontieră: 0 90px 0 60px;
box-shadow:5px 12px 2px 5px RGB (0,0,0,25) inserție;
}
.skewLeft{
transformă: skewX(15grade);
-webkit-transformare:skewX(15°);
-o-transform: skewX(15°C);
}
.skewRight{
transformă: skewX(-15grade) scară(-1,1);
-transformare-webkit:skewX(-15deg) scară(-1,1);
-o-transformă: skewX(-15deg) scară(-1,1);
}
.basic{
lățime: 60px;
Înălțime: 60px;
Context:#000;
poziție: absolut;
top: 50%;
stânga: 50%;
Z-index:10;
margine-sus:-30px;
rază de graniță: 60%;
}
.basic:înainte{
conținut:"";
display:block;
lățime:10px;
înălțime: 11px;
poziție: absolut;
stânga: 15px;
top: 15px;
z-index: 100;
rază de graniță: 60%;
imagine de fundal: gradient radial (cerc, rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.9),rgba(225,225,225,0.3));
-webkit-imagine-fundal:radial-gradient(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.9),rgba(225,225,225,0.3));
-o-imagine-fundal: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{
margine-stânga:-33px;
}
.pullRight .basic{
margine-stânga:-27 px;
}
.eyes{
lățime: 55px;
înălțime: 55px;
Context:#ff0000;
poziție: absolut;
sus: 8px;
rază de graniță: 60%;
box-shadow:0 0 2px 4px #bd0000 inserat,0 0 0 2px #000;
}
.pullLeft .eyes{left:35px; }
.pullRightRight .eyes{right:35px; }
.ochi .linie{
lățime:64%;
înălțime:64%;
Context:#ff0000;
poziție: absolut;
corect:0;
stânga: 0;
top: 10px;
marjă: 0 auto;
rază de graniță: 60%;
box-shadow:0 0 2px 0 #b20000 inserție;
}
.eyes .line:before{
conținut:"";
display:block;
lățime:10px;
înălțime: 11px;
poziție: absolut;
stânga: 3px;
top: 4px;
z-index: 100;
rază de graniță: 60%;
imagine de fundal: Radial-gradient(Circle,RGB(225,225,225),RGB(225,225,225),RGB(225,225,225,0.7),RGB(225,225,0.3));
-webkit-imagine-fundal:radial-gradient(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.7),rgba(225,225,225,0.3));
-o-imagine-fundal: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:după{
conținut:"";
display:block;
lățime:10px;
înălțime: 10px;
poziție: absolut;
Context:#000;
corect:0;
stânga:-1px;
sus: 13px;
z-index: 100;
marjă: 0 auto;
rază de graniță: 60%;
transformă: rotește (150°);
-webkit-transformă: rotește (150°);
-O-transformare: rotește (150°);
Animație: Colour 20s Easy-In Infinit;
-webkit-animație: culoare 20s ușurință-acces infinit;
-o-animation: culoare 20s easy-in infinit;
}
@keyframes culoare{
0%{fundal:#000; }
35%{background:#000; }
40%{background:#f00; }
100%{fundal:#f00; }
}
@-webkit-keyframes colour{
0%{fundal:#000; }
35%{background:#000; }
40%{background:#f00; }
100%{fundal:#f00; }
}
@-o-keyframes colour{
0%{fundal:#000; }
35%{background:#000; }
40%{background:#f00; }
100%{fundal:#f00; }
}
/*******三勾玉 开始*******/
.hook{
lățime:92%;
înălțime:92%;
poziție: absolut;
corect:0;
stânga: 0;
top: 5%;
marjă: 0 auto;
rază de graniță: 60%;
}
.hook .bar{
display:block;
lățime: 100%;
înălțime: 100%;
poziție: absolut;
stânga: 0;
top:0;
rază de graniță: 60%;
}
.hook .bar b{
display:block;
lățime: 8px;
înălțime: 8px;
Context:#000;
poziție: absolut;
stânga: 0;
Partea de jos: 0;
rază de graniță: 60%;
}
.hook .bar b:după{
conținut:"";
lățime: 8px;
înălțime: 8px;
culoare-bordură: transparent transparent #000 transparent;
Stil Border: Solid;
lățime-borduri:0 0 5px 0;
poziție: absolut;
sus:-1px;
stânga:-3px;
z-index: 100;
rază de frontieră: 0 0 0 70%;
transformă: rotește (-75°);
-webkit-transformă: rotește(-75°);
-O-transformare: rotește(-75°);
}
.hook .bar:nh-child(1){
transformă: rotește (10 grade);
-webkit-transformă: rotește (10°);
-O-transformare: rotește(10grade);
}
.hook .bar:nh-child(2){
transformă: rotește (130°);
-webkit-transformă: rotește (130°);
-O-transformare: rotește(130°);
}
.hook .bar:nth-child(3){
transformă: rotește (250°);
-webkit-transformare: rotește(250°);
-O-transformă: rotește(250°);
}
/*******三勾玉 结束*******/
/*******万花筒 开始*******/
.tube{
lățime:93%;
înălțime:93%;
poziție: absolut;
corect:0;
stânga:0px;
top:2px;
marjă: 0 auto;
Context:#000;
rază de graniță: 60%;
}
.tube .bar{
display:block;
lățime:10px;
înălțime: 20px;
Stil Border: Solid;
lățime-borduri: 0 0 0 10px;
culoare-bordură: transparent transparent transparent negru;
poziție: absolut;
rază de graniță: 100% 0 0 0;
}
.tube .bar:nth-child(1){
sus:-10px;
stânga: 2px;
transformă: rotește (-10 grade);
}
.tube .bar:nth-child(2){
bottom:0px;
dreapta:-10px;
transformă: rotește (105°);
-webkit-transformă: rotește(105°);
-O-transformare: rotește(105°);
}
.tube .bar:n-copil(3){
jos:-3px;
stânga: -10px;
transformă: rotește (235 grade);
-webkit-transformă: rotește(235°);
-O-transformare: rotește(235°);
}
/*******万花筒 结束*******/
/*******轮回眼 开始*******/
.trans{
lățime: 130px;
înălțime: 70px;
poziție: absolut;
overflow: ascuns;
top:0;
stânga: 0;
rază de margine: 0 70px 0 50px;
}
.trans .bar{
display:block;
lățime:9px;
înălțime: 9px;
Context:#000;
poziție: absolut;
top: 50%;
z-index:2;
marjă:-4px 0 0 -4px;
rază de graniță: 60%;
}
.trans .bar:după{
conținut:"";
display:block;
lățime:11px;
înălțime: 12px;
poziție: absolut;
top:-13px;
stânga:-13px;
z-index: 100;
rază de graniță: 60%;
Context: RGBA (250,250,250,0,85);
}
.pullLeft .trans .bar{
transformă: skewX(-15°C);
-transformare-webkit:skewX(-15°);
-o-transformă: skewX(-15°);
}
.pullLeft .trans .bar{left:48%; }
.pullRight .trans .bar{
transformă: skewX(-15grade) scară(-1,1);
-transformare-webkit:skewX(-15deg) scară(-1,1);
-o-transformă: skewX(-15deg) scară(-1,1);
}
.pullRight .trans .bar{right:48%; }
/*******轮回眼 结束*******/
.ani-îngust{
animație: ani-narrow 20s ease-out infinit;
-webkit-animație: ani-narrow 20s ease-out infinit;
-o-animation:ani-narrow 20s ease-out infinite;
}
@keyframes ani-narrow{
0%{opacitate:1; transformă:scară(1); }
5%{opacitate:1; transformă:scară(1); }
10%{opacitate:0; transformă:scară(0); }
87%{opacitate:0; transformă:scară(0); }
90%{opacitate:1; transformă:scară(1); }
100%{opacitate:1; transformă:scară(1); }
}
@-webkit-keyframes ani-narrow{
0%{opacitate:1; -webkit-transformare:scale(1); }
5%{opacitate:1; -webkit-transformare:scale(1); }
10%{opacitate:0; -webkit-transformare:scale(0); }
87%{opacitate:0; -webkit-transformare:scale(0); }
90%{opacitate:1; -webkit-transformare:scale(1); }
100%{opacitate:1; -webkit-transformare:scale(1); }
}
@-o-keyframes ani-narrow{
0%{opacitate:1; -o-transformare:scară(1); }
5%{opacitate:1; -o-transformare:scară(1); }
10%{opacitate:0; -o-transformă: scară(0); }
87%{opacitate:0; -o-transformă: scară(0); }
90%{opacitate:1; -o-transformare:scară(1); }
100%{opacitate:1; -o-transformare:scară(1); }
}
.ani-zoom{
Animație: ani-zoom 20s liniar infinit;
-webkit-animație: ani-zoom 20s liniar infinit;
-o-animation:ani-zoom 20s liniar infinit;
}
@keyframes ani-zoom{
0%{opacitate:0; transformă:scară(0); }
5%{opacitate:0; transformă:scară(0); }
8%{opacitate:1; transformă:scară(1); }
60%{opacitate:1; transformă:scară(1); }
62%{opacitate:0; transformă:scară(1.5); }
100%{opacitate:0; transformă:scară(0); }
}
@-webkit-keyframes ani-zoom{
0%{opacitate:0; -webkit-transformare:scale(0); }
5%{opacitate:0; -webkit-transformare:scale(0); }
8%{opacitate:1; -webkit-transformare:scale(1); }
60%{opacitate:1; -webkit-transformare:scale(1); }
62%{opacitate:0; -webkit-transformare:scale(1.5); }
100%{opacitate:0; -webkit-transformare:scale(0); }
}
@-o-keyframes ani-zoom{
0%{opacitate:0; -o-transformă: scară(0); }
5%{opacitate:0; -o-transformă: scară(0); }
8%{opacitate:1; -o-transformare:scară(1); }
60%{opacitate:1; -o-transformare:scară(1); }
62%{opacitate:0; -o-transformă: scară(1.5); }
100%{opacitate:0; -o-transformă: scară(0); }
}
.ani-rotateHook{
animație: ani-rotateHook 20s easy-in infinit;
-webkit-animație:ani-rotațieHook 20s easy-in infinit;
-o-animation:ani-rotateHook 20s easy-in infinit;
}
@keyframes ani-rotateHook{
0%{opacitate:0; transformă:scale(0) rotește(0); }
9%{opacity:0; transformă:scale(0) rotește(0); }
13%{opacitate:1; transformă: scale(1) rotește(-360°); }
35%{opacitate:1; transformă: scale(1) rotește(-360°); }
38%{opacitate:0; transformare:scară(1,8) rotire(-540°C); }
100%{opacitate:0; transformă:scale(0) rotește(0); }
}
@-webkit-keyframes ani-rotateHook{
0%{opacitate:0; -webkit-transformare: scară(0) rotire(0); }
9%{opacity:0; -webkit-transformare: scară(0) rotire(0); }
13%{opacitate:1; -webkit-transformare:scară(1) rotire(-360°); }
35%{opacitate:1; -webkit-transformare:scară(1) rotire(-360°); }
38%{opacitate:0; -webkit-transformare: scară(1,8) rotire(-540°); }
100%{opacitate:0; -webkit-transformare: scară(0) rotire(0); }
}
@-o-keyframes ani-rotateHook{
0%{opacitate:0; -o-transformare: scară(0) rotește(0); }
9%{opacity:0; -o-transformare: scară(0) rotește(0); }
13%{opacitate:1; -o-transformă: scară(1) rotește(-360°); }
35%{opacitate:1; -o-transformă: scară(1) rotește(-360°); }
38%{opacitate:0; -o-transformă: scară(1.8) rotește(-540°); }
100%{opacitate:0; -o-transformare: scară(0) rotește(0); }
}
.ani-rotateTube{
animație: ani-rotateTubul 20 cu ușurință de ieșire infinită;
-webkit-animație:ani-rotațieTubul 20 cu ușurință de ieșire infinit;
-o-animation:ani-rotateTube-in-out infinit;
}
@keyframes ani-rotateTube{
0%{opacitate:0; transformă:scale(0) rotește(0); }
35%{opacity:0; transformă:scale(0) rotește(0); }
40%{opacitate:1; transformă: scale(1) rotește(-360°); }
60%{opacitate:1; transformă: scale(1) rotește(-360°); }
100%{opacitate:1; transformă: scale(1) rotește(-360°); }
}
@-webkit-keyframes ani-rotateTube{
0%{opacitate:0; -webkit-transformare: scară(0) rotire(0); }
35%{opacity:0; -webkit-transformare: scară(0) rotire(0); }
40%{opacitate:1; -webkit-transformare:scară(1) rotire(-360°); }
60%{opacitate:1; -webkit-transformare:scară(1) rotire(-360°); }
100%{opacitate:1; -webkit-transformare:scară(1) rotire(-360°); }
}
@-o-keyframes ani-rotateTube{
0%{opacitate:0; -o-transformare: scară(0) rotește(0); }
35%{opacity:0; -o-transformare: scară(0) rotește(0); }
40%{opacitate:1; -o-transformă: scară(1) rotește(-360°); }
60%{opacitate:1; -o-transformă: scară(1) rotește(-360°); }
100%{opacitate:1; -o-transformă: scară(1) rotește(-360°); }
}
.ani-umbră{
Animație: ani-shadow 20s liniar infinit;
-webkit-animație: ani-shadow 20s linear infinit;
-o-animation:ani-shadow 20s linear infinit;
}
@keyframes ani-shadow{
0%{opacitate:0; umbră-cutie: niciunul; }
58%{opacitate:0; umbră-cutie: niciunul; }
64%{opacitate: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%{opacitate:0; umbră-cutie: niciunul; }
100%{opacitate:0; umbră-cutie: niciunul; }
}
@-webkit-keyframes ani-shadow{
0%{opacitate:0; umbră-cutie: niciunul; }
58%{opacitate:0; umbră-cutie: niciunul; }
64%{opacitate: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%{opacitate:0; umbră-cutie: niciunul; }
100%{opacitate:0; umbră-cutie: niciunul; }
}
@-o-keyframes ani-shadow{
0%{opacitate:0; umbră-cutie: niciunul; }
58%{opacitate:0; umbră-cutie: niciunul; }
64%{opacitate: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%{opacitate:0; umbră-cutie: niciunul; }
100%{opacitate:0; umbră-cutie: niciunul; }
}
.ani-îngustă, .ani-zoom, .ani-roteșteHook,
.ani-roteTube,.ani-umbră,.ochi .line:after{
mod de umplere animație: înainte;
-webkit-animație-mod de umplere: ambele;
-o-animation-fill-mode:ambele;
}
</style>
</head>
<body>
<div class="container">
<!-- ochi stâng începe - >
<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-umbră"></span>
</div>
</div>
<!-- capăt al ochiului stâng - >
<!-- ochiul drept începe - >
<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-umbră"></span>
</div>
</div>
<!-- capetele ochiului drept - >
</div>
</body>
[/</html>mw_shl_code]
|
Postat pe 14.11.2014 17:55:02
|
|
|
|
Proprietarul|
Postat pe 14.11.2014 17:57:04
|
Postat pe 14.11.2014 17:58:15
|
