css div 外面水波纹效果

css :

*    .zl:before {
      content: '';
      display: block;
      width: 8rem;
      height: 8rem;
      position: absolute;
      left: 47%;
      top: 35%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.3);
      animation: scale 2s linear infinite;
    }*/

    @keyframes scale {
      0% {
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 1
      }
      100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0
      }
    }

 

效果参考:http://www.bootstrapmb.com/item/11382/preview

posted @ 2021-11-03 17:27  凉面好好吃  阅读(164)  评论(0编辑  收藏  举报