美文网首页
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