CSS만으로 꾸며진 움직이는 그림

재미있는 CSS효과가 있어 소개합니다. 보통은 포토샵으로 디자인을 하지만 포토샵을 잘 다루시지 못하시는 분은 CSS를 통해서 디자인을 하셔도 무방합니다. 오히려 예쁜 버튼을 만드실 수 있습니다. CSS의 기본적은 소스를 공개합니다.

재미있는 CSS효과가 있어 소개합니다. CSS만으로 만들어진 움직이는 그림입니다.

CSS

<style scoped="" type="text/css">
.ad-emots-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around;margin-bottom:40px;}
.ad-emot{border-radius:50%;position:relative;width:100px;height:100px;background-color:#FFEB96;}
.ad-emot1:after,.ad-emot1:before{position:absolute;content:"";height:10px;width:10px;background-color:#414141;border-radius:50%;top:48px;-webkit-animation:ad-emot1-muka-bergerak 5s ease-in-out infinite,ad-emot1-berkedip 2s ease-in-out infinite;animation:ad-emot1-muka-bergerak 5s ease-in-out infinite,ad-emot1-berkedip 2s ease-in-out infinite;-webkit-animation-direction:alternate;animation-direction:alternate;}
.ad-emot1:after{left:30px;}
.ad-emot1:before{left:85px;}
.ad-emot1 .mulut{position:absolute;height:3px;width:35px;background-color:#414141;border-radius:5px;top:68px;left:45px;-webkit-animation:ad-emot1-muka-bergerak 5s ease-in-out infinite;animation:ad-emot1-muka-bergerak 5s ease-in-out infinite;-webkit-animation-direction:alternate;animation-direction:alternate;}@-webkit-keyframes ad-emot1-berkedip{0%{height:10px;}97%{height:10px;}100%{height:0;}}@keyframes ad-emot1-berkedip{0%{height:10px;}97%{height:10px;}100%{height:0;}}@-webkit-keyframes ad-emot1-muka-bergerak{0%{-webkit-transform:translateX(0);transform:translateX(0);}30%{-webkit-transform:translateX(0);transform:translateX(0);}35%{-webkit-transform:translateX(-20px);transform:translateX(-20px);}65%{-webkit-transform:translateX(-20px);transform:translateX(-20px);}70%{-webkit-transform:translateX(-10px);transform:translateX(-10px);}85%{-webkit-transform:translateX(-10px);transform:translateX(-10px);}90%{-webkit-transform:translateX(0);transform:translateX(0);}100%{-webkit-transform:translateX(0);transform:translateX(0);}}@keyframes ad-emot1-muka-bergerak{0%{-webkit-transform:translateX(0);transform:translateX(0);}30%{-webkit-transform:translateX(0);transform:translateX(0);}35%{-webkit-transform:translateX(-20px);transform:translateX(-20px);}65%{-webkit-transform:translateX(-20px);transform:translateX(-20px);}70%{-webkit-transform:translateX(-10px);transform:translateX(-10px);}85%{-webkit-transform:translateX(-10px);transform:translateX(-10px);}90%{-webkit-transform:translateX(0);transform:translateX(0);}100%{-webkit-transform:translateX(0);transform:translateX(0);}}
</style>

HTML

<div class="ad-emots-wrapper">
<div class="ad-emot ad-emot1">
<div class="mulut">
</div>
</div>
</div>