侧边栏壁纸

CSS果冻气泡

2024年03月17日 131阅读 0评论 1点赞

1

  • HTML代码:

    <div class="ball">
    </div>
    <div class="shadow"></div>
  • CSS代码:

    body {
    background-image: linear-gradient(
      to bottom right,
      #91defe,
      #99c0f9,
      #bdb6ec,
      #d7b3e3,
      #efb3d5,
      #f9bccc
    );
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    }
    
    .ball {
    animation: float 3.5s ease-in-out infinite;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    position: relative;
    
    background: radial-gradient(
      circle at 75% 30%,
      white 5px,
      aqua 8%,
      darkblue 60%,
      aqua 100%
    );
    box-shadow: inset 0 0 20px #fff, inset 10px 0 46px #eaf5fc,
      inset 88px 0px 60px #c2d8fe, inset -20px -60px 100px #fde9ea,
      inset 0 50px 140px #fde9ea, 0 0 90px #fff;
    }
    
    @keyframes float {
    0% {
      transform: translatey(0px);
    }
    50% {
      transform: translatey(-80px);
    }
    100% {
      transform: translatey(0px);
    }
    }
    
    .shadow {
    background: #b490b2;
    width: 150px;
    height: 40px;
    top: 70%;
    animation: expand 4s infinite;
    position: absolute;
    border-radius: 50%;
    }
    @keyframes expand {
    0%,
    100% {
      transform: scale(0.5);
    }
    
    50% {
      transform: scale(1);
    }
    }
    
    @media only screen and (max-width: 500px) {
    .ball {
      animation: float 4.5s ease-in-out infinite;
      height: 120px;
      width: 120px;
    
      background: radial-gradient(
        circle at 65% 35%,
        white 5px,
        aqua 15%,
        darkblue 50%,
        aqua 100%
      );
      box-shadow: inset 0 -20px 30px #fff, inset 40px 0 46px #eaf5fc,
        inset 58px 0px 60px #c2d8fe, inset -8px -30px 100px #fde9ea,
        inset 0 20px 110px #fde9ea, 0 0 90px #fff;
    }
    .shadow {
      width: 90px;
      height: 20px;
      top: 78%;
      animation: expand 5s infinite;
    }
    
    @keyframes float {
      0% {
        transform: translatey(0px);
      }
      50% {
        transform: translatey(-50px);
      }
      100% {
        transform: translatey(0px);
      }
    }
    }
    
1
打赏

—— 评论区 ——

昵称
邮箱
网址
取消
说辞
坚持每天来逛逛,会让你
生活也美好了!
心情也舒畅了!
走路也有劲了!
腿也不痛了!
腰也不酸了!
工作也轻松了!
你好我也好,不要忘记哦!
舔狗日记