• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Кругового вращения анимации с помощью CSS3 (Как создать анимацию с тенью при помощи стиля CSS)
Кругового вращения анимации с помощью CSS3
Kosten
Дата: Суббота, 14.07.2018, 20:29 | Сообщение 1
Администраторы
Сообщений:18241
Награды: 55


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

Тень на CSS и текстовая тень позволяют нам создавать довольно классные элементы дизайна, которые даже не выглядят как тени. Главное - подумать о том, как работают тени CSS и использовать их для получения желаемого эффекта. Не ограничивайте свое мышление только тем, что они используют только тени для тени. Стили CSS3 позволяет добавлять анимацию в такие элементы, как ссылки. Где с помощью плагина jQuery, а также можете расширить функцию анимации для поддержки свойства теневого окна CSS.

Для начало посмотрим, как будет смотреться:



Приступаем к установки:

HTML

Код
<div class="animations-ecomplex"></div>


CSS

Код
.animations-ecomplex {
  width: 195px;
  height: 195px;
  position: relative;
}
.animations-ecomplex:after,
.animations-ecomplex:before {
  content: "";
  border-radius: 73%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: center center;
}
.animations-ecomplex:before {
    box-shadow: inset 0 20px 0 rgba(14, 222, 222, 0.68), inset 20px 0 0 rgba(21, 199, 199, 0.6), inset 0 -20px 0 rgba(17, 151, 195, 0.6), inset -20px 0 0 rgba(15, 177, 218, 0.63);
    animation: rotate-before 2s -0.5s linear infinite;
}
.animations-ecomplex:after {
    box-shadow: inset 0 20px 0 rgba(232, 232, 19, 0.6), inset 20px 0 0 rgba(224, 186, 32, 0.63), inset 0 -20px 0 rgba(234, 146, 14, 0.64), inset -20px 0 0 rgba(224, 100, 17, 0.66);
    animation: rotate-after 2s -0.5s linear infinite;
}
@keyframes rotate-after {
  0% {transform: rotateZ(0deg) scaleX(1) scaleY(1);}
  50% {transform: rotateZ(180deg) scaleX(0.82) scaleY(0.95);}
  100% {transform: rotateZ(360deg) scaleX(1) scaleY(1);}
}
@keyframes rotate-before {
  0% {transform: rotateZ(0deg) scaleX(1) scaleY(1);}
  50% {transform: rotateZ(-180deg) scaleX(0.95) scaleY(0.85);}
  100% {transform: rotateZ(-360deg) scaleX(1) scaleY(1);}
}


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

Демонстрация
Прикрепления: 9074629.png(24.0 Kb)
Страна: (RU)
Kosten
Дата: Среда, 18.07.2018, 04:10 | Сообщение 2
Администраторы
Сообщений:18241
Награды: 55


Играя с некоторыми анимация загрузки CSS, то заметил, что они были абсолютно потрясающими. Точнее они были гладкими, векторными и мобильными. Поэтому я подумал о классической анимации загрузки, которую мы все знаем, вращающихся стрелках. Хотя CSS анимации могут использоваться для изменения почти всех аспектов элемента HTML, за исключением свойств, перечисленных в предыдущей главе, некоторые из самых мощных средств манипулирования представлением веб страниц заключаются в модулях CSS, которые являются совершенно новыми в CSS3.

Переходы CSS, это самая простая форма анимации: движение между двумя состояниями. После того, как вы освоите основной синтаксис переходов, описанных в этой главе, вы сможете применить простые, эффективные анимации к изображениям и элементам пользовательского интерфейса, а затем начать создавать более сложные ключевые кадры анимации.

Анимированные круги CSS3



Приступаем к установки:

HTML

Код
<div id="ransforamus">    
    <div id="ransition">
      <div id="nimated-ircles">
        <div id="properties-listed">
          <div id="fective-animations">
            <div id="content"></div>
          </div>
        </div>
      </div>
    </div>


CSS

