css 加号“+”样式 - css

一、css实现加号“+”样式，鼠标移动到加号上，变为蓝色

二、源码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style>
.add {
  border: 1px solid;
  width: 100px;
  height: 100px;
  color: #ccc;
  transition: color .25s;
  position: relative;
}
.add::before{
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80px;
  margin-left: -40px;
  margin-top: -5px;
  border-top: 10px solid;
}
.add::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  height: 80px;
  margin-left: -5px;
  margin-top: -40px;
  border-left: 10px solid;
}
.add:hover {
  color: blue;
}
</style>
</head>
<body>
<div class="conatiner">
  <div class="add"></div>
</div>
</body>
</html>

三、效果图

.....

转载请注明：谷谷点程序 » css 加号“+”样式