• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Сделать красивую анимацию приветствие в CSS (CSS3 Animations для сайтов и форума с приветствием)
Сделать красивую анимацию приветствие в CSS
Kosten
Дата: Суббота, 2019-06-22, 03:09 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25131
Награды: 57


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

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



HTML

Код
<div class="radualamation-sosegnimation"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
     Здесь идет приветствие
    </font></font></div>

CSS

Код
    .radualamation-sosegnimation {
   height: 58px;
   padding: 9px;
   -webkit-animation-name: movearound;
   -webkit-animation-duration: 4s;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-direction: normal;
   -webkit-animation-timing-function: ease;
  }
  
  @-webkit-keyframes movearound {
   from {
    width: 198px;
        background: #dc1515;
    opacity: 0.5;
    -webkit-transform: scale(0.5) rotate(15deg);
   }
   to {
    width: 398px;
        background: #f169b9;
    opacity: 1;
    -webkit-transform: scale(1) rotate(0deg);
   }
  }


Демонстрация
Прикрепления: 3440409.png(6.7 Kb) · AKWB.zip(2.6 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Сделать красивую анимацию приветствие в CSS (CSS3 Animations для сайтов и форума с приветствием)
  • Страница 1 из 1
  • 1
Поиск: