Разработка - Сладкая парочка Twix | Все для вебмастера

Пишем наше тело:

HTML:

<div class='container'>
  <div class='item'></div>
</div>

Пишем стиль:

CSS:

body {
  overflow:hidden;
}

h1 {
  font-family:Arial;
  text-align:center;
  width:100%;
}

.container {
  width:400px;
  height:400px;
  margin-left:calc(50vw - (400px/2));
  margin-top:calc(50vh - (400px/2));
  border:4px solid rgba(0,0,0,.8);
  border-radius:100%;
  padding:10px;
}

.item {
  background:url(https://requestreduce.org/images/letter-outline-clipart-b-6.gif) center;
  background:url(https://akns-images.eonline.com/eol_images/Entire_Site/20141018/rs_560x415-141118090112-1024-mickey-minnie-mouse-kiss.ls.111814.jpg?fit=inside|900:auto&output-quality=90) center;
  background-size:contain;
  background-repeat:no-repeat;
  box-sizing:border-box;
  border:1px solid transparent;
  opacity:0.9;
  width:100%;
  height:100%;
  border-radius:100%;
  animation:blur 3s infinite;
}

.container:hover .item {
  animation:blur2 3s infinite;
}

@keyframes blur {
  0%   { transform:scale(1); }
  25% { transform:scale(1.02); }
  75% { transform:scale(.99); }
  100% { transform:scale(1); }
}

@keyframes blur2 {
  0%   { transform:rotate(0deg) scale(1); }
  50% { transform:rotate(1deg) scale(.99); }
  100% { transform:rotate(0deg) scale(1); }
}

Добавляем динамики:

JavaScript:

var nrOfElements = 40; //Was 50
var container = document.querySelector('.item');
var previousElement = container;

for(var i=0; i<=nrOfElements; i++) {
  previousElement = addNewElement(previousElement,'item');
}

function addNewElement(parent, className) {
    var element = document.createElement('div');
  element.className = className;
  parent.appendChild(element);
  return element;
}

Смотрим наш результат:

Разработка Сладкая парочка Twix

Ещё ресурсы от baltun