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>
网友评论