CSS常用动画效果

1.标题两边的小横杠

<div class="title">标题</div>
title {
   
  color: #e1767c;
  font-size: 0.3rem;
  position: relative;

  &:before,
  &:after {
   
    content: "";
    position: absolute;
    display: block;
    left: 50%;
    top: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    border-top: 0.02rem solid #e1767c;
    width: 0.4rem;
  }
  &:before {
   
    margin-left: -1.2rem;
  }
  &:after {
   
    margin-left: 1.2rem;
  }
}

2.鼠标手型(cursor属性)

a[href],
input[type="submit"],
input[type="image"],
input[type="button"],
label[for],
select,
button {
   
  cursor: pointer;
}

3.小三角

.triangle {
   
  /* 基础样式 */
  border: solid 10px transparent;
}
/*下*/
.triangle.bottom {
   
  border-top-color: green;
}
/*上*/
.triangle.top {
   
  border-bottom-color: green;
}
/*左*/
.triangle.top {
   
  border-right-color: green;
}
/*右*/
.triangle.top {
   
  border-left-color: green;
}

3.flutter调试模式上面的小便签（顶角贴纸效果）

<div class="wrap">
  <div class="ribbon">
    <a href="#">Fork me on GitHub</a>
  </div>
</div>

/* 外层容器几本设置  */
.wrap {
   
  width: 160px;
  height: 160px;
  overflow: hidden;
  position: relative;
  backgrou