css

[kangkai124]

awesome-css, etc

[kangkai124]

超链接 hover 时的波浪线

效果看这里

偷学自张鑫旭的博客

原理很简单，hover 的时候，替换 a 标签的背景图，再加一个循环的动画即可。

<a href="javascript:void 0">我是一个链接</a>

a {
  text-decoration: underline;
  color: #2d8cf0;
  
  &:hover {
  text-decoration: none;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 5'><path fill='none' stroke='%232d8cf0' d='M0 3.5c5 0 5-3 10-3s5 3 10 3 5-3 10-3 5 3 10 3'/></svg>") repeat-x 0 100%;
  background-size: 20px auto;
  animation: waveMove 1s infinite linear;
  }
}

@keyframes waveMove {
  0% {
  background-position: 0 100%;
  }
  100% {
  background-position: -20px 100%;
  }
}

[kangkai124]

查看 CSS hover 属性

[kangkai124]

div 水平垂直居中

<div class="parent big">
  <div class="child small"></div>
</div>

.big {
  width: 600px;
  height: 400px;
  border: 1px solid #333;
  margin: 100px auto;
}

.small {
  width: 300px;
  height: 200px;
  background: lightgreen;
}

接下来，实现水平垂直居中：

1. flex
子元素宽高任意，但是有兼容问题。

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

OR

.parent {
  display: flex;
}

.child {
  margin: auto;
}

2. position
没有兼容问题，但是没有足够空间时，子元素被截断。

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* OR */
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -150px;
}
/*  OR */
.child {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

3. grid
有兼容问题。

.parent {
    display: grid;
}

.child {
    justify-self: center;
    align-self: center;
}

4. inline-block
没有兼容问题，很优秀。

.parent {
  font-size: 0;
  text-align: center;
  &::before {
    content: "";
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
  }
}

.child {
  display: inline-block;
  vertical-align: middle;
}

5. table-cell

.parent {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.child {
  display: inline-block;
}