Праздник Хэллоуин на Blogger

В прошлой статье я рассказала как украсить блог на Хэллоуин тыквой. Тыква - фонарь Джека - главный атрибут праздника. Другие символы Хэллоуина, которыми можно украсить блог 31 октября:

Ведьмы
Черные кошки
Свечи
Призраки и черепа
Пауки и паутина
Летучие мыши
Чучело
Совы

В гаджете или в статье можно поставить тематическую картинку, статичную или движущуюся (гифку), страшную или смешную, с символами праздника, что бы поздравить читателей.

Цвета Хэллоуина - оранжевый, фиолетовый и черный. Сайт можно на время украсить этими цветами (заголовки, фон и т.д.)

Ниже несколько кодов для оформления сайт атрибутами Хэллоуина.

Привидение

Приведение летает. К картинке можно добавить текст

<div id="container">
        <div id="spooky">
            <div id="body">
                <div id="eyes"></div>
                <div id="mouth"></div>
                <div id="feet">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
        </div>
        <div id="shadow"></div>
    </div>
<style>
	#container{
    margin: 15% auto;
    width: 400px;
    height: 400px;
    padding: 0;
    box-sizing: border-box;
    background-image:linear-gradient( #424f84, skyblue);
}
*:after,
*:before{
    box-sizing: inherit;
}
#spooky{
    margin: 10% auto;
    width: 80%;
    height: 80%;
    animation: floaty 2s infinite;
}
#spooky #body {
    position: relative;
    margin: 50px auto 0;
    width: 180px;
    height: 220px;
    background: #f2fbf1;
    border-top-left-radius: 90px;
    border-top-right-radius: 90px;
}
#spooky #body:before,
#spooky #body:after{
    content: " ";
    position: absolute;
    top: 130px;
    display: inline-block;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f2fbf1;
    animation: floaty .2s infinite;
}
#spooky #body:before{
    left: -18px;
}
#spooky #body:after{
    right: -18px;
}
#spooky #body #eyes{
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    padding: 90px 0 0;
    width: 90px;
    height: 20px;
}
#spooky #body #eyes:before,
#spooky #body #eyes:after{
    content: " ";
    display: block;
    width: 30px;
    height: 30px;
    background: #252c49;
    border-radius: 50%;
}
#spooky #body #mouth{
    background: #252c49;
    margin: 25px auto 0;
    width: 60px;
    height: 30px;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
}
#spooky #body #mouth:before{
    content: " ";
    display: block;
    background: #fff;
    margin-left: 20px;
    width: 10px;
    height: 10px;
}
#spooky #body #feet{
    position: absolute;
    display: flex;
    bottom: -18px;
    width: 180px;
    height: 36px;
}
#spooky #body #feet > *,
#spooky #body #feet::before,
#spooky #body #feet::after{
    content: " ";
    width: 36px;
    height: 36px;
    background: #f2fbf1;
    border-radius: 50%;
}
#shadow{
    margin: -90px auto 0;
    background: #252c49;
    width: 180px;
    height: 40px;
    border-radius: 50%;
    animation: zoomy 2s infinite;
}
@keyframes floaty{
    0%, 100%{
        transform: translateY(0);    
    }
    50%{
        transform: translateY(-20px);
    }
}
@keyframes zoomy{
    0%, 100%{
        transform: scale(1);
    }
    50%{
        transform: scale(0.8);
    }
}
</style>

Изменить можно фон - выделила в коде красным.

Цвет тени приведения - оранжевым.

Тело приведения - синим цветом.

Голубым цветом - рот и глазки

Кот и пауки

Кот наклоняет голову, а пауки бегают вверх и вниз. Картинка довольно большая. Если ставить в боковую панель, то виджет желательно уменьшить.

<div class="contenedor">
    <div class="calabaza">
  <span class="calabazita"></span><span class="calojos"></span><span class="calojitos"></span></div>
<div class="cat">
  <div class="leg"></div>
  <div class="cola"></div>
 <div class="body1"></div> 
  <div class="body3"></div>
  <div class="leg3"></div>
  <div class="orejas"><div class="orejitas"></div></div>
  <div class="head">
  <span class="head3"></span>
    <span class="head5"></span>
    <span class="head7"></span>
    <span class="ojos"></span>
    <span class="ojos3"></span>
    <span class="nariz"></span>
     <div class="hut"></div>
  </div>
  </div>
