предисловие
Ставьте лайк и смотрите снова, формируйте привычку~
1.Animista
Адрес веб-сайта:animista.net/
**Описание сайта:** Создание CSS-анимации онлайн
Animistaэто онлайн-генератор анимации и библиотека анимации, которая предоставляет нам следующие функции
В процессе изучения веб-интерфейса вы неизбежно столкнетесь со многими проблемами.Эти проблемы могут беспокоить вас в течение длительного времени.По этой причине у меня есть группа обмена обучением веб-разработке (545667817), которые являются друзьями Nuggets, и собрали самые полные учебные материалы по внешнему интерфейсу, от самых основных HTML + CSS + JS до фактических учебных материалов мобильных проектов HTML5, все из которых можно изучить. , все учатся друг у друга, общаются друг с другом, вместе добиваются успехов и каждый день делятся разными учебными материалами!
1. Выберите другую анимацию
Мы можем выбрать тип анимации, которую мы хотим (например,entrance/exist), за исключением того, что можно выбрать анимацию (например,scale-in), вы даже можете выбрать другой эффект презентации для анимации (например:scale-in-right).
2. Настроить
AnimistaТакже предоставляет функцию, которая позволяет нам настраивать определенные части анимации, например
- duration
- delay
- direction
Более того, вы можете выбрать, какие объекты анимировать:
3. Сгенерируйте CSS-код
Выбрав подходящую нам анимацию, мы можем получить код прямо с сайта или даже сжать его:
4. Загрузите код
Еще одна полезная функция заключается в том, что вы можете сохранять свои любимые анимации и загружать их вместе, или вы можете копировать коды этих анимаций вместе.
2. Animate CSS
Адрес веб-сайта:daneden.github.io/anim...
** Описание сайта: ** Полная библиотека анимации CSS3
Я думаю, это не нуждается в представлении, большинство людей знают это.Animate CSSВероятно, одна из самых известных анимационных библиотек. Вот краткое введение в его использование:
1. Использование
Во-первых, вы должны добавить классы к элементам, которые всегда нужно анимировать.animated, а затем название анимации.
<div class="animated slideInLeft"></div>
Если мы хотим, чтобы анимация продолжалась, мы можем добавитьinfiniteсвоего рода.
Добавляем анимацию через JS:
document.querySelector('.my-element').classList.add('animated', 'slideInLeft')
Добавляем анимацию через JQ:
$(".my-element").addClass("animated slideInLeft")
2. Другие функции
Animate CSSНекоторые базовые классы предназначены для управления задержкой и скоростью анимации.
delay
можно добавитьdelayкласс для задержки воспроизведения анимации.
<div class="animated slideInLeft delay-{1-5}"><div>
speed
Мы также можем контролировать скорость анимации, добавив один из перечисленных ниже классов.
<div class="animated slideInLeft slow|slower|fast|faster"><div>
3. Vivify
Адрес веб-сайта: vivify.mkcreative.cz/
Описание сайта:Более богатая библиотека анимации CSS
Vivifyэто библиотека анимации, которую можно рассматривать какAnimate CSS的Расширенное издание. Они работают точно так же, сAnimate CSSБольшинство классов, а также расширить некоторые.
<div class="vivify slideInLeft"></div>
Используя способ JS:
document.querySelector('.my-element').classList.add('vivify', 'slideInLeft')
Используя метод JQ:
$(".my-element").addClass("vivify slideInLeft")
иAnimate CSSАналогично, Vivify также предоставляет классы для управления продолжительностью и задержкой анимации.
Доступны классы задержки и продолжительности со следующими интервалами:
<div class="delay|duration-{100|150|200|250...1000|1250|1500|1750...10750}"></div>
4. Magic Animations CSS3
Адрес веб-сайта: www.minimamente.com/p...
Описание сайта:Magic CSS3 Animations — это пакет анимаций CSS3 со специальными эффектами, которые пользователи могут свободно использовать в веб-проектах.
В этой анимационной библиотеке есть несколько действительно красивых и плавных анимаций, особенно в 3D. Нечего сказать, просто попробуйте сами.
<div class="magictime fadeIn"></div>
Используя способ JS:
document.querySelector('.my-element').classList.add('magictime', 'fadeIn')
Используя метод JQ:
$(".my-element").addClass("magictime fadeIn")
5. cssanimation.io
Адрес веб-сайта: cssanimation.io/index....
cssanimation.ioЭто огромная коллекция различных анимаций, может быть, всего около 200, что довольно мощно. Если вы даже не можете найти нужную вам анимацию здесь, ее будет сложно найти в другом месте.
Он работает аналогично Animista. Например, вы можете выбрать анимацию и получить код прямо с сайта, а можете скачать всю библиотеку.
использование
будетcssanimation {animation_name}добавляется к указанному элементу.
<div class="cssanimation fadeIn"></div>
Используйте JS
document.querySelector('.my-element').classList.add('cssanimation','fadeIn')
Используйте JQ
$(".my-element").addClass("cssanimation fadeIn")
можно также добавитьinfiniteкласс, чтобы анимация могла зацикливаться.
<div class="cssanimation fadeIn infinite"></div>
также,**cssanimation.io** также дает нам особенность аниме писем. Использование этого требует импортаletteranimation.jsфайл, затемle {animation_name}к нашему текстовому элементу.
<div class="cssanimation leSnake"></div>
Чтобы анимировать буквы по порядку, добавьтеsequenceклассы, чтобы анимировать их случайным образом, добавьтеrandomсвоего рода.
<div class="cssanimation leSnake {sequence|random}"></div>
Sequence
Random
6.Angrytools
Адрес веб-сайта: angrytools.com/css/an...
Если используется другой генератор,AngrytoolsНа самом деле коллекция, которая также включает в себя генераторы CSS-анимации.
это может быть не такAnimistaТак сложно, но я думаю, что это тоже довольно хорошо. Этот сайт также предоставляет некоторые функции для пользовательской анимации, такие как продолжительность или задержка анимации.
Но что мне нравится, так это то, что мы можем добавить индивидуальную шкалу времени презентации.keyframes, и тогда вы сможете писать код прямо в нем. Кроме того, существующие также можно редактировать.
Когда мы закончим, полный код анимации будет доступен, и его также можно загрузить.
7.Hover.css
Адрес веб-сайта: ianlunn.github.io/Hover/
Описание сайта:Чистая библиотека CSS3 для анимации эффекта мыши над библиотекой эффектов
Hover.cssпредставляет собой набор множества анимаций CSS, которые, в отличие от анимаций выше, срабатывают каждый раз, когда на элемент наводится курсор.
Набор поддерживаемых CSS3 эффектов наведения, которые можно применять к ссылкам, кнопкам, логотипам, SVG, избранным изображениям и т. д.
** использование
Это очень просто: просто добавьте имя класса к элементу, например
<button class="hvr-fade">Hover me!</button>
8.WickedCSS
Адрес веб-сайта: kristofferandreasen.gi...
WickedCSS— это небольшая библиотека анимации CSS, в ней не слишком много вариантов анимации, но, по крайней мере, есть большие изменения. Большинство из них — это основы, с которыми мы уже знакомы, но они действительно чистые.
Его использование так же просто, как добавление имени анимации к элементу.
<div class="bounceIn"></div>
** Использование JS
document.querySelector('.my-element').classList.add('bounceIn')
** Использование JQ
$(".my-element").addClass("bounceIn")
9.Three Dots
Адрес веб-сайта: nzbin.github.io/three...
Three Dotsпредставляет собой набор анимаций загрузки CSS, состоящих из трех точек, состоящих только из одного элемента.
** использование
просто создайтеdivэлемент и добавьте название анимации
<div class="dot-elastic"></div>
10.CSShake
Адрес веб-сайта: elrumordelaluz.github...
Как следует из названия,CSShake— это библиотека анимации CSS, которая содержит различные типы анимации встряхивания.
** использование
будетshake {animation name}добавляется к элементу.
<div class="shake shake-hard"></div>
Используйте JS
document.querySelector('.my-element').classList.add('shake','shake-hard')
Используйте JQ
$(".my-element").addClass("shake shake-hard")
общаться:
Для каждого внешнего партнера, тех, кто хочет изучить веб-интерфейс, или сменить профессию, или студентов колледжа, и тех, кто хочет улучшить свои способности на работе, тех, кто учится, приглашаем присоединиться к обучению (545667817).