Каждая статья в этой статье — точка кипения выложенных мной наггетсов, и многие из них перевалили за 100 лайков (улыбается).
Ввиду того, что детская обувь время от времени переворачивает мои предыдущие точки кипения, в этой серии собраны все анимации точек знаний CSS, которые я пока отправлял для удобства чтения.
Два месяца назад я опубликовал«49 пунктов знаний CSS, о которых вы могли не знать», имеет более 3000 лайков, здесь Лао Яо искренне благодарит всех за вашу поддержку.
Это второй сезон. По сравнению с предыдущей каждая анимация ускорена и выглядит более плавно.
Кроме того, эта статья также просто классифицирована, и анимационных спецэффектов относительно больше.
Следует отметить, что я не собираюсь создавать сложные спецэффекты, большинство из которых может быть достигнуто с помощью одного или двух элементов div. Основная цель — продемонстрировать комплексное применение градиентов, теней, преобразований, анимации и т. д.
Большинство из них предоставляют ссылки на онлайн-демонстрации, приятного чтения!
Очки знаний
01. 🔢 Использование счетчика CSS
02. 📝Отступ текста, уровень блока с отступом текста, встроенный с отступом слева
03.📖 Общие приемы украшения столов. Равное соотношение, фиксированная ширина, неправильный цвет и т. д.
04. 👔 Украшение в стиле полосы прокрутки
05.👉Используйте значение свойства выравнивания текста по выравниванию, чтобы добиться эффекта промежутка, похожего на эластичный макет.
06. 🐠 Используйте селектор выбора, чтобы настроить стиль выделения выбора текста
07. 🏩grid-template Установите шаблон сетки для создания макета из трех столбцов и двух строк.
08. 🏠grid-gap Установить зазоры сетки, включая строки и столбцы
09. 🏡Сетка с использованием единиц fr для распределения пространства в равных пропорциях. fr это сокращение от дроби
10. 🏢Сетка использует функцию повтора, вы можете писать меньше кода
11. 🍧focus-within — один из немногих, который может управлять родительским селектором дочерним элементом.
12. ♐ Легко упускаемый из виду селектор целей
Принципы спецэффектов.
13.⚽Используйте преобразования для создания простого составного движения
14. 🌈 Увидеть радугу, съесть радугу
15. 🙅 Отсканированное изображение, используемое в распознавании лиц, требование нашей компании до
16. 🗿 Стереоскопическая кнопка
17. 🔄 Реализуйте хаотичный динамический фон
18. 💞 Вращение по эллиптической орбите. Это можно сделать, соединив поступательное движение и круговое движение.
19. 👓 Простые эффекты фильтра могут быть достигнуты только с фоном
20.🐍 Принципы эффектов змеиной границы
21. 🎁 Заставь свою девушку двигаться
22. 🌖 Див для реализации тенгу, поедающего луну
23. 🌖 Более простое решение, чтобы Тэнгу съел луну
24.🌌 нарисуйте Сатурн, очень похожий на одну треть
Демонстрационный адрес 2:codepen
25. 🌈 Используйте градиент, div для рисования логотипа Chrome.
26. 🉐 Див просто рисует медные монеты
27.🃏Принцип эффектов вырезания карт
28. Примените анимацию к приложению Clip-Path.
Инструменты
29. Вы можете использовать синтаксис Emmet в 🚀vscode, нажмите клавишу табуляции, чтобы завершить команду, ^ означает возврат на предыдущий уровень
30.⛲ Ознакомьтесь с советами по макету страницы, я думаю, что они очень полезны
Надеюсь, это поможет.
Также добро пожаловать, чтобы прочитать мой собственный"Обычная мини-книга JS".
Эта статья закончилась.