html动态气泡原理,css实现动态气泡背景.html

Document

* {

margin: 0;

padding: 0;

}

.bg {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

overflow: hidden;

background: linear-gradient(to bottom right, #50A3A2, #53E3A6);

}

li {

position: absolute;

top: -100px;

width: 40px;

height: 40px;

text-align: center;

line-height: 40px;

background-color: rgba(255, 255, 255, 0.15);

list-style: none;

animation: square 15s infinite;

transition-timing-function: linear;

border-radius: 50%;

}

li:nth-child(1) {

left: 8%;

}

li:nth-child(2) {

left: 12%;

animation-delay: 2s;

animation-duration: 7s;

}

li:nth-child(3) {

left: 25%;

animation-delay: 4s;

}

li:nth-child(4) {

left: 40%;

animation-duration: 8s;

background-color: rgba(255, 255, 255, 0.3);

}

li:nth-child(5) {

left: 70%;

}

li:nth-child(6) {

left: 80%;

animation-delay: 3s;

background-color: rgba(255, 255, 255, .2);

}

li:nth-child(7) {

left: 32%;

}

li:nth-child(8) {

left: 55%;

animation-delay: 4s;

animation-duration: 15s;

}

li:nth-child(9) {

left: 25%;

animation-delay: 2s;

animation-duration: 15s;

background-color: rgba(255, 255, 255, 0.3);

}

li:nth-child(10) {

left: 85%;

animation-delay: 5s;

}

@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);

}

}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

一键复制

编辑

Web IDE

原始数据

按行查看

历史