Сегодня первый рабочий день после праздника.Я проснулась утром и открыла глаза,а? какие...? какие...? где это? кто я? Какой у тебя класс?
Однако гуся все же разбудили восемь будильников⏰, специально заведенных прошлой ночью.Зимой трудно вставать утром... Наверное, я это испытал 😭, я пришел в офис рано с 10 000 человек, которые вставать не хотелось, и это была знакомая обстановка., или знакомый вкус. . .
Также знакомые требования к задаче 😂.
Сегодняшняя первая задача - написать страницу входа, мне начальник далОбратитесь к (chao) test (xi) case, вы можете увидеть это, нажав на ссылку. Что ж, эта страница входа действительно проста и щедра, особенно ее пузырьковый фон. Первой реакцией должна быть динамичная картинка. Когда я открыл элемент обзора, я обнаружил, что он написан в коде, что вызвало любопытство ребенка. Я также попытался написать страницу входа с пузырьковым фоном, эффект выглядит следующим образом:
эмм... почему загруженное динамическое изображение gif всегда такое маленькое, чтобы сделать скриншот:
(Вы можете сами придумать картинки этих всплывающих фоновых пузырей 😭)
Этого эффекта можно добиться с помощью простого кода,
Во-первых, давайте определим 10 тегов списка li, я использую структуру vue:
<ul class="bg-bubbles">
<li v-for="i in 10" :key="i"></li>
</ul>
Стили пишутся меньше:
.bg-bubbles {
position: absolute;
// 使气泡背景充满整个屏幕；
top: 0;
left: 0;
width: 100%;
height: 100%;
// 如果元素内容超出给定的宽度和高度，overflow 属性可以确定是否显示滚动条等行为；
overflow: hidden;
li {
position: absolute;
// bottom 的设置是为了营造出气泡从页面底部冒出的效果；
bottom: -160px;
// 默认的气泡大小；
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.15);
list-style: none;
// 使用自定义动画使气泡渐现、上升和翻滚；
animation: square 15s infinite;
transition-timing-function: linear;
// 分别设置每个气泡不同的位置、大小、透明度和速度，以显得有层次感；
&:nth-child(1) {
left: 10%;
}
&:nth-child(2) {
left: 20%;
width: 90px;
height: 90px;
animation-delay: 2s;
animation-duration: 7s;
}
&:nth-child(3) {
left: 25%;
animation-delay: 4s;
}
&:nth-child(4) {
left: 40%;
width: 60px;
height: 60px;
animation-duration: 8s;
background-color: rgba(255, 255, 255, 0.3);
}
&:nth-child(5) {
left: 70%;
}
&:nth-child(6) {
left: 80%;
width: 120px;
height: 120px;
animation-delay: 3s;
background-color: rgba(255, 255, 255, 0.2);
}
&:nth-child(7) {
left: 32%;
width: 160px;
height: 160px;
animation-delay: 2s;
}
&:nth-child(8) {
left: 55%;
width: 20px;
height: 20px;
animation-delay: 4s;
animation-duration: 15s;
}
&:nth-child(9) {
left: 25%;
width: 10px;
height: 10px;
animation-delay: 2s;
animation-duration: 12s;
background-color: rgba(255, 255, 255, 0.3);
}
&:nth-child(10) {
left: 85%;
width: 160px;
height: 160px;
animation-delay: 5s;
}
}
// 自定义 square 动画；
@keyframes square {
0% {
opacity: 0.5;
transform: translateY(0px) rotate(45deg);
}
25% {
opacity: 0.75;
transform: translateY(-400px) rotate(90deg)
}
50% {
opacity: 1;
transform: translateY(-600px) rotate(135deg);
}
100% {
opacity: 0;
transform: translateY(-1000px) rotate(180deg);
}
}
}
Чтобы добавить, цвет фона самого внешнего родительского контейнера здесь:
background: linear-gradient(to bottom right, #50A3A2, #53E3A6);
На этом этапе фоновое изображение пузыря завершено. Оглядываясь назад, это не сложно, но и заставляет людей почувствовать очарование и силу CSS-анимации ☺️.
Если вам понравилась эта статья, пожалуйста, поставьте лайк или подпишитесь, это будет моей большей мотивацией.
Впереди долгая дорога, надеюсь поделиться с вами 💪.