css气泡背景墙样式

css气泡背景墙样式

<div class="bruce" data-title="气泡背景墙">
    <ul class="bubble-bgwall">
        <li>Love</li>
        <li>Love</li>
        <li>Love</li>
        <li>Love</li>
        <li>Love</li>
        <li>Love</li>
        <li>Love</li>
        <li>Love</li>
        <li>Love</li>
        <li>Love</li>
    </ul>
</div>

css代码:

* {
    margin:0;
    padding:0;
}
html,body {
    width:100%;
    height:100%;
}
.bruce {
    width:100%;
    height:100%;
    background-image:linear-gradient(270deg,#8146b4,#6990f6);
}
.bubble-bgwall {
    overflow:hidden;
    position:relative;
    margin:0 auto;
    width:1200px;
    height:100%;
}
li {
    display:flex;
    position:absolute;
    bottom:-200px;
    justify-content:center;
    align-items:center;
    border-radius:10px;
    width:50px;
    height:50px;
    background-color:rgba(#fff,.15);
    color:#ccc;
    animation:bubble 15s infinite;
}
li:nth-child(1) {
    left:10%;
}
li:nth-child(2) {
    left:20%;
    width:90px;
    height:90px;
    animation-duration:7s;
    animation-delay:2s;
}
li:nth-child(3) {
    left:25%;
    animation-delay:4s;
}
li:nth-child(4) {
    left:40%;
    width:60px;
    height:60px;
    background-color:rgba(#fff,.3);
    animation-duration:8s;
}
li:nth-child(5) {
    left:70%;
}
li:nth-child(6) {
    left:80%;
    width:120px;
    height:120px;
    background-color:rgba(#fff,.2);
    animation-delay:3s;
}
li:nth-child(7) {
    left:32%;
    width:160px;
    height:160px;
    animation-delay:2s;
}
li:nth-child(8) {
    left:55%;
    width:40px;
    height:40px;
    font-size:12px;
    animation-duration:15s;
    animation-delay:4s;
}
li:nth-child(9) {
    left:25%;
    width:40px;
    height:40px;
    background-color:rgba(#fff,.3);
    font-size:12px;
    animation-duration:12s;
    animation-delay:2s;
}
li:nth-child(10) {
    left:85%;
    width:160px;
    height:160px;
    animation-delay:5s;
}
@keyframes bubble {
  0% {
    opacity:.5;
    transform:translateY(0) rotate(45deg);
  }
  25% {
    opacity:.75;
    transform:translateY(-400px) rotate(90deg);
  }
  50% {
    opacity:1;
    transform:translateY(-600px) rotate(135deg);
  }
  100% {
    opacity:0;
    transform:translateY(-1000px) rotate(180deg);
  }
}

「点点赞赏,手留余香」

1

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » css气泡背景墙样式

发表回复

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们