[mw_shl_code=css, правда] <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin:0; підкладка: 0; }
.container{ width:750px; висота: 200px; margin:30px auto; overflow:hidden; Передісторія: #000; позиція:відносна; }
.eyesBoxs{ширина:130px; висота: 70px; позиція:абсолютна; топ:50px; }
.pullLeft{left:100px; }
.pullRight{right:100px; }
.profile{
ширина: 130px;
висота: 70px;
Передісторія: #fff;
позиція:абсолютна;
топ:0;
left:0;
overflow:hidden;
Радіус кордону: 0 70px 0 50px;
}
.shadow{
display:block;
ширина: 130px;
висота: 70px;
позиція:абсолютна;
топ:0;
z-індекс:5;
радіус кордону: 0 90px 0 60px;
box-shadow:5px 12px 2px 5px rgba(0,0,0,.25) inset;
}
.skewLeft{
transform:skewX(15°);
-webkit-transform:skewX(15deg);
-o-перетворення:skewX(15°);
}
.skewRight{
масштаб трансформації:skewX(-15°)(-1,1);
-webkit-transform:skewX(-15°) масштаб(-1,1);
-o-перетворення:skewX(-15°) масштаб(-1,1);
}
.basic{
ширина: 60px;
висота: 60px;
Передісторія: #000;
позиція:абсолютна;
топ: 50%;
ліво: 50%;
z-індекс:10;
margin-top:-30px;
радіус кордону: 60%;
}
.basic:before{
зміст:"";
display:block;
ширина: 10px;
висота: 11px;
позиція:абсолютна;
ліво:15px;
верх:15px;
z-індекс: 100;
радіус кордону: 60%;
Фонове зображення:Радіально-градієнт(коло,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-фонове зображення:радіально-градієнт(коло,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.9),rgba(225,225,225,0.3));
}
.pullLeft .basic{
поля ліворуч:-33px;
}
.pullRight .basic{
поля ліворуч:-27px;
}
.eyes{
ширина: 55px;
висота: 55px;
Передісторія: #ff0000;
позиція:абсолютна;
верх: 8px;
радіус кордону: 60%;
box-shadow:0 0 2px 4px #bd0000 inset,0 0 0 2px #000;
}
.pullLeft .eyes{left:35px; }
.pullПраві .eyes{right:35px; }
.eyes .line{
ширина: 64%;
зріст: 64%;
Передісторія: #ff0000;
позиція:абсолютна;
право:0;
left:0;
топ:10px;
margin:0 auto;
радіус кордону: 60%;
box-shadow:0 0 2px 0 #b20000 вставка;
}
.eyes .line:before{
зміст:"";
display:block;
ширина: 10px;
висота: 11px;
позиція:абсолютна;
ліво:3px;
топ:4px;
z-індекс: 100;
радіус кордону: 60%;
Фон-зображення:Радіальний градієнт(Коло,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-фонове зображення:радіальне градієнт(коло,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.7),rgba(225,225,225,0.3));
}
.eyes .line:after{
зміст:"";
display:block;
ширина: 10px;
висота: 10px;
позиція:абсолютна;
Передісторія: #000;
право:0;
ліво:-1px;
верх: 13px;
z-індекс: 100;
margin:0 auto;
радіус кордону: 60%;
Трансформація:Обертання (150 градусів);
-webkit-transform:rotate(150°);
-o-перетворення:обертання (150 градусів);
анімація: Colour 20s Ease-Infinite Infinite;
-webkit-animation:кольоровий 20-секундний легкий вхід нескінченно;
-o-анімація: Кольорова 20-секундна легка інтеграція нескінченно;
}
@keyframes колір{
0%{background:#000; }
35%{background:#000; }
40%{background:#f00; }
100%{background:#f00; }
}
@-webkit-keyframes color{
0%{background:#000; }
35%{background:#000; }
40%{background:#f00; }
100%{background:#f00; }
}
@-o-keyframes колір{
0%{background:#000; }
35%{background:#000; }
40%{background:#f00; }
100%{background:#f00; }
}
/*******三勾玉 开始*******/
.hook{
ширина: 92%;
зріст: 92%;
позиція:абсолютна;
право:0;
left:0;
топ:5%;
margin:0 auto;
радіус кордону: 60%;
}
.hook .bar{
display:block;
ширина: 100%;
зріст: 100%;
позиція:абсолютна;
left:0;
топ:0;
радіус кордону: 60%;
}
.hook .bar b{
display:block;
ширина: 8px;
висота: 8px;
Передісторія: #000;
позиція:абсолютна;
left:0;
bottom:0;
радіус кордону: 60%;
}
.hook .bar b:after{
зміст:"";
ширина: 8px;
висота: 8px;
border-color:transparent transparent #000 прозорий;
стиль бордюра: суцільний;
ширина межі:0 0 5px 0;
позиція:абсолютна;
верх:-1px;
ліво:-3px;
z-індекс: 100;
Радіус кордону:0 0 0 70%;
Трансформація:Обертання (-75°);
-webkit-transform:rotate(-75°);
-o-перетворення:обертання (-75 градусів);
}
.hook .bar:nth-child(1){
Трансформація:Обертання (10°);
-webkit-transform:rotate(10°);
-o-перетворення:обертання(10°);
}
.hook .bar:nth-child(2){
Трансформація:Обертання (130°);
-webkit-transform:rotate(130°);
-o-перетворення:обертання (130°);
}
.hook .bar:nth-child(3){
Трансформація:Обертання (250 градусів);
-webkit-transform:rotate(250°);
-o-перетворення:обертання (250 градусів);
}
/*******三勾玉 结束*******/
/*******万花筒 开始*******/
.tube{
ширина: 93%;
зріст: 93%;
позиція:абсолютна;
право:0;
left:0px;
топ:2px;
margin:0 auto;
Передісторія: #000;
радіус кордону: 60%;
}
.tube .bar{
display:block;
ширина: 10px;
висота: 20px;
стиль бордюра: суцільний;
ширина межі:0 0 0 10px;
border-color:transparent transparent transparent black;
позиція:абсолютна;
Радіус кордону: 100% 0 0 0;
}
.tube .bar:nth-child(1){
верх:-10px;
ліво:2px;
трансформація:обертання (-10 градусів);
}
.tube .bar:nth-child(2){
bottom:0px;
праворуч:-10px;
Трансформація:Обертання (105 градусів);
-webkit-transform:rotate(105°);
-o-перетворення:обертання (105 градусів);
}
.tube .bar:nth-child(3){
внизу:-3px;
ліво: -10px;
Трансформація:Обертання (235 градусів);
-webkit-transform:rotate(235°);
-o-перетворення:обертання (235 градусів);
}
/*******万花筒 结束*******/
/*******轮回眼 开始*******/
.trans{
ширина: 130px;
висота: 70px;
позиція:абсолютна;
overflow:hidden;
топ:0;
left:0;
Радіус кордону: 0 70px 0 50px;
}
.trans .bar{
display:block;
ширина: 9px;
висота: 9px;
Передісторія: #000;
позиція:абсолютна;
топ: 50%;
z-індекс:2;
поля:-4px 0 0 -4px;
радіус кордону: 60%;
}
.trans .bar:after{
зміст:"";
display:block;
ширина: 11px;
висота: 12px;
позиція:абсолютна;
верх:-13px;
ліво: -13px;
z-індекс: 100;
радіус кордону: 60%;
Передумови: RGBA (250,250,250,,85);
}
.pullLeft .trans .bar{
трансформація:skewX(-15°);
-webkit-transform:skewX(-15°);
-o-перетворення:skewX(-15°);
}
.pullLeft .trans .bar{left:48%; }
.pullRight .trans .bar{
масштаб трансформації:skewX(-15°)(-1,1);
-webkit-transform:skewX(-15°) масштаб(-1,1);
-o-перетворення:skewX(-15°) масштаб(-1,1);
}
.pullRight .trans .bar{right:48%; }
/*******轮回眼 结束*******/
.ani-вузький{
Анімація: Ani-вузький 20-х, легкий вихід нескінченний;
-webkit-animation:ani-вузький 20-секундний легкий вихід нескінченний;
-o-анімація: ani-вузький 20-секундний легкий вихід нескінченний;
}
@keyframes ani-narrow{
0%{прозорість:1; transform:scale(1); }
5%{непрозорість:1; transform:scale(1); }
10%{непрозорість:0; transform:scale(0); }
87%{прозорість:0; transform:scale(0); }
90%{прозорість:1; transform:scale(1); }
100%{непрозорість:1; transform:scale(1); }
}
@-webkit-keyframes ani-narrow{
0%{прозорість:1; -webkit-transform:scale(1); }
5%{непрозорість:1; -webkit-transform:scale(1); }
10%{непрозорість:0; -webkit-transform:scale(0); }
87%{прозорість:0; -webkit-transform:scale(0); }
90%{прозорість:1; -webkit-transform:scale(1); }
100%{непрозорість:1; -webkit-transform:scale(1); }
}
@-o-keyframes ani-narrow{
0%{прозорість:1; -o-перетворення:масштаб(1); }
5%{непрозорість:1; -o-перетворення:масштаб(1); }
10%{непрозорість:0; -o-перетворення:масштаб(0); }
87%{прозорість:0; -o-перетворення:масштаб(0); }
90%{прозорість:1; -o-перетворення:масштаб(1); }
100%{непрозорість:1; -o-перетворення:масштаб(1); }
}
.ani-зум{
анімація: ani-zoom 20s linear infinite;
-вебкіт-анімація: ani-zoom 20s linear infinite;
-O-анімація: Ani-Zoom 20S Linear Infinite;
}
@keyframes ani-zoom{
0%{прозорість:0; transform:scale(0); }
5%{непрозорість:0; transform:scale(0); }
8%{прозорість:1; transform:scale(1); }
60%{прозорість:1; transform:scale(1); }
62%{прозорість:0; трансформація:масштаб (1.5); }
100%{прозорість:0; transform:scale(0); }
}
@-webkit-keyframes ani-zoom{
0%{прозорість:0; -webkit-transform:scale(0); }
5%{непрозорість:0; -webkit-transform:scale(0); }
8%{прозорість:1; -webkit-transform:scale(1); }
60%{прозорість:1; -webkit-transform:scale(1); }
62%{прозорість:0; -webkit-transform:scale(1.5); }
100%{прозорість:0; -webkit-transform:scale(0); }
}
@-o-keyframes ani-zoom{
0%{прозорість:0; -o-перетворення:масштаб(0); }
5%{непрозорість:0; -o-перетворення:масштаб(0); }
8%{прозорість:1; -o-перетворення:масштаб(1); }
60%{прозорість:1; -o-перетворення:масштаб(1); }
62%{прозорість:0; -o-перетворення:масштаб (1.5); }
100%{прозорість:0; -o-перетворення:масштаб(0); }
}
.ani-rotateHook{
анімація: ani-rotateГачок 20s легкий вхід нескінченно;
-webkit-animation:ani-rotateГачок 20-х легко-вхід нескінченний;
-o-animation:ani-rotateГачок 20s ease-in infinite;
}
@keyframes ani-rotateHook{
0%{прозорість:0; transform:scale(0) rotate(0); }
9%{непрозорість:0; transform:scale(0) rotate(0); }
13%{прозорість:1; Трансформація:Масштаб(1) обертатися (-360 градусів); }
35%{прозорість:1; Трансформація:Масштаб(1) обертатися (-360 градусів); }
38%{непрозорість:0; Трансформація:Масштаб(1,8) обертатися (-540 градусів); }
100%{прозорість:0; transform:scale(0) rotate(0); }
}
@-webkit-keyframes ani-rotateHook{
0%{прозорість:0; -webkit-transform:scale(0) rotate(0); }
9%{непрозорість:0; -webkit-transform:scale(0) rotate(0); }
13%{прозорість:1; -webkit-transform:scale(1) обертається(-360 градусів); }
35%{прозорість:1; -webkit-transform:scale(1) обертається(-360 градусів); }
38%{непрозорість:0; -webkit-transform:scale(1.8) rotate(-540°); }
100%{прозорість:0; -webkit-transform:scale(0) rotate(0); }
}
@-o-keyframes ani-rotateHook{
0%{прозорість:0; -o-transform:scale(0) rotate(0); }
9%{непрозорість:0; -o-transform:scale(0) rotate(0); }
13%{прозорість:1; -o-перетворення:масштаб(1) обертатися(-360 градусів); }
35%{прозорість:1; -o-перетворення:масштаб(1) обертатися(-360 градусів); }
38%{непрозорість:0; -o-перетворення:масштаб(1.8) обертати (-540 градусів); }
100%{прозорість:0; -o-transform:scale(0) rotate(0); }
}
.ani-rotateTube{
анімація: ani-rotate, Tube 20s легкий вхід-вихід нескінченно;
-webkit-animation:ani-rotateTube 20s легко входить нескінченно;
-o-анімація:ani-rotateTube 20s легко-вхід-вихід нескінченно;
}
@keyframes ani-rotateTube{
0%{прозорість:0; transform:scale(0) rotate(0); }
35%{прозорість:0; transform:scale(0) rotate(0); }
40%{непрозорість:1; Трансформація:Масштаб(1) обертатися (-360 градусів); }
60%{прозорість:1; Трансформація:Масштаб(1) обертатися (-360 градусів); }
100%{непрозорість:1; Трансформація:Масштаб(1) обертатися (-360 градусів); }
}
@-webkit-keyframes ani-rotateTube{
0%{прозорість:0; -webkit-transform:scale(0) rotate(0); }
35%{прозорість:0; -webkit-transform:scale(0) rotate(0); }
40%{непрозорість:1; -webkit-transform:scale(1) обертається(-360 градусів); }
60%{прозорість:1; -webkit-transform:scale(1) обертається(-360 градусів); }
100%{непрозорість:1; -webkit-transform:scale(1) обертається(-360 градусів); }
}
@-o-keyframes ani-rotateTube{
0%{прозорість:0; -o-transform:scale(0) rotate(0); }
35%{прозорість:0; -o-transform:scale(0) rotate(0); }
40%{непрозорість:1; -o-перетворення:масштаб(1) обертатися(-360 градусів); }
60%{прозорість:1; -o-перетворення:масштаб(1) обертатися(-360 градусів); }
100%{непрозорість:1; -o-перетворення:масштаб(1) обертатися(-360 градусів); }
}
.ani-тінь{
Анімація: Ani-Shadow 20s Linear Infinite;
-webkit-анімація: ani-shadow 20s linear infinite;
-o-анімація: ani-shadow 20s linear infinite;
}
@keyframes ani-shadow{
0%{прозорість:0; box-shadow:none; }
58%{прозорість:0; box-shadow:none; }
64%{прозорість:1; box-shadow:0 0 0 14px #464646,0 0 0 16px #000,0 0 0 0 30px #6c6c6c,0 0 0 32px #000,0 0 0 44px #a6a6a6,0 0 0 46px #000; }
87%{прозорість:1; box-shadow:0 0 0 14px #464646,0 0 0 16px #000,0 0 0 0 30px #6c6c6c,0 0 0 32px #000,0 0 0 44px #a6a6a6,0 0 0 46px #000; }
90%{непрозорість:0; box-shadow:none; }
100%{прозорість:0; box-shadow:none; }
}
@-webkit-keyframes ani-shadow{
0%{прозорість:0; box-shadow:none; }
58%{прозорість:0; box-shadow:none; }
64%{прозорість:1; box-shadow:0 0 0 14px #464646,0 0 0 16px #000,0 0 0 0 30px #6c6c6c,0 0 0 32px #000,0 0 0 44px #a6a6a6,0 0 0 46px #000; }
87%{прозорість:1; box-shadow:0 0 0 14px #464646,0 0 0 16px #000,0 0 0 0 30px #6c6c6c,0 0 0 32px #000,0 0 0 44px #a6a6a6,0 0 0 46px #000; }
90%{непрозорість:0; box-shadow:none; }
100%{прозорість:0; box-shadow:none; }
}
@-o-keyframes ani-shadow{
0%{прозорість:0; box-shadow:none; }
58%{прозорість:0; box-shadow:none; }
64%{прозорість:1; box-shadow:0 0 0 14px #464646,0 0 0 16px #000,0 0 0 0 30px #6c6c6c,0 0 0 32px #000,0 0 0 44px #a6a6a6,0 0 0 46px #000; }
87%{прозорість:1; box-shadow:0 0 0 14px #464646,0 0 0 16px #000,0 0 0 0 30px #6c6c6c,0 0 0 32px #000,0 0 0 44px #a6a6a6,0 0 0 46px #000; }
90%{непрозорість:0; box-shadow:none; }
100%{прозорість:0; box-shadow:none; }
}
.ani-вузький,.ani-зум,.ani-обертатиГак,
.ani-rotateTube,.ani-shadow,.eyes .line:after{
animation-fill-mode:forwards;
-webkit-animation-fill-mode:обидва;
-o-animation-fill-mode:обидва;
}
</style>
</head>
<body>
<div class="container">
<!-- ліве око починається — >
<div class="eyesBoxs pullLeft">
<div class="profile skewLeft"></div>
<div class="shadow skewLeft"></div>
<div class="базовий ані-вузький"></div>
<div class="очі ani-zoom">
<div class="лінія">
<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="базовий ані-вузький"></div>
<div class="очі ani-zoom">
<div class="лінія">
<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]
|
Опубліковано 14.11.2014 17:55:02
|
|
|
|
Орендодавець|
Опубліковано 14.11.2014 17:57:04
|
Опубліковано 14.11.2014 17:58:15
|
