Question

如何设置在两个不同点启动的边框的动画，然后像这样连接在一起：

Answer 1

这可能与您正在寻找的非常相似，希望它有所帮助

<强> HTML

<div class="border__shadow">
  <span>2012</span>
</div>

<div class="border__shadow">
  <span>2013</span>
</div>

<div class="border__shadow">
  <span>2014</span>
</div>

<强> CSS

.border__shadow {
  background: #fff;
  cursor: pointer;
  position: relative;
  margin: 2%;
  line-height: 350px;
  text-align: center;
  width: 200px;
  height: 350px;
  overflow: hidden;
  transition: background 350ms 600ms ease-in-out;
}
.border__shadow:hover {
  background: #2c3e50;
  transition-delay: 0ms;
}
.border__shadow:hover > span {
  color: #fff;
  transition-delay: 0ms;
}
.border__shadow::after {
  box-shadow: 0 -348px 0 0.0619em #fff, 202px -348px 0 0 transparent, 400px -348px 0 0 #fff, 198px 0 0 0 #fff, 198px 350px 0 transparent, 198px 700px 0 #fff, -198px -700px 0 #fff, -198px -350px 0 0 transparent, -198px 0 0 0 #fff, -400px 348px 0 0 #fff, -400px 348px 0 0 transparent, 0 348px 0 0.0619em #fff;
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 198px;
  height: 348px;
  transition: box-shadow 950ms ease-in-out;
}
.border__shadow:hover::after {
  box-shadow: -400px -348px 0 0 #fff, -400px -348px 0 0 transparent, 0 -348px 0 0.0619em #fff, 198px -700px 0 #fff, 198px -350px 0 transparent, 198px 0 0 #fff, -198px 0 0 #fff, -198px 350px 0 transparent, -198px 700px 0 #fff, 0 348px 0 0.0619em #fff, 202px 348px 0 0 transparent, 400px 348px 0 0 #fff;
}
.border__shadow::before {
  border: 2px solid #2c3e50;
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 200px;
  height: 350px;
}
.border__shadow > span {
  color: #2c3e50;
  font-weight: 500;
  letter-spacing: 4px;
  transition: color 350ms 600ms ease-in-out;
}

*,
*:after,
*:before {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizelegibility;
}

body {
  background: #2c3e50;
  font-family: 'Roboto', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
}

Live Example

动画一个2点的边界

1 个答案: