[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{дясно:100px; }
.profile{
ширина: 130px;
височина: 70px;
Предистория: #fff;
позиция:абсолютна;
top:0;
left:0;
overflow:hidden;
граничн радиус: 0 70px 0 50px;
}
.shadow{
display:block;
ширина: 130px;
височина: 70px;
позиция:абсолютна;
top:0;
z-индекс:5;
граничн радиус:0 90px 0 60px;
box-shadow:5px 12px 2px 5px rgba(0,0,0,.25) вложение;
}
.skewLeft{
transform:skewX(15 градуса);
-webkit-transform:skewX(15°);
-o-трансформация:skewX(15 градуса);
}
.skewRight{
transform:skewX(-15°) мащаб(-1,1);
-webkit-transform:skewX(-15 градуса) мащаб(-1,1);
-o-трансформация:skewX(-15°) мащаб(-1,1);
}
.basic{
ширина: 60px;
височина: 60px;
Предистория:#000;
позиция:абсолютна;
топ:50%;
ляво: 50%;
z-индекс:10;
горен маргин: -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{дясно:35px; }
.eyes .line{
ширина: 64%;
височина: 64%;
Предистория: #ff0000;
позиция:абсолютна;
дясно:0;
left:0;
горно: 10px;
margin:0 auto;
радиус на границата: 60%;
box-shadow:0 0 2px 0 #b20000 inset;
}
.eyes .line:before{
съдържание:"";
display:block;
ширина: 10px;
височина: 11px;
позиция:абсолютна;
ляво: 3px;
top:4px;
z-индекс: 100;
радиус на границата: 60%;
Фон-изображение:Радиален-градиент(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-фоново изображение:радиален-градиент(кръг, rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.7),rgba(225,225,225,0.3));
}
.eyes .line:след{
съдържание:"";
display:block;
ширина: 10px;
височина: 10px;
позиция:абсолютна;
Предистория:#000;
дясно:0;
ляво:-1px;
връх:13px;
z-индекс: 100;
margin:0 auto;
радиус на границата: 60%;
Трансформация:Завърти (150 градуса);
-webkit-transform:rotate(150°);
-o-трансформация:завърти (150 градуса);
анимация: Цветни 20-ки, лесно влизане безкрайно;
-Webkit-Animation:Colour 20s ease-in infinite;
-o-анимация: Цветни 20-S Ease-In безкрайно;
}
@keyframes цвят{
0%{background:#000; }
35%{background:#000; }
40%{background:#f00; }
100%{background:#f00; }
}
@-webkit-keyframes цвят{
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;
top: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 прозрачен;
стил border: плътен;
border-width: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;
наляво:0px;
топ:2px;
margin:0 auto;
Предистория:#000;
радиус на границата: 60%;
}
.tube .bar{
display:block;
ширина: 10px;
височина: 20px;
стил border: плътен;
border-width: 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){
долно: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;
top: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{
transform:skewX(-15 градуса);
-webkit-transform:skewX(-15 градуса);
-o-трансформация:skewX(-15 градуса);
}
.pullLeft .trans .bar{left:48%; }
.pullRight .trans .bar{
transform:skewX(-15°) мащаб(-1,1);
-webkit-transform:skewX(-15 градуса) мащаб(-1,1);
-o-трансформация:skewX(-15°) мащаб(-1,1);
}
.pullRight .trans .bar{дясно:48%; }
/*******轮回眼 结束*******/
.ani-тесен{
Анимация: Ani-Narrow 20s Easeout Infinite;
-webkit-animation:ani-narrow 20s ease-out infinite;
-O-анимация: ани-тесни 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-transform:scale(0); }
87%{непрозрачност:0; -o-transform:scale(0); }
90%{прозрачност:1; -o-трансформация:скала(1); }
100%{непрозрачност:1; -o-трансформация:скала(1); }
}
.ani-зум{
Анимация: Ani-Zoom 20s Linear Infinite;
-webkit-animation:ani-zoom 20s linear infinite;
-o-animation: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; transform:scale (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-transform:scale(0); }
5%{непрозрачност:0; -o-transform:scale(0); }
8%{непрозрачност:1; -o-трансформация:скала(1); }
60%{непрозрачност:1; -o-трансформация:скала(1); }
62%{непрозрачност:0; -o-трансформация:скала (1.5); }
100%{непрозрачност:0; -o-transform:scale(0); }
}
.ani-rotateHook{
анимация: 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%{непрозрачност:0; transform:scale(0) rotate(0); }
9%{непрозрачност:0; transform:scale(0) rotate(0); }
13%{непрозрачност:1; Transform:Scale(1) върти се (-360 градуса); }
35%{прозрачност:1; Transform:Scale(1) върти се (-360 градуса); }
38%{непрозрачност:0; Transform:scale(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) завърти (-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{
анимация: ани-въртенеTube 20s леко влизане-излизане безкрайно;
-webkit-animation:ani-rotateTube 20s леко влизане-излизане безкрайно;
-o-animation:ani-rotateTube 20s леко влизане-излизане безкрайно;
}
@keyframes ani-rotateTube{
0%{непрозрачност:0; transform:scale(0) rotate(0); }
35%{непрозрачност:0; transform:scale(0) rotate(0); }
40%{непрозрачност:1; Transform:Scale(1) върти се (-360 градуса); }
60%{непрозрачност:1; Transform:Scale(1) върти се (-360 градуса); }
100%{непрозрачност:1; Transform:Scale(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-shadow{
Анимация: Ani-Shadow 20s Linear Infinite;
-webkit-animation:ani-shadow 20s linear infinite;
-o-animation:ani-shadow 20s linear infinite;
}
@keyframes ani-shadow{
0%{непрозрачност:0; box-shadow:noe; }
58%{непрозрачност:0; box-shadow:noe; }
64%{прозрачност: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%{непрозрачност: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%{непрозрачност:0; box-shadow:noe; }
100%{непрозрачност:0; box-shadow:noe; }
}
@-webkit-keyframes ani-shadow{
0%{непрозрачност:0; box-shadow:noe; }
58%{непрозрачност:0; box-shadow:noe; }
64%{прозрачност: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%{непрозрачност: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%{непрозрачност:0; box-shadow:noe; }
100%{непрозрачност:0; box-shadow:noe; }
}
@-o-keyframes ani-shadow{
0%{непрозрачност:0; box-shadow:noe; }
58%{непрозрачност:0; box-shadow:noe; }
64%{прозрачност: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%{непрозрачност: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%{непрозрачност:0; box-shadow:noe; }
100%{непрозрачност:0; box-shadow:noe; }
}
.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="контейнер">
<!-- ляво око започва - >
<div class="eyesBoxs pullLeft">
<div class="profile skewLeft"></div>
<div class="shadow skewLeft"></div>
<div class="основен ани-узък"></div>
<div class="очи ани-зум">
<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="очи ани-зум">
<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 ч.
|