Код
  html {
    overflow-y: scroll;
    -webkit-font-smoothing: antialiased; }

  body {
   background: #2E2A69; }

  a {
    color:#fff;
    text-decoration:none;
  }
  a:hover {
    color:#FF5E99;
  }
  a:link { -webkit-tap-highlight-color: #FF5E99; }

  #ransition {
   width: 800px;
   height: 300px;
   margin: auto; }

  #nimated-ircles {
   -webkit-box-shadow: 0 0 50px 10px #453D9B;
   -moz-box-shadow: 0 0 50px 10px #453D9B;
   box-shadow: 0 0 50px 10px #453D9B;
   border: 10px solid #ECEBFA;
   border-top-color:#746EBB;
   margin: 20% auto;
   text-align:center;
   background: -webkit-linear-gradient(top, #ffffff 48%, #ecebfa 49%, #ecebfa 51%, #fff 52%);
   background: -moz-linear-gradient(top, #ffffff 48%, #ecebfa 49%, #ecebfa 51%, #fff 52%);
   background: linear-gradient(to bottom, #ffffff 48%, #ecebfa 49%, #ecebfa 51%, #fff 52%);
   width: 220px;
   height: 220px;
    
   -webkit-border-radius: 220px;
   -moz-border-radius: 220px;
   border-radius: 220px;
    
   -webkit-animation:turning_cw 5s infinite;
   -moz-animation:turning_cw 5s infinite;
   animation:turning_cw 5s infinite;
   position:relative;
   opacity: 0.7; }
   
  #nimated-ircles:hover {
   -webkit-box-shadow: 0 0 100px 15px #453D9B;
   -moz-box-shadow: 0 0 100px 15px #453D9B;
   box-shadow: 0 0 100px 15px #453D9B; }
   
  #properties-listed {
   border: 10px solid #ECEBFA;
   border-left-color:#746EBB;
   border-right-color:#746EBB;
    
   -webkit-transform: rotate(360deg);
   -moz-transform: rotate(360deg);
   transform: rotate(360deg);
    
   position:absolute;
    
   background: -webkit-linear-gradient(top, #ecebfa 48%, #746EBB 49%, #746EBB 51%, #ECEBFA 52%);
   background: -moz-linear-gradient(top, #ecebfa 48%, #746EBB 49%, #746EBB 51%, #ECEBFA 52%);
   background: linear-gradient(to bottom, #ecebfa 48%, #746EBB 49%, #746EBB 51%, #ECEBFA 52%);
    
   margin: 10px;
   width: 180px;
   height: 180px;
    
   -webkit-border-radius: 180px;
   -moz-border-radius: 180px;
   border-radius: 180px;
    
   -webkit-animation:turning_acw 3s infinite;
   -moz-animation:turning_acw 3s infinite;
   animation:turning_acw 3s infinite; }

  #fective-animations {
   border: 10px solid #746EBB;
   border-bottom-color:#ECEBFA;
   -webkit-transform: rotate(360deg);
   -moz-transform: rotate(360deg);
   transform: rotate(360deg);
   position:absolute;

   background: -webkit-linear-gradient(top, #fff 48%, #ECEBFA 49%, #ECEBFA 51%, #fff 52%);
   background: -moz-linear-gradient(top, #fff 48%, #ECEBFA 49%, #ECEBFA 51%, #fff 52%);
   background: linear-gradient(to bottom, #fff 48%, #ECEBFA 49%, #ECEBFA 51%, #fff 52%);
    
   margin: 10px;
   width: 140px;
   height: 140px;
    
   -webkit-border-radius: 140px;
   -moz-border-radius: 140px;
   border-radius: 140px;
    
   -webkit-animation:turning_cw 5s infinite;
   -moz-animation:turning_cw 5s infinite;
   animation:turning_cw 5s infinite; }

  #content {
   position:absolute;
   top: 10px;
   left: 10px;
   width: 120px;
   height: 120px;
   -webkit-border-radius: 140px;
   -moz-border-radius: 140px;
   border-radius: 140px;
   background: #2E2A69;
   text-align:center;
   line-height: 120px;
   font-size: 30px;
   color:#746EBB;
   text-shadow: 0 2px 2px #000;
   font-weight:bold; }

  @-webkit-keyframes aura {
   0%{
    text-shadow: 0 2px 2px #000; }
    
   50%{
    text-shadow: 0 10px 10px #000;
    line-height: 190px; }
    
   100%{
    text-shadow: 0 2px 10px #000; }
  }

  @-webkit-keyframes turning_cw {
   0%{
    -webkit-transform: rotate(0deg); }
   100%{
    -webkit-transform: rotate(360deg); }
  }
  
  @-webkit-keyframes turning_acw {
   0%{
    -webkit-transform: rotate(360deg); }
   100%{
    -webkit-transform: rotate(0deg); }
  }

  @-moz-keyframes aura {
   0%{
    text-shadow: 0 2px 2px #000; }
    
   50%{
    text-shadow: 0 10px 10px #000;
    line-height: 190px; }
    
   100%{
    text-shadow: 0 2px 10px #000; }
  }

  @-moz-keyframes turning_cw {
   0%{
    -moz-transform: rotate(0deg); }
   100%{
    -moz-transform: rotate(360deg); }
  }
  
  @-moz-keyframes turning_acw {
   0%{
    -moz-transform: rotate(360deg); }
   100%{
    -moz-transform: rotate(0deg); }
  }

  @keyframes aura {
   0%{
    text-shadow: 0 2px 2px #000; }
    
   50%{
    text-shadow: 0 10px 10px #000;
    line-height: 190px; }
    
   100%{
    text-shadow: 0 2px 10px #000; }
  }

  @keyframes turning_cw {
   0%{
    transform: rotate(0deg); }
   100%{
    transform: rotate(360deg); }
  }
  
  @keyframes turning_acw {
   0%{
    transform: rotate(360deg); }
   100%{
    transform: rotate(0deg); }
  }


Демонстрация
Прикрепления: 6657827.jpg(14.1 Kb)
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Кругового вращения анимации с помощью CSS3 (Как создать анимацию с тенью при помощи стиля CSS)
  • Страница 1 из 1
  • 1
Поиск: