一、气泡

效果:

css3特殊图形(气泡)

        body{
            background: #dd5e9d;
            height: 100%;
        }
        .paopao {
            position: absolute;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-image: radial-gradient(rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 1) 80%);
            transform: translateX(50%);
            will-change: top, left; /*增强页面渲染性能*/
        }
        .paopao::after {
            content: '';
            position: absolute;
            top: 20%;
            right: 25%;
            width: 33%;
            height: 33%;
            border: 3px solid;
            border-color: rgba(255, 255, 255, 0.8) transparent transparent transparent;
            border-radius: 50%;
            transform: rotate(45deg);
        }

 

相关文章:

  • 2022-12-23
  • 2022-01-13
  • 2021-10-31
  • 2022-12-23
  • 2022-01-29
  • 2021-08-02
猜你喜欢
  • 2022-12-23
  • 2021-12-10
  • 2021-08-29
  • 2021-07-10
  • 2022-12-23
  • 2022-02-16
相关资源
相似解决方案