CSS3 샤링간 만들기(애니메이션)

세계에서 비할 데 없는 존재 · 게시됨 2014. 11. 14. 오후 5:55:02

[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; 마진: 30px auto; overflow:hidden; 배경:#000; 위치: 상대; }
.eyesBoxs{width:130px; 높이: 70px; 위치:절대; 상단: 50px; }
.pullLeft{left:100px; }
.pullRight{right:100px; }
.profile{
      너비:130px;
      높이: 70px;
      배경:#fff;
      위치:절대;
      top:0;
      왼쪽:0;
      overflow:hidden;
      border-radius:0 70px 0 50px;
}
.shadow{
      display:block;
      너비:130px;
      높이: 70px;
      위치:절대;
      top:0;
      z-지수:5;
      border-radius:0 90px 0 60px;
      박스-그림자: 5px 12px 2px 5px RGBA(0,0,0,.25) 삽입;
}
.skewLeft{
      transform:skewX(15deg);
      -webkit-transform:skewX(15deg);
      -o-변환:skewX(15deg);
}
.skewRight{
      transform: skewX(-15deg) 스케일(-1,1);
      -webkit-transform:skewX(-15deg) 스케일(-1,1);
      -o-변환:skewX(-15deg) 스케일(-1,1);
}
.basic{
      너비:60px;
      높이: 60px;
      배경:#000;
      위치:절대;
      상위: 50%;
      왼쪽: 50%;
      Z 지수: 10;
      마진-상단: -30px;
      경계 반경: 60%;
}
.basic:before{
      내용:"";
      display:block;
      너비:10px;
      높이: 11픽셀;
      위치:절대;
      왼쪽: 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%;
      박스-그림자: 0 0 2px 4px #bd0000 삽입, 0 0 0 2px #000;
}
.pull왼쪽 .eyes{left:35px; }
.pullRight .eyes{right:35px; }
.eyes .line{
      폭: 64%;
      키: 64%;
      배경:#ff0000;
      위치:절대;
      오른쪽:0;
      왼쪽:0;
      상단: 10px;
      마진:0 자동;
      경계 반경: 60%;
      박스-그림자:0 2px 0 #b20000 삽입;
}
.eyes .line:before{
      내용:"";
      display:block;
      너비:10px;
      높이: 11픽셀;
      위치:절대;
      왼쪽:3px;
      상단: 4px;
      Z 지수: 100;
      경계 반경: 60%;
      배경-이미지:radial-gradient(원, 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-배경-이미지: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{
      내용:"";
      display:block;
      너비:10px;
      높이: 10px;
      위치:절대;
      배경:#000;
      오른쪽:0;
      왼쪽: -1픽셀;
      상단: 13px;
      Z 지수: 100;
      마진:0 자동;
      경계 반경: 60%;
      transform:rotate(150deg);
      -webkit-transform:rotate(150도);
      -o-변환: 회전(150도);
      애니메이션: 컬러 20초 이쉬 인피니티;
      -webkit-animation:컬러 20초 이슬림 무한;
      -o-animation: 색상 20초 이쉬 인-인드 무한;
}
@keyframes 색{
      0%{배경:#000; }
      35%{배경:#000; }
      40%{배경:#f00; }
      100%{배경:#f00; }
}
@-webkit-keyframes color{
      0%{배경:#000; }
      35%{배경:#000; }
      40%{배경:#f00; }
      100%{배경:#f00; }
}
@-o-키프레임 색상{
      0%{배경:#000; }
      35%{배경:#000; }
      40%{배경:#f00; }
      100%{배경:#f00; }
}
/*******三勾玉开始*******/
.hook{
      폭: 92%;
      키: 92%;
      위치:절대;
      오른쪽:0;
      왼쪽:0;
      상단: 5%;
      마진:0 자동;
      경계 반경: 60%;
}
.hook .bar{
      display:block;
      폭: 100%;
      키: 100%;
      위치:절대;
      왼쪽:0;
      top:0;
      경계 반경: 60%;
}
.hook .bar b{
      display:block;
      너비:8px;
      높이: 8px;
      배경:#000;
      위치:절대;
      왼쪽:0;
      하단:0;
      경계 반경: 60%;
}
.hook .bar b:after{
      내용:"";
      너비:8px;
      높이: 8px;
      border-color:transparent transparent #000 transparent;
      border-style:solid;
      border-width:0 5px 0;
      위치:절대;
      상단: -1px;
      왼쪽: -3px;
      Z 지수: 100;
      국경 반경: 0 0 0 70%;
      변환: 회전(-75도);
      -webkit-transform:rotate(-75deg);
      -o-변환:회전(-75도);
}
.hook .bar:nth-child(1){
      transform:rotate(10deg);
      -webkit-transform:rotate(10deg);
      -o-변환: 회전(10도);
}
.hook .bar:nth-child(2){
      transform:rotate(130도);
      -webkit-transform:rotate(130도);
      -o-변환: 회전(130도);
}
.hook .bar:nth-child(3){
      transform:rotate(250도);
      -webkit-transform:rotate(250도);
      -o-변환: 회전(250도);
}
/*******三勾玉结束*******/
/*******万花筒开始*******/
.tube{
      폭: 93%;
      키: 93%;
      위치:절대;
      오른쪽:0;
      왼쪽:0px;
      상단: 2석;
      마진:0 자동;
      배경:#000;
      경계 반경: 60%;
}
.tube .bar{
      display:block;
      너비:10px;
      높이: 20px;
      border-style:solid;
      border-width:0 0 0 10px;
      border-color: 투명하고 투명한 검정;
      위치:절대;
      경계 반경: 100% 0 0;
}
.tube .bar:nth-child(1){
      상단: -10px;
      왼쪽: 2px;
      transform:rotate(-10deg);
}
.tube .bar:nth-child(2){
      하단: 0px;
      오른쪽: -10px;
      transform:rotate(105도);
      -webkit-transform:rotate(105deg);
      -o-변환:회전(105도);
}
.tube .bar:nth-child(3){
      하단: -3px;
      왼쪽: -10px;
      변속:회전(235도);
      -webkit-transform:rotate(235도);
      -o-변환: 회전(235도);
}
/*******万花筒结束*******/
/*******轮回眼开始*******/
.trans{
      너비:130px;
      높이: 70px;
      위치:절대;
      overflow:hidden;
      top:0;
      왼쪽:0;
      border-radius:0 70px 0 50px;
}
.trans .bar{
      display:block;
      너비:9px;
      높이:9픽셀;
      배경:#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(-15deg);
      -webkit-transform:skewX(-15deg);
      -o-변환:skewX(-15deg);
}
.pullLeft .trans .bar{left:48%; }
.풀라이트 .trans .bar{
      transform: skewX(-15deg) 스케일(-1,1);
      -webkit-transform:skewX(-15deg) 스케일(-1,1);
      -o-변환:skewX(-15deg) 스케일(-1,1);
}
.pullRight .trans .bar{right:48%; }
/*******轮回眼结束*******/
.ani-좁음{
      애니메이션: 애니-좁은 20년대 이완 인피니트;
      -webkit-animation:ani-좁은 20s 이완 무한;
      -o-animation: 애니-좁은 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-변환:scale(0); }
      87%{불투명도:0; -o-변환:scale(0); }
      90%{불투명도:1; -o-변환:척도(1); }
      100%{불투명도:1; -o-변환:척도(1); }
}
.ani-줌{
      애니메이션: 애니-줌 20초 선형 무한;
      -webkit-animation:ani-줌 20초 선형 무한;
      -o-animation: ani-줌 20초 선형 무한;
}
@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%{opacity: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%{opacity:0; -webkit-transform:scale(0); }
}
@-o-keyframes ani-zoom{
      0%{불투명도:0; -o-변환:scale(0); }
      5%{불투명도:0; -o-변환:scale(0); }
      8%{불투명도:1; -o-변환:척도(1); }
      60%{불투명도:1; -o-변환:척도(1); }
      62%{불투명도:0; -o-변환:척도(1.5); }
      100%{opacity:0; -o-변환:scale(0); }
}
.ani-rotateHook{
      애니메이션: ani-rotate 훅 20s 이즈-인드 무한;
      -webkit-animation:ani-rotate훅 20초 이쉬-인드 무한;
      -o-animation:ani-rotate 훅 20초 이즈-인드 무한;
}
@keyframes ani-rotateHook{
      0%{불투명도:0; transform:scale(0) rotate(0); }
      9%{불투명도:0; transform:scale(0) rotate(0); }
      13%{불투명도:1; transform:scale(1) rotate(-360deg); }
      35%{불투명도:1; transform:scale(1) rotate(-360deg); }
      38%{불투명도:0; 변환: 스케일(1.8) 회전(-540도); }
      100%{opacity:0; transform:scale(0) rotate(0); }
}
@-webkit-keyframes ani-rotateHook{
      0%{불투명도:0; -webkit-변환:scale(0) rotate(0); }
      9%{불투명도:0; -webkit-변환:scale(0) rotate(0); }
      13%{불투명도:1; -webkit-transform:scale(1) 회전(-360deg); }
      35%{불투명도:1; -webkit-transform:scale(1) 회전(-360deg); }
      38%{불투명도:0; -webkit-transform:scale(1.8) 회전(-540deg); }
      100%{opacity:0; -webkit-변환:scale(0) rotate(0); }
}
@-o-keyframes ani-rotateHook{
      0%{불투명도:0; -o-변환:scale(0) rotate(0); }
      9%{불투명도:0; -o-변환:scale(0) rotate(0); }
      13%{불투명도:1; -o-변환:scale(1) 회전(-360도); }
      35%{불투명도:1; -o-변환:scale(1) 회전(-360도); }
      38%{불투명도:0; -o-변환: 스케일(1.8) 회전(-540도); }
      100%{opacity:0; -o-변환:scale(0) rotate(0); }
}
.ani-회전튜브{
      애니메이션: ani-rotate 튜브 20초 이완 아웃 무한;
      -webkit-animation:ani-rotate 튜브 20초 이완-아웃 무한;
      -o-animation:ani-rotate 튜브 20초 이완-아웃 무한;
}
@keyframes ani-rotateTube{
      0%{불투명도:0; transform:scale(0) rotate(0); }
      35%{불투명도:0; transform:scale(0) rotate(0); }
      40%{불투명도:1; transform:scale(1) rotate(-360deg); }
      60%{불투명도:1; transform:scale(1) rotate(-360deg); }
      100%{불투명도:1; transform:scale(1) rotate(-360deg); }
}
@-webkit-keyframes ani-rotateTube{
      0%{불투명도:0; -webkit-변환:scale(0) rotate(0); }
      35%{불투명도:0; -webkit-변환:scale(0) rotate(0); }
      40%{불투명도:1; -webkit-transform:scale(1) 회전(-360deg); }
      60%{불투명도:1; -webkit-transform:scale(1) 회전(-360deg); }
      100%{불투명도:1; -webkit-transform:scale(1) 회전(-360deg); }
}
@-o-키프레임 ani-rotateTube{
      0%{불투명도:0; -o-변환:scale(0) rotate(0); }
      35%{불투명도:0; -o-변환:scale(0) rotate(0); }
      40%{불투명도:1; -o-변환:scale(1) 회전(-360도); }
      60%{불투명도:1; -o-변환:scale(1) 회전(-360도); }
      100%{불투명도:1; -o-변환:scale(1) 회전(-360도); }
}
.ani-그림자{
      애니메이션: 애니-섀도우 20s 선형 무한;
      -웹킷-애니메이션:애니-섀도우 20s 선형 무한;
      -o-animation: ani-shadow 20s 선형 무한;
}
@keyframes 아니-그림자{
      0%{불투명도:0; 박스-그림자: 없음; }
      58%{불투명도:0; 박스-그림자: 없음; }
      64%{불투명도:1; 박스-섀도우:0 0 0 14px #4646,0 0 0 16px #000,0 0 0 30px #6c6c6c,0 0 0 0 32px #000,0 0 0 44px #a6a6a6,0 0 0 46px #000; }
      87%{불투명도:1; 박스-섀도우:0 0 0 14px #4646,0 0 0 16px #000,0 0 0 30px #6c6c6c,0 0 0 0 32px #000,0 0 0 44px #a6a6a6,0 0 0 46px #000; }
      90%{불투명도:0; 박스-그림자: 없음; }
      100%{opacity:0; 박스-그림자: 없음; }
}
@-webkit-keyframes ani-shadow{
      0%{불투명도:0; 박스-그림자: 없음; }
      58%{불투명도:0; 박스-그림자: 없음; }
      64%{불투명도:1; 박스-섀도우:0 0 0 14px #4646,0 0 0 16px #000,0 0 0 30px #6c6c6c,0 0 0 0 32px #000,0 0 0 44px #a6a6a6,0 0 0 46px #000; }
      87%{불투명도:1; 박스-섀도우:0 0 0 14px #4646,0 0 0 16px #000,0 0 0 30px #6c6c6c,0 0 0 0 32px #000,0 0 0 44px #a6a6a6,0 0 0 46px #000; }
      90%{불투명도:0; 박스-그림자: 없음; }
      100%{opacity:0; 박스-그림자: 없음; }
}
@-o-keyframes ani-shadow{
      0%{불투명도:0; 박스-그림자: 없음; }
      58%{불투명도:0; 박스-그림자: 없음; }
      64%{불투명도:1; 박스-섀도우:0 0 0 14px #4646,0 0 0 16px #000,0 0 0 30px #6c6c6c,0 0 0 0 32px #000,0 0 0 44px #a6a6a6,0 0 0 46px #000; }
      87%{불투명도:1; 박스-섀도우:0 0 0 14px #4646,0 0 0 16px #000,0 0 0 30px #6c6c6c,0 0 0 0 32px #000,0 0 0 44px #a6a6a6,0 0 0 46px #000; }
      90%{불투명도:0; 박스-그림자: 없음; }
      100%{opacity:0; 박스-그림자: 없음; }
}
.ani-좁음, .ani-줌, .ani-회전 훅,
.ani-회전튜브,.ani-그림자,.eyes .line:after{
      animation-fill-mode:forwards;
      -webkit-animation-fill-mode:both;
      -o-animation-fill-mode:both;
}
</style>
</head>

<body>
<div class="container">
      왼쪽 눈<!-- 시작한다 - >
<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="튜브 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="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="튜브 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]

세계에서 비할 데 없는 존재 · 게시됨 2014. 11. 14. 오후 5:57:04

이 게시물은 2014년 11월 14일 18:00에 Tianxia Wushuang에 의해 마지막으로 편집되었습니다.

관리자 · 게시됨 2014. 11. 14. 오후 5:58:15

제가 먼저 모은 좋은 것들

북부 도시의 기온은 22도입니다 · 게시됨 2014. 11. 14. 오후 9:53:23

한쪽 눈을 위해 이렇게 많은 코드가 필요하다고?

세계에서 비할 데 없는 존재 · 게시됨 2014. 11. 14. 오후 10:12:26

베이청 직조 기온 22도 2014-11-14 21:53에 게시됨
한쪽 눈을 위해 이렇게 많은 코드가 필요하다고?

그냥 눈이 아니야! 온라인으로 한 번 돌리면 알 수 있을 거예요

검은배 자두나무 · 게시됨 2014. 11. 14. 오후 10:23:43

정말 놀랍고, 환생의 눈도 있어요

[CSS/DIV] CSS3 샤링간 만들기(애니메이션)

점수

본 섹션