会弹跳的球

效果图

JS

import React from 'react';
import styles from './style.less'
const index = () =>
{
    
    
    return (
        <div className={
    
    styles.warp}>
            <div className={
    
    styles.container}>
                <div className={
    
    styles.bubble}></div>
                <div className={
    
    styles.shadow}></div>
            </div>
        </div>
    );
};
export default index

CSS

.warp {
    
    
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  //   阶梯渐变
  background: linear-gradient(150deg, #d299c2, #fef9d7);
  overflow: hidden;

  .container {
    
    
    position: relative;
    width: 200px;
    height: 200px;
  }

  // 泡泡
  .bubble {
    
    
    width: 100%;
    height: 100%;
    // 径向渐变
    background: radial-gradient(circle at 75% 30%, #fff 5px, #ff21c0 8%, #5b5b6b 60%, #ff21c0 100%);
    border-radius: 50%;
    box-shadow: inset 0 0 20px #fff,
      inset 10px 0 46px #eaf5fc,
      inset 80px 0 60px #efcde6,
      inset -20px -60px 100px #f9f6de,
      inset 0 50px 140px #f9f6de,
      0 0 90px #fff;
    //   执行动画 动画名称 时长 加速后减速 无限次播放
    animation: bubble 4s ease-in-out infinite;
  }

  .shadow {
    
    
    background-color: rgba((0), 0, 0, .15);
    width: 150px;
    height: 40px;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    margin-left: -75px;
    bottom: -100px;
    // 一点点模糊效果
    -webkit-filter: blur(1px);
    filter: blur(1px);
    animation: shadow 4s ease-in-out infinite;
  }

  //   定义动画
  @keyframes bubble {
    
    

    0%,
    100% {
    
    
      transform: translateY(0);
    }

    50% {
    
    
      transform: translateY(-80px);
    }
  }

  @keyframes shadow {
    
    

    0%,
    100% {
    
    
      transform: scale(.5);
    }

    50% {
    
    
      transform: scale(1);
    }
  }

}