<div class="tela"><span class="telas"></span><span class="telas3"></span>
  <div class="tela3"><span class="telas"></span><span class="telas3"></span>
  </div>
  <div class="ara">
     <span class="legs5"></span>
    <span class="legs7"></span>
    <span class="bodys"></span>
    <span class="oaras"></span></div>
  <div class="ara3">
     <span class="legs5"></span>
    <span class="legs7"></span>
    <span class="bodys"></span>
    <span class="oaras"></span></div>
</div>
<style>
.contenedor{
  position:relative;
  width:600px;
  height:600px;
  border-radius:100%;
  background:#121212;
  margin:231px auto;
}
.cat{
  position:absolute;
  margin:0 25px
}
.body1{
  position:absolute;
  width: 90px;
  height: 150px;
  border-top: 30px solid black;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  -moz-border-radius: 100px / 100px;
  -webkit-border-radius: 100px / 100px;
  border-radius: 100px / 100px;
  transform:rotate(90deg);
  -moz-transform:rotate(90deg);
  -webkit-transform:rotate(90deg);
  margin:192px 145px
}
.body1::before{
  content:"";
  display:block;
   border-top: 21px solid black;
  border-left: 5px solid transparent;
  border-right:5px solid transparent;
  height: 0;
  width: 21px;
  transform:rotate(90deg);
  -moz-transform:rotate(90deg);
  -webkit-transform:rotate(90deg);
  margin: -12px -30px
}
.body1::after{
  content:"";
  display:block;
  width: 80px;
  height: 150px;
  border-top: 30px solid black;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  -moz-border-radius: 100px / 100px;
  -webkit-border-radius: 100px / 100px;
  border-radius: 100px / 100px;
  transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -webkit-transform:rotate(45deg);
  margin:-30px -87px
}
.leg{
  position:absolute;
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-bottom: 90px solid #060606;
  -moz-border-radius: 100px / 50px;
  -webkit-border-radius: 100px / 50px;
  border-radius: 100px / 50px;
    transform:rotate(-12deg);
  -moz-transform:rotate(-12deg);
  -webkit-transform:rotate(-12deg);
  margin:251px 283px
}
.body3{
  position:absolute;
  width:95px;
  height:87px;
  border-radius:100%;
  background:black;
  margin:261px 210px;
  transform:rotate(-55deg);
  -moz-transform:rotate(-55deg);
  -webkit-transform:rotate(-55deg);
}
.cola {
  position:absolute;
  width:90px;
  height:25px;
  border-radius:100%;
  background:#060606;
  margin:321px 145px;
  animation:lado5 3s alternate infinite;
  -moz-animation:lado5 3s alternate infinite;
  -webkit-animation:lado5 3s alternate infinite;
}
.leg3{
  position:absolute;
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-bottom: 60px solid #060606;
  -moz-border-radius: 100px / 50px;
  -webkit-border-radius: 100px / 50px;
  border-radius: 100px / 50px;
      margin:291px 275px;
transform:rotate(-12deg);
  -moz-transform:rotate(-12deg);
  -webkit-transform:rotate(-12deg);}
.leg3::before{
  content:"";
  display:block;
  width:50px;
  height:55px;
  border-radius:100%;
  border-top:5px solid #060606;
  margin:0 -60px
}
.head{
  position:absolute;
  width:90px;
  height:85px;
  border-radius:100%;
  background:black;
  margin:159px 241px;
  animation:lado 3s alternate infinite;
  -moz-animation:lado 3s alternate infinite;
  -webkit-animation:lado 3s alternate infinite;  
}
.orejas {
  position:absolute;
  width: 0;
  height: 0;
  border-left: 21px solid transparent;
  border-right: 21px solid transparent;
  border-bottom: 30px solid black;
    transform:rotate(70deg);
  -moz-transform:rotate(70deg);
  -webkit-transform:rotate(70deg);
  margin:152px 231px;
  animation:lado3 3s alternate infinite;
  -moz-animation:lado3 3s alternate infinite;
  -webkit-animation:lado3 3s alternate infinite;
}
.orejas::before {
  content:"";
  position:absolute;
  width: 0;
  height: 0;
  border-left: 21px solid transparent;
  border-right: 21px solid transparent;
  border-bottom: 30px solid black;
    transform:rotate(-140deg);
  -moz-transform:rotate(-140deg);
  -webkit-transform:rotate(-140deg);
  margin:-55px 0px;
}
.orejitas {
  position:absolute;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid #333;
  margin:12px -9px;
}
.orejitas::before {
  content:"";
  position:absolute;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid #333;
  margin:-62px 11px;
   transform:rotate(90deg);
  -moz-transform:rotate(90deg);
  -webkit-transform:rotate(90deg);
}
.head3{
  position:absolute;
  width:30px;
  height:12px;
  border-radius:0 0 30px 30px;
  background:black;
  margin:65px -5px
}
.head3::before{
  content:"";
  position:absolute;
  width:30px;
  height:14px;
  border-radius:0 0 30px 30px;
  background:black;
  margin:-14px -7px
}
.head3::after{
  content:"";
  position:absolute;
  width:30px;
  height:14px;
  border-radius:0 0 30px 30px;
  background:black;
  margin:-25px -7px
}
.head5{
  position:absolute;
  width:30px;
  height:12px;
  border-radius:0 0 30px 30px;
  background:black;
  margin:65px 63px;
}
.head5::before{
  content:"";
  position:absolute;
  width:30px;
  height:14px;
  border-radius:0 0 30px 30px;
  background:black;
  margin:-14px 9px
}
.head5::after{
  content:"";
  position:absolute;
  width:30px;
  height:14px;
  border-radius:0 0 30px 30px;
  background:black;
  margin:-25px 9px
}
.head7{
  position:absolute;
  width:25px;
  height:12px;
  border-radius:12px 12px 0 0;
  background:black;
  margin:-3px 7px;
  transform:rotate(-33deg);
  -moz-transform:rotate(-33deg);
  -webkit-transform:rotate(-33deg);
}
.head7::before{
  content:"";
  position:absolute;
  width:21px;
  height:14px;
  border-radius: 30px 30px 0 0;
  background:black;
  margin:3px 21px
}
.head7::after{
  content:"";
  position:absolute;
  width:30px;
  height:16px;
  border-radius:30px 30px 0 0;
  background:black;
  margin:14px 30px
}
.ojos{
  position:absolute;
  width:17px;
  height:19px;
  border-radius:100%;
  background:#377773;
  margin:39px 16px;
   transform:rotate(-21deg);
  -moz-transform:rotate(-21deg);
  -webkit-transform:rotate(-21deg);
}
.ojos::before{
  content:"";
  display:block;
  width:12px;
  height:12px;
  border-radius:100%;
  background:#004430;
  margin:7px 3px;
}
.ojos::after{
  content:"";
  display:block;
  width:5px;
  height:5px;
  border-radius:100%;
  background:white;
  margin:-19px 5px
}
.ojos3{
  position:absolute;
  width:17px;
  height:19px;
  border-radius:100%;
  background:#377773;
  margin:39px 57px;
  transform:rotate(21deg);
  -moz-transform:rotate(21deg);
  -webkit-transform:rotate(21deg);
}
.ojos3::before{
  content:"";
  display:block;
  width:12px;
  height:12px;
  border-radius:100%;
  background:#004430;
  margin:7px 3px;
}
.ojos3::after{
  content:"";
  display:block;
  width:5px;
  height:5px;
  border-radius:100%;
  background:white;
  margin:-19px 6px
}
.nariz{
  position:absolute;
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 7px solid #333;
  -moz-border-radius: 100px / 50px;
  -webkit-border-radius: 100px / 50px;
  border-radius: 100px / 50px;
  margin:55px 37px;
  
}
.nariz::before{
  content:"";
  display:block;
  width:14px;
  height:14px;
  border-radius:100%;
  background:#121212;
  margin:-3px -12px;
}
.nariz::after{
  content:"";
  display:block;
  width:14px;
  height:14px;
  border-radius:100%;
  background:#121212;
  margin:-14px 0px;}
