정보실

웹학교

정보실

css 애니메이션 3D Insta Washer

본문

https://codepen.io/uzcho_/pen/zJNLrX


HTML :

<div class="container">

<div class="box">

<div class="side-front">

<span class="insta">insta</span>

<div class="circle"></div>

<div class="rect"></div>

</div>

<div class="side-top"></div>

<div class="side-right">

<div></div>

</div>

</div>

</div>


CSS

@charset "utf8";


/*                                     ! Animated 3D Insta Washer Started Here ...

=======================================================================================================================*/

*,

*:after,

*:before,

html

{box-sizing:border-box}


body{

font-family:Tahoma,Geneva,sans-serif;

font-size:16px;

font-style:normal;

font-weight:400;

text-align:center;

margin:0;

padding:0;

overflow:hidden

}


span

{display:block;position:absolute}


.container{

width:300px;

height:350px;

top:50%;

left:50%;

display:block;

position:absolute;

perspective:100%;

animation:washing .1s linear infinite alternate

}


@keyframes washing{

from{transform:rotate(1deg) translate(-50%,-50%)}

to{transform:rotate(-1deg) translate(-50%,-50%)}

}


.container:before{

content:"";

bottom:-68px;

right:-25px;

width:100%;

height:40%;

display:block;

position:absolute;

box-shadow:150px -40px 150px 0 rgba(0,0,0,.4);

transform:rotateX(60deg) skewX(-55deg) skewY(20deg)

}


.box{

width:100%;

height:100%;

display:block;

position:relative;

transform-style:preserve-3d;

transform:rotateX(-20deg) rotateY(-45deg)

}


[class*="side-"]

{display:block;position:absolute}


