css3实现方块气泡效果

最新推荐文章于 2024-07-23 16:14:20 发布

慧、新

最新推荐文章于 2024-07-23 16:14:20 发布

阅读量1k

点赞数

分类专栏： css3

本文链接：https://blog.csdn.net/Endeavor_No1/article/details/79368055

版权

css3 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

曾经在看过京东的登录注册界面是动态效果的，审查元素发现是动态图，现在可以尝试手动制作一个登录注册动态背景图，代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>基础练习1</title>
    <link rel="stylesheet" href="">
    <style>
        *{
            margin: 0px;
            padding:0px; 
        }
        #bubble{
            background: linear-gradient(to bottom right, #50A3A2, #53E3A6);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;}
            li {
              position: absolute;
              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;
              
        }
            li:nth-child(1) {
                left: 10%;
              }
            li:nth-child(2) {
                left: 20%;
                width: 90px;
                height: 90px;
                animation-delay: 2s;
                animation-duration: 7s;
              }
            li:nth-child(3) {
                left: 25%;
                animation-delay: 4s;
              }
            li:nth-child(4) {
                left: 40%;
                width: 60px;
                height: 60px;
                animation-duration: 8s;
                background-color: rgba(255, 255, 255, 0.3);
              }
            li:nth-child(5) {
                left: 70%;
              }
            li:nth-child(6) {
                left: 80%;
                width: 120px;
                height: 120px;
                animation-delay: 3s;
                background-color: rgba(255, 255, 255, 0.2);
              }
            li:nth-child(7) {
                left: 32%;
                width: 160px;
                height: 160px;
                animation-delay: 2s;
              }
            li:nth-child(8) {
                left: 55%;
                width: 20px;
                height: 20px;
                animation-delay: 4s;
                animation-duration: 15s;
              }
            li:nth-child(9) {
                left: 25%;
                width: 10px;
                height: 10px;
                animation-delay: 2s;
                animation-duration: 12s;
                background-color: rgba(255, 255, 255, 0.3);
              }
            li:nth-child(10) {
                left: 85%;
                width: 160px;
                height: 160px;
                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);
              }
            }
          }
    </style>
</head>
<body>
    <ul id="bubble">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
    
    </script>
</body>
</html>

1.html 10个li

2.设置固定背景

3.给每个li设置样式

4.添加动画