【Ten Mins Effect】 - 01 创意列表悬停效果

大家好，这里是初心Yearth，欢迎来到 10 mins css，每天花 10 分钟，实现要给简单精美的 css 效果。

那么下面我们直接进入正题，先来看看今天的效果展示吧：

分析

不难看出，想要实现上面的效果，关键点在于 hover 效果，而这个 hover 效果分解如下：

• 左侧按钮变色
• 左侧按钮变宽，包裹住文本区域
• 左侧按钮小幅度变大，同时向右小幅度偏移
• 当鼠标移开之后，按钮先回复原来的形状，然后恢复原来的颜色

知道了流程，那么我们尝试先实现一个单独的 list item。

首先自然是基本的样式：

<section class="container">
  <li>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  </li>
</section>

:root {
  --theme-color: #03a9f4;
  --bg-color: #182b3c;
  --text-color: #ffffff;
  --default-length: 32px;
}
* {
  margin: 0;
  padding: 0;
}
body {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--theme-color);
}
.container {
  padding: 40px;
  background: var(--bg-color);
  box-shadow: 0 15px 25px #00000040;
}

.container li {
  list-style: none;
  color: var(--text-color);
  padding-left: var(--default-length);
}

效果如下：

接下来是左边按钮的实现，这里可以借助 before 和 after，就不用再增加额外的 dom 了。

.container li::before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--default-length) * 8);
  height: calc(var(--default-length) * 8);
  border-radius: 50%;
  border: 2px solid var(--theme-color);
}

.container li::after {
  content: "";
  position: absolute;
  background: transparent;
  top: calc(var(--default-length) * 2.75);
  left: calc(var(--default-length) * 2.5);
  width: calc(var(--default-length) * 2);
  height: calc(var(--default-length) * 2);
  border-top: 2px solid var(--text-color);
  border-right: 2px solid var(--text-color);
  transform: rotate(45deg);
}

效果如下：

接下来实现 hover 效果，这里只要抓住几个关键点即可：

• hover 的时候，按钮先变色，后变宽，所以需要分别设置 background 和 witdh 的延迟
• 变宽之后不能覆盖文字，所以需要设置文字的 z-index

.container li::before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--default-length) * 8);
  height: calc(var(--default-length) * 8);
  border-radius: calc(var(--default-length) * 8);
  border: 2px solid var(--theme-color);
  transition: background 0.5s, width 0.5s;
  transition-delay: 0.5s, 0s;
}
.container li:hover::before {
  background: var(--theme-color);
  transition-delay: 0s, 0.5s;
  width: 100%;
}

.container li::after {
  content: "";
  position: absolute;
  background: transparent;
  top: calc(var(--default-length) * 2.75);
  left: calc(var(--default-length) * 2.5);
  width: calc(var(--default-length) * 2);
  height: calc(var(--default-length) * 2);
  border-top: 2px solid var(--text-color);
  border-right: 2px solid var(--text-color);
  transform: rotate(45deg);
  transition: 0.5s;
  transition-delay: 0;
}

.container li:hover::after {
  left: calc(var(--default-length) * 4);
  transition-delay: 0.5s;
  transform: rotate(45deg) scale(1.2);
}

效果如下：

到了这一步，就已经没什么问题了，感兴趣的读者可以看看这个效果的在线 demo：创意列表悬停效果