.side-front{

background-color:#f5f1ef;

background-image:

linear-gradient(90deg,#fd3352 100%,rgba(0,0,0,0)),

linear-gradient(90deg,#ffc93b 100%,rgba(0,0,0,0)),

linear-gradient(90deg,#63c486 100%,rgba(0,0,0,0)),

linear-gradient(90deg,#4690ff 100%,rgba(0,0,0,0)),

linear-gradient(0deg,#7c5625 100%,rgba(0,0,0,0));

background-position:15px top,20px top,25px top,30px top,left top;

background-repeat:no-repeat;

background-size:5px 50px,5px 50px,5px 50px,5px 50px,100% 50px;

width:100%;

height:100%;

transform:translate3d(0,0,150px)

}


.side-front:before,

.side-front:after{

content:"";

height:20px;

top:15px;

display:block;

position:absolute

}


.side-front:before{

width:20px;

left:50%;

border-radius:50%;

transform:translate(-50%,0);

box-shadow:inset -2px -2px 1px -1px #000,0 0 1px 0 #222,3px -3px 1px -1px #96682d

}


.side-front:after{

background:rgba(0,0,0,.5);

width:50px;

right:15px;

box-shadow:inset -2px -2px 1px -1px #000,0 0 1px 0 #222,0 0 1px 1px #96682d

}


.insta{

background:#000;

padding:5px;

top:50px;

left:4px;

color:#fff;

border-radius:5px

}


.circle{

background:radial-gradient(circle,#fff,#fff,#fff,rgba(182,178,177,.7),#f5f1ef,#f5f1ef,#f5f1ef);

width:200px;

height:200px;

top:50%;

left:50%;

display:block;

position:absolute;

border-radius:50%;

transform:translate(-50%,-50%);

box-shadow:inset 0 0 4px 4px #eeeae8,2px 2px 1px -1px #b6b2b1,-2px -2px 1px -1px #b6b2b1

}


.circle:before,

.circle:after{

content:"";

top:50%;

display:block;

position:absolute

}


.circle:before{

background-color:rgba(0,0,0,.5);

background-image:

radial-gradient(closest-side,rgba(225,225,225,.75) 80%,rgba(0,0,0,0)),

radial-gradient(closest-side,rgba(225,225,225,.75) 80%,rgba(0,0,0,0)),

radial-gradient(closest-side,rgba(225,225,225,.75) 80%,rgba(0,0,0,0)),

radial-gradient(closest-side,rgba(225,225,225,.75) 80%,rgba(0,0,0,0)),

radial-gradient(closest-side,rgba(225,225,225,.75) 80%,rgba(0,0,0,0));

background-repeat:no-repeat;

background-size:25px 25px,15px 20px,5px 5px,10px 10px,20px 25px;

width:150px;

height:150px;

left:50%;

border-radius:50%;

transform:translate(-50%,-50%);

animation:buble .8s linear infinite;

box-shadow:inset 0 0 2px 0 #333,inset 16px 0 2px 0 rgba(245,241,239,.9),inset 40px 0 2px 0 #444,0 0 4px 4px #b6b2b1

}


@keyframes buble{

0%{background-position:40px bottom,75px bottom,95px bottom,55px bottom,105px bottom}

50%{background-position:50px 80px,85px 50px,85px 70px,45px 140px,95px 110px}

100%{background-position:35px top,70px top,105px top,65px top,115px top}

}


.circle:after{

width:60px;

height:60px;

right:-22px;

border-radius:0 100% 0 50%;

box-shadow:inset 1px -1px 0 0 #666;

transform:translate(0,-50%) rotate(45deg)

}


.rect{

width:50px;

height:30px;

bottom:15px;

right:15px;

display:block;

position:absolute;

border-radius:4px;

box-shadow:0 0 1px 0 #222,2px 2px 0 0 #b6b2b1

}


.side-top{

background-color:#7c5625;

background-image:

linear-gradient(90deg,#fd3352 100%,rgba(0,0,0,0)),

linear-gradient(90deg,#ffc93b 100%,rgba(0,0,0,0)),

linear-gradient(90deg,#63c486 100%,rgba(0,0,0,0)),

linear-gradient(90deg,#4690ff 100%,rgba(0,0,0,0));

background-position:15px top,20px top,25px top,30px top;

background-repeat:no-repeat;

background-size:5px 100%;

width:300px;

height:300px;

box-shadow:1px 1px 0 0 #7c5625;

transform:rotateX(90deg) translate3d(0,0,150px)

}

.side-right{

background:#ede6dd;

width:100%;

height:100%;

box-shadow:inset 0 50px 0 0 #7c5625;

transform:rotateY(90deg) translate3d(0,0,150px)

}


.side-right:before{

background:#7c5625;

content:"";

width:2px;

height:50px;

top:0;

left:-1px;

display:block;

position:absolute;

}


.side-right div{

width:50px;

height:250px;

top:75px;

left:50%;

display:block;

position:absolute;

border-radius:10px;

transform:translate(-50%,0);

box-shadow:inset 1px 1px 0 0 #b6b2b1,inset 2px 2px 0 0 #fff,3px 3px 1px -1px #999

}


.side-right div:before,

.side-right div:after{

content:"";

width:100%;

height:100%;

top:0;

display:block;

position:absolute;

border-radius:10px;

box-shadow:inset 1px 1px 0 0 #b6b2b1,inset 2px 2px 0 0 #fff,3px 3px 1px -1px #999

}


.side-right div:before

{left:-100px}


.side-right div:after

{right:-100px}

/*                                      ! Animated 3D Insta Washer Ended Here ...

=======================================================================================================================*/


/* This Is Not Part Of Animated 3D Insta Washer */

.me{

background:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1735448/profile/profile-80.jpg?1528976396")no-repeat center / contain;

width:40px;

height:40px;

bottom:16px;

right:16px;

display:block;

position:fixed;

border-radius:50%;

animation:me 2s linear infinite alternate

}


@keyframes me{

from{transform:translateY(-4px)}

to{transform:translateY(4px)}

}


.me:hover span

{right:50px;opacity:1;visibility:visible}


.me span{

width:150px;

top:10px;

right:0;

color:#008080;

z-index:-1;

opacity:0;

visibility:hidden;

transition:all .5s ease

}


  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 95회 ]  작성일18-09-04 16:37
css

웹학교