以前写关闭按钮,都是用背景图之类的,今天我们用css来实现吧
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>close</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .search-close {
      font-size: 3em;
      text-align: center;
    }

    .search-close {
      line-height: 100px;
      width: 100px;
      color: #1b98e0;
      position: absolute;
      cursor: pointer;
      right: 0;
      top: 0;
      opacity: .5;
      transition: color .3s ease 0, opacity .2s ease 0, transform .3s ease 0;
    }

    .search-close::before {
      content: '\2715';
    }

  </style>
</head>

<body>
  <label class="search-close"></label>
</body>

</html>

codepen实时预览

See the Pen css close by extra (@it5200) on CodePen.


扫描二维码,在手机上阅读!