css - 为在 2 点处启动的边框设置动画

Question

我如何制作一个从两个不同点开始然后像这样连接在一起的边界动画:

http://tinypic.com/r/1zqpqjb/8

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