Домой / Рецепты CSS / Майк Вазовски в чистом CSS
Майк Вазовски в чистом CSS

Майк Вазовски в чистом CSS

Одноглазый монстрик с короткими рожками, головой вместо туловища и гладкой зелёной кожей; друг и напарник героя мультфильма «Корпорация монстров» Джеймса Салливана в чистом CSS.

Демо

CSS

body {
  background:#333;
  text-align:center;
  color:white;
}
/* magic starts */
.wazowski {
  background:#8ac34f;
  margin-top:150px;
  width:120px;
  height:100px;
  display:inline-block;
  position:relative;
  border-radius:120px 120px 50px 50px;
}
.wazowski:after {
  content:'';
  border:20px solid #8ac34f;
  width:110px;
  height:100px;
  display:block;
  position:absolute;
  top:10px;
  left:-15px;
  border-radius:90px 90px 80px 80px;
  z-index:0;
}
.wazowski:before {
  content:'';
  border:20px solid #8ac34f;
  border-bottom:none;
  border-top:20px solid transparent;
  border-radius:10px 10px 0 0;
  position:absolute;
  width:85px;
  height:50px;
  left:-3px;
  top:10px;
  z-index:0;
}

em.eye {
  background:white;
  width:60px;
  height:60px;
  border:none;
  border-radius:50px;
  top:20px;
  left:0;
  z-index:1;
  display:inline-block;
  position:relative;
  cursor:pointer;
  animation-name: eyeball;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-transition:ease-in;
}
em.eye:after, em.eye:before {
  position:absolute;
  content:'';
}
em.eye:before {
  background:black;
  width:30px;
  height:30px;
  border:5px solid #009581;
  border-radius:20px;
  top:17px;
  left:10px;
  z-index:2;
}
em.eye:after {
  background:#8ac34f;
  width:60px;
  height:10px;
  z-index:3;
  border-radius:5px;
  left:0;
  top:-10px;
  transition:all 0.1s ease;
}

/* animation */
.wazowski:hover em.eye:after {
  top:0;
  height:25px;
  transition:all 0.05s ease;
}
.wazowski:hover .eye {
  animation-name:none;
}
@keyframes eyeball {
	from { 	-webkit-transform: rotate(0deg); }
	to   {  -webkit-transform: rotate(360deg);; }
}
/* no more magic. */

HTML

<div class="wazowski">
  <em class="eye"></em>
</div>
<!-- no image. CSS has its magic. -->

Одноглазый монстрик с короткими рожками, головой вместо туловища и гладкой зелёной кожей; друг и напарник героя мультфильма «Корпорация монстров» Джеймса Салливана в чистом CSS. CSS body { background:#333; text-align:center; color:white; } /* magic starts */ .wazowski { background:#8ac34f; margin-top:150px; width:120px; height:100px; display:inline-block; position:relative; border-radius:120px 120px 50px 50px; } .wazowski:after { content:''; border:20px solid #8ac34f; width:110px; height:100px; display:block; position:absolute; top:10px; left:-15px; border-radius:90px 90px 80px 80px; z-index:0; } .wazowski:before { content:''; border:20px solid #8ac34f; border-bottom:none; border-top:20px solid transparent; border-radius:10px 10px 0 0; position:absolute; width:85px; height:50px; left:-3px; top:10px; z-index:0; } em.eye { background:white; width:60px; height:60px;&hellip;

Обзор

Проголосуйте за статью

Оценка

Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Рейтинг: Вы можете быть первым !
85

Оставить комментарий

Ваш email не будет опубликован.

*