Создайте фон CSS Fireflies с помощью HTML/CSS
Опубликовано: 20 Февраля, 2023
В этой статье мы увидим, как создать фон CSS Fireflies с помощью HTML и CSS, а также познакомимся с его реализацией на иллюстрации.
Эффект светлячков CSS можно создать, используя анимацию CSS, и мы реализуем 3 анимации для достижения эффекта светлячков. Чтобы создать случайность, мы использовали разные анимации для разных светлячков.
Подход: для создания фона CSS светлячков будет использоваться следующий подход:
- Создайте папку проекта и внутри нее создайте два файла index.html и style.css . Кроме того, свяжите файл CSS с файлом HTML. Затем создайте заголовок, если это необходимо.
- Теперь сделайте « Background-color » тела черным.
- Создайте десять или более тегов <li> под тегом <ul> в HTML. Эти теги <li> будут использоваться как светлячки. Внутри тега <li> оставьте его пустым.
HTML
<ul class="fireflies"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li></ul> |
- В файле CSS мы создадим светлячков. Во-первых, добавьте ” list-style: none; ” на тег <ul> , который удалит маркеры, созданные для неупорядоченного списка.
- Создайте светлячков, добавив CSS в теги <li> . Во-первых, задайте высоту и ширину каждому элементу <li>. Теперь сделайте радиус границы: 50%; », чтобы заставить светлячков кружиться. Теперь, чтобы придать светлячкам эффект свечения, мы будем использовать желтый цвет фона вместе с радиальным градиентом и тенью . и мы должны сделать положение светлячков абсолютным .
CSS
border-radius: 50%;background-color: rgb(255, 255, 73);background-image: radial-gradient(rgb(249, 206, 36) 5%, rgb(254, 179, 4) 25%, rgb(252, 191, 7) 60%);box-shadow: 0 0 5px 2px rgb(250, 193, 93), 0 0 20px 10px rgb(255, 228, 140), 0 0 40px 15px rgb(255, 219, 41);height: 5px;width: 5px;top: -20px;position: absolute; |
- Теперь, чтобы перемещать светлячков случайным образом, нам нужно создать три анимации. Первый будет управлять движением слева направо, второй будет контролировать движение сверху вниз, а последний будет создавать эффект мерцания.
- для создания анимации используйте @keyframes и дайте изменяющееся значение в разное время ( используйте пошаговую анимацию ).
CSS
/* animations */ /* It will create the left right movement */@keyframes leftright { 0%, 100% { left: 80%; } 16.666% { left: 95%; } 33.333% { left: 10%; } 50% { left: 60%; } 66.666% { left: 70%; } 83.333% { left: 5%; }} /* It will create the up down movement */@keyframes updown { 0%, 100% { top: 10px; } 25% { top: 90%; } 50% { top: 50%; } 75% { top: 95%; }} /* It will create the blinking effect */@keyframes blinking { 0%, 100% { box-shadow: 0 0 5px 2px rgb(250, 193, 93), 0 0 10px 5px rgb(255, 242, 63), 0 0 30px 10px rgb(255, 219, 41); height: 0; width: 0; } 50% { box-shadow: 0 0 5px 2px rgb(250, 193, 93), 0 0 20px 10px rgb(255, 228, 140), 0 0 40px 15px rgb(255, 219, 41); } 75% { box-shadow: 0 0 0px 0px rgb(250, 193, 93), 0 0 0px 0px rgb(255, 228, 140), 0 0 0px 0px rgb(255, 219, 41); }} |
- Теперь добавьте анимацию в теги <li> и используйте функцию Cubic-Bezier для движения вверх-вниз и влево-вправо, чтобы задать движение кривой Cubic Bezier и установить анимацию в бесконечное состояние.
CSS
animation: leftright 24s infinite cubic-bezier(0.39, 0, 0.63, 1),updown 8s infinite 1.25s cubic-bezier(0.39, 0, 0.63, 1),blinking 3s infinite; |
- Теперь, чтобы двигать светлячков с разной скоростью, мы должны присвоить разные значения animation-duration , animation-delay и animation-fill-mode . используйте свойства nth-of-type() для выбора другого <li>.
CSS
li:nth-of-type(1) { animation-delay: 1s; animation-duration: 65s, 81s, 0.01s; animation-fill-mode: backwards, backwards;} |
Пример: этот пример иллюстрирует создание фона светлячков с помощью HTML и CSS.
HTML
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>GeeksforGeeks</title> <!-- stylesheets --> <link rel="stylesheet" href="style.css"></head> <body> <!-- heading --> <header> <h1 class="heading">GeeksforGeeks</h1> <h3 class="title"> Fireflies background using HTML/CSS </h3> </header> <!-- fireflies --> <ul class="fireflies"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul></body> </html> |
CSS
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif;} body { background-color: #000000; background-image: linear-gradient(bottom, #000058 60%, #000033 40%);} header { width: 100%; height: 90px; position: absolute; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #ffffff;} .heading { color: green;} .title { font-weight: 400; letter-spacing: 1.5px;} ul.fireflies { list-style: none;} li { border-radius: 50%; background-color: rgb(255, 255, 73); background-image: radial-gradient(rgb(249, 206, 36) 5%, rgb(254, 179, 4) 25%, rgb(252, 191, 7) 60%); box-shadow: 0 0 5px 2px rgbРЕКОМЕНДУЕМЫЕ СТАТЬИ |