.hut{
  position:absolute;
  width: 0;
  height: 0;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 100px solid black;
  -moz-border-radius: 100px / 50px;
  -webkit-border-radius: 100px / 50px;
  border-radius: 100px / 50px;
  margin:-85px -40px;
   transform:rotate(-30deg);
  -moz-transform:rotate(-30deg);
  -webkit-transform:rotate(-30deg);
}
.hut::before{
  content:"";
  display:block;
  width:90px;
  height:9px;
  border-radius:100%;
  background:#333;
  margin:90px -43px
}
.hut::after{
  content:"";
  display:block;
  width:21px;
  height:21px;
  border-radius:100%;
  background:#D84400;
  margin:-192px -12px;
}
.calabaza{
 position:absolute;
  width:201px;
  height:152px;
  border-radius:100%;
  background:#D84400;
  margin:321px 192px;
  animation:on 3s alternate infinite;
  -moz-animation:on 3s alternate infinite;
  -webkit-animation:on 3s alternate infinite;
}
.calabaza::before{
  content:"";
  display:block;
  width:152px;
  height:152px;
   border-radius:100%;
  background:#D6774F;
  margin:0 25px
}
.calabaza::after{
  content:"";
  display:block;
  width:112px;
  height:152px;
   border-radius:100%;
   background:#D84400;
   margin:-152px 45px
}
.calabazita{
  position:absolute;
   width:70px;
  height:152px;
   border-radius:100%;
  background:#D6774F;
  margin:-152px 65px;
  
}
.calabazita::before{
  content:"";
  position:absolute;
   width:30px;
  height:152px;
   border-radius:100%;
  background:#D84400;
  margin:0px 21px;
  
}
.calojos{
  position:absolute;
   width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 50px solid #C63500;
  margin:-112px 30px
}
.calojos::before{
  content:"";
  position:absolute;
   width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 50px solid #C63500;
  margin:0px 50px
}
.calojos::after{
  content:"";
  display:block;
  width:90px;
  height:60px;
  border-radius:100%;
  border-bottom:30px solid #C63500;
  margin:3px -3px;
}
.calojitos{
  position:absolute;
  width:21px;
  height:21px;
  border-radius:100%;
 background:#D6774F;
  margin:-93px 50px;
}
.calojitos::before{
  content:"";
  position:absolute;
  width:21px;
  height:21px;
  border-radius:100%;
 background:#D6774F;
  margin:0px 80px;
}
.calojitos::after{
  content:"";
  display:block;
  width:12px;
  height:12px;
  background:#D6774F;
  margin:45px 45px;
}
.tela{
  position:absolute;
  width: 100px;
  height: 100px;
  background: black;
  margin:132px 70px
}
.tela:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-bottom: 29px solid black;
  border-left: 29px solid #121212;
  border-right: 29px solid #121212;
  width: 42px;
  height: 0;
}
.tela:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 29px solid black;
  border-left: 29px solid #121212;
  border-right: 29px solid #121212;
  width: 42px;
  height: 0;
}
.telas{
  position:absolute;
  width:3px;
  height:100px;
  background:#121212;
  z-index:333;
  margin:0px 50px;
}
.telas::before{
  content:"";
  position:absolute;
  width:100px;
  height:3px;
  background:#121212;
  z-index:333;
  margin:50px -50px;
}
.telas::after{
  content:"";
  position:absolute;
  width:100px;
  height:3px;
  background:#121212;
  z-index:333;
  margin:50px -47px;
   transform:rotate(-45deg);
  -moz-transform:rotate(-45deg);
  -webkit-transform:rotate(-45deg);
}
.telas3{
  position:absolute;
  width:100px;
  height:3px;
  background:#121212;
  z-index:333;
  margin:50px 0px;
   transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -webkit-transform:rotate(45deg);
}
.tela3{
  position:absolute;
  width: 100px;
  height: 100px;
  background: black;
  margin:60px 370px
}
.tela3:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-bottom: 29px solid black;
  border-left: 29px solid #121212;
  border-right: 29px solid #121212;
  width: 42px;
  height: 0;
}
.tela3:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 29px solid black;
  border-left: 29px solid #121212;
  border-right: 29px solid #121212;
  width: 42px;
  height: 0;
}
.bodys{
  position:absolute;
  width:35px;
  height:30px;
  border-radius:100%;
  background:#333;
  margin:112px -16px
}
.oaras{
  position:absolute;
  width:9px;
  height:9px;
  border-radius:100%;
  background:black;
  border:3px solid white;
  margin:121px -12px;
}
.oaras::before{
  content:"";
  position:absolute;
  width:9px;
  height:9px;
  border-radius:100%;
  background:black;
  border:3px solid white;
  margin:-3px 9px;
}
.legs5{
  position:absolute;
  width:70px;
  height:30px;
  border-radius:100%;
  border-top:6px solid black;
  margin:116px -33px
}
.legs5::before{
  content:"";
  position:absolute;
  width:70px;
  height:30px;
  border-radius:100%;
  border-top:6px solid black;
  margin:0px 0px
}
.legs5::after{
  content:"";
  position:absolute;
  width:70px;
  height:30px;
  border-radius:100%;
  border-top:6px solid black;
  margin:6px 0px
}
.legs7{
  position:absolute;
  width:70px;
  height:30px;
  border-radius:100%;
  border-top:6px solid black;
  margin:134px -33px
}
.ara{
  position:absolute;
  width:3px;
  height:112px;
  background:black;
  margin:102px 50px;
  animation:sube 3s alternate infinite;
  -moz-animation:sube 3s alternate infinite;
  -webkit-animation:sube 3s alternate infinite;
}
.ara3{
  position:absolute;
  margin:132px 421px;
  width:3px;
  height:112px;
  background:black;
  animation:sube3 3s alternate infinite;
  -moz-animation:sube3 3s alternate infinite;
  -webkit-animation:sube3 3s alternate infinite;
}
@keyframes sube{
  0%{margin: 0px 50px;}
   100%{margin: 102px 50px;}
}
@-moz-keyframes sube{
  0%{margin: 0px 50px;}
   100%{margin: 102px 50px;}
}
@-webkit-keyframes sube{
  0%{margin: 0px 50px;}
   100%{margin: 102px 50px;}
}
@keyframes sube3 {
  0%{margin: 63px 421px;}
   100%{margin: 132px 421px;}
}
@-moz-keyframes sube3 {
  0%{margin: 63px 421px;}
   100%{margin: 132px 421px;}
}
@-webkit-keyframes sube3 {
  0%{margin: 63px 421px;}
   100%{margin: 132px 421px;}
}
@keyframes lado {
  0%{transform:rotate(-3deg);
  -moz-transform:rotate(-3deg);
    -webkit-transform:rotate(-3deg);}
   100%{transform:rotate(3deg);
  -moz-transform:rotate(3deg);
    -webkit-transform:rotate(3deg);}
}
@-moz-keyframes lado {
  0%{transform:rotate(-3deg);
  -moz-transform:rotate(-3deg);
    -webkit-transform:rotate(-3deg);}
   100%{transform:rotate(3deg);
  -moz-transform:rotate(3deg);
    -webkit-transform:rotate(3deg);}
}
@-webkit-keyframes lado {
  0%{transform:rotate(-3deg);
  -moz-transform:rotate(-3deg);
    -webkit-transform:rotate(-3deg);}
   100%{transform:rotate(3deg);
  -moz-transform:rotate(3deg);
    -webkit-transform:rotate(3deg);}
}
@keyframes lado3 {
  0%{transform:rotate(70deg);
  -moz-transform:rotate(70deg);
    -webkit-transform:rotate(70deg);}
   100%{transform:rotate(63deg);
  -moz-transform:rotate(63deg);
    -webkit-transform:rotate(63deg);}
}
@-moz-keyframes lado3 {
  0%{transform:rotate(70deg);
  -moz-transform:rotate(70deg);
    -webkit-transform:rotate(70deg);}
   100%{transform:rotate(63deg);
  -moz-transform:rotate(63deg);
    -webkit-transform:rotate(63deg);}
}
@-webkit-keyframes lado3 {
  0%{transform:rotate(70deg);
  -moz-transform:rotate(70deg);
    -webkit-transform:rotate(70deg);}
   100%{transform:rotate(63deg);
  -moz-transform:rotate(63deg);
    -webkit-transform:rotate(63deg);}
}
@keyframes lado5 {
  0%{transform:rotate(-9deg);
  -moz-transform:rotate(-9deg);
    -webkit-transform:rotate(-9deg);}
   100%{transform:rotate(9deg);
  -moz-transform:rotate(9deg);
    -webkit-transform:rotate(9deg);}
}
@-moz-keyframes lado5 {
  0%{transform:rotate(-9deg);
  -moz-transform:rotate(-9deg);
    -webkit-transform:rotate(-9deg);}
   100%{transform:rotate(9deg);
  -moz-transform:rotate(9deg);
    -webkit-transform:rotate(9deg);}
}
@-webkit-keyframes lado5 {
  0%{transform:rotate(-9deg);
  -moz-transform:rotate(-9deg);
    -webkit-transform:rotate(-9deg);}
   100%{transform:rotate(9deg);
  -moz-transform:rotate(9deg);
    -webkit-transform:rotate(9deg);}
}
@keyframes on {
  0%,25%{opacity:0.7;}
  35%,45%{opacity:0.9;}
  55%,65%{opacity:0.7;}
  75%,100%{opacity:1;}
}
@-moz-keyframes on {
  0%,25%{opacity:0.7;}
  35%,45%{opacity:0.9;}
  55%,65%{opacity:0.7;}
  75%,100%{opacity:1;}
}
@-webkit-keyframes on {
  0%,25%{opacity:0.7;}
  35%,45%{opacity:0.9;}
  55%,65%{opacity:0.7;}
  75%,100%{opacity:1;}
}
</style>

