Лоадер css - в виде вращения смайла

#css #css3 #svg #анимация

Я хочу воспроизвести анимацию gif  с помощью чистого CSS или SVG, возможно ли это
сделать?    

   

Меня также устроят  другие подходящие решения.  

Ниже приведен фрагмент, который  воспроизводит только статический смайлик.    



body {
  background: #fff;
  margin: 50px;
}

.loader {
  position: relative;
  border-radius: 50%;
  box-sizing: border-box;
  width: 80px;
  height: 80px;
  background: linear-gradient(to bottom, #fff 50%, #51cf66 50%);
}

.loader:before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  bottom: 10px;
  border-radius: 50%;
  background: #fff;
}

.dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #51cf66;
}

.dot:first-child {
  left: 10px;
  top: 10px;
}

.dot:last-child {
  right: 10px;
  top: 10px;
}

  

  





    

Ответы

Ответ 1

Хотя эта анимация для смайликов может быть достигнута с использованием  CSS, но SVG,
безусловно, является лучшим вариантом, главным образом, по следующим причинам:  


анимационные градиенты - не обеспечивают лучшую производительность  
сделать круг по каждой стороне смайла будет очень трудно,  без
добавления семантической разметки   
SVG - это инструмент, созданный для того, чтобы было просто рисовать
такие формы и оживлять их. Это упрощает их обслуживание, а код легче
читать и понимать.    


   

И вот код (упрощенный из  codepen):    



svg {
  width:100px;
  height:auto;
  display:block;
  transform:rotateZ(0deg);
  margin:0 auto;
}
.smile, .eyes {
  stroke:teal;
  stroke-width:1.3;
  stroke-linecap:round;
  fill:transparent;
}
svg:hover {animation:rotate 1.2s cubic-bezier(0.65, 0.000, 0.75, 1.000);}
svg:hover .smile{animation: smile 1s cubic-bezier(0.2, 0.000, 0.8, 1.000);}
svg:hover .eyes{animation: eyes 1s cubic-bezier(.7, 0.000, 0.4, 1.000);}

@keyframes rotate { to { transform:rotateZ(720deg); } }
@keyframes smile { 50% { stroke-dasharray:20,5.1327;} }
@keyframes eyes  { 70% { stroke-dasharray:1,0,.5,23.6327;} }
 
 h1 {text-align:center;color:teal;}

Hover me !




Как создаются смайлик и анимация?

Этот смайлик выполнен с двумя элементами окружности SVG (один для глаз и один для
улыбки) и атрибутом stroke-dasharray, чтобы сделать глаза и улыбку.     

Анимация:   

Svg вращается при наведении с использованием анимации CSS, а атрибут stroke-dasharray
анимируется, чтобы глаза «исчезали» в улыбке.     

Длина улыбки также изменяется примерно на 3/4 длины окружности.     

Easing function :   

Гладкий эффект достигается с помощью функций easing кривой Безье. Время анимации
также изменено, чтобы приблизиться к желаемой анимации смайликов.    

Источник: CSS rotating smiling face loader] @web-tiki