美文网首页
css实现小三角,loading

css实现小三角,loading

作者: 依然_8deb | 来源:发表于2021-03-16 11:09 被阅读0次

    1、小三角

    <span class="title">标题</span>
    <style>
    .title{display:inline-block;position:relative}  
    .title:after {
        position: absolute;
        content: "";
        right:-20px;
        top:3px;
        height: 10px;
        width:10px;
        background-image:linear-gradient(to right top,orange 0,orange 49%,transparent 50%,transparent 100%);
        transform:rotate(-45deg)
    }
    </style>
    
    效果: image.png

    2、loading

    <div class="loading"></div>
    <style>
    .loading {
      width: 100px; height: 100px;
      border-radius: 50%;
      background: conic-gradient(#ff8100, 30%, white);
      -webkit-mask-image: radial-gradient(closest-side, transparent 80%, black 76%);
      mask-image: radial-gradient(closest-side, transparent 75%, black 76%);
     animation: spin 1s linear infinite reverse;
      }
      @keyframes spin {
          from { transform: rotate(0deg); }
          to { transform: rotate(360deg); }
      }
    </style>
    

    相关文章

      网友评论

          本文标题:css实现小三角,loading

          本文链接:https://www.haomeiwen.com/subject/nsorcltx.html