Автор Judith Neumann

Череп

Череп показывает язык, при наведении курсора.

<div class="skull">
  <div class="eyeshadow"></div>
  <div class="eyeshadow"></div>
  <div class="eyes">
    <div class="eye"></div>
    <div class="eye"></div>
  </div>
  <div class="nose"></div>
  <div class="mouth">
    <ul class="teeth">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <div class="tongue"></div>
  </div>
</div>

<style>
.skull{
  position:relative;
  margin:0 auto;
  border-radius:50%;
  height:280px;
  width:300px;
  background-color:#f2f2f2;
  -webkit-filter: drop-shadow(0 10px 8px black);
  filter: drop-shadow(0 10px 8px black);
}
.mouth{
  width:65%;
  margin:auto;
  left:0;
  right:0;
  position:absolute;
  background-color:blue;
  height:80%;
  border-radius:15px;
  top:30%;/*67%*/
  background-color:#f2f2f2;
}
.teeth{
  list-style:none;
  margin:0;
  padding:0;
  width:100%;
  height:40px;
  position:absolute;
  bottom:0;
  overflow:hidden;
}
.teeth li{
  float:left;
  height:100%;
  width:25%;
  box-shadow:0 2px 1px grey;
}
.eye, .eyeshadow{
  border-radius:50%;
  position:absolute;
  top:40%;
  z-index:2; 
  left:25px;  
}
.eyeshadow{
  width:150px;
  height:120px;
  background-color:transparent;
  margin-top: -20px;
  box-shadow: 0 -8px 7px -9px grey;
  left:10px;
}
.eye{
  width:120px;
  height:120px;    
  background-color:#ddd;
  overflow:hidden;
  box-shadow:inset 0 3px 14px black;
  background-image:radial-gradient(at bottom left, #ddd,grey);  
  transition:0.3s;
}
.eyeshadow + .eyeshadow{
  right:10px;
}
.eyes div + div, .eyeshadow + .eyeshadow{
  left:inherit;
}
.eyes div + div{
  right:25px;  
  background-image:radial-gradient(at bottom right, #ddd,grey);   
}
.nose{
  position:absolute;
  margin:auto;
  left:0;
  right:0;
  top:82%;
  width:20px;
  height:30px;
  background-color:#aaa;
  z-index:3;
  border-radius: 40%/7px;
  border-top-left-radius:59%;
  border-top-right-radius:59%;
  box-shadow: inset 0 6px 14px rgba(1,1,1,0.4);
}
.skull:hover .eye{
  background-image: radial-gradient(circle at 50% 60%, black 15%, red 26%, #ee4545 34%, white 40%, white, white);
  background-image: -webkit-radial-gradient(50% 60%, circle, black 15%, red 26%, #ee4545 34%, white 40%, white, white);  
  box-shadow:none;
  -webkit-animation:look 0.5s 2s;
  animation:look 0.5s ;
}
.skull:hover .nose{
  box-shadow:none;
}
.tongue{
  background-color:#dd6565;
  height:200px;
  width:90px;
  margin: auto;
  left:0;
  right:0;
  bottom:0;
  position:absolute;
  z-index:-1;
  border-radius: 60%/60%;
  display:none;
}
.skull:hover .tongue{
  display:block;
  -webkit-animation: 1s tongue forwards;
  animation: 1s tongue forwards;
}

@-webkit-keyframes look{
  100%{
    background-image: radial-gradient(circle at 50% 50%, black 15%, red 26%, #ee4545 34%, white 40%, white, white);
    background-image: -webkit-radial-gradient(50% 50%, circle, black 15%, red 26%, #ee4545 34%, white 40%, white, white);    
  }
}
@keyframes look{
  100%{
    background-image: radial-gradient(circle at 50% 50%, black 15%, red 26%, #ee4545 34%, white 40%, white, white);
    background-image: -webkit-radial-gradient(50% 50%, circle, black 15%, red 26%, #ee4545 34%, white 40%, white, white);        
  }
}
@-webkit-keyframes tongue{
  100%{
    bottom: -60%;
  }
}
@keyframes tongue{
  100%{
    bottom: -60%;
  }
}

@media screen and (max-height:400px){
  .skull{
    transform: scale(0.7,0.7);
  }
}
</style>

Автор JJ Garza