悬停时的对角线动画答案

【问题标题】：Diagonal animation on hover悬停时的对角线动画
【发布时间】：2019-04-12 16:36:33
【问题描述】：

我正在尝试从这个网站复制这个对角箭头动画：https://robertsspaceindustries.com/

这是一个小样板：https://jsfiddle.net/randal923/x0ywchq5/8/

我不确定放置箭头的最佳方法是什么以及如何为其设置动画。提前致谢。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
      integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      type="text/css"
      media="screen"
      href="./css/style.css"
    />
  </head>
  <body>
    <div class="grid">
      <div class="grid__project">
        <img
          src="https://tympanus.net/Development/HoverEffectIdeas/img/17.jpg"
          alt="img17"
          class="grid__project-image"
        />
        <div class="grid__project-icons">
          <i class="fas fa-chevron-up grid__project-icons--1"></i>
          <i class="fas fa-chevron-up grid__project-icons--2"></i>
        </div>
        <div class="grid__project-icons">
          <i class="fas fa-chevron-up grid__project-icons--3"></i>
          <i class="fas fa-chevron-up grid__project-icons--4"></i>
        </div>
      </div>
    </div>
  </body>
</html>


  .grid {
  display: flex;
  flex-wrap: wrap;

  &__project {
    position: relative;
    margin: 1rem;

    &-image {
      height: 20rem;
      border-radius: 0.3rem;
      box-shadow: 0 5px 2rem rgba(0, 0, 0, 0.3);
    }

    &-icons {
      display: flex;
      position: absolute;
      height: 100%;
      width: 100%;
      top: 0;
      font-size: 1.5rem;

      &--1 {
      }

      &--2 {
        margin-left: 90%;
      }
      &--3 {
        margin-top: 70%;
      }
      &--4 {
        margin-left: 90%;
        margin-top: 70%;
      }
    }
  }
}

【问题讨论】：

标签： css

【解决方案1】：

这是一个使用多重背景创建箭头的想法，然后您为位置的原点设置动画以创建所需的效果：

.box {
  width:200px;
  height:200px;
  padding:20px;
  box-sizing:border-box;
  background:
      linear-gradient(#000,#000) top left,
      linear-gradient(#000,#000) top left,
      linear-gradient(#000,#000) bottom left,
      linear-gradient(#000,#000) bottom left,
      linear-gradient(#000,#000) bottom right,
      linear-gradient(#000,#000) bottom right,
      linear-gradient(#000,#000) top right,
      linear-gradient(#000,#000) top right,
  red;
  background-size:20px 2px,2px 20px;
  background-origin:content-box;
  background-repeat:no-repeat;
  transition:0.3s all;
}
.box:hover {
  padding:5px;
}

<div class="box">

</div>

以图片为背景：

.box {
  width:200px;
  height:200px;
  position:relative;
  background: url(https://picsum.photos/800/600?image=1069) center/cover;
}

.box:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  padding:20px;
  background:
      linear-gradient(#000,#000) top left,
      linear-gradient(#000,#000) top left,
      linear-gradient(#000,#000) bottom left,
      linear-gradient(#000,#000) bottom left,
      linear-gradient(#000,#000) bottom right,
      linear-gradient(#000,#000) bottom right,
      linear-gradient(#000,#000) top right,
      linear-gradient(#000,#000) top right;
  background-size:20px 2px,2px 20px;
  background-origin:content-box;
  background-repeat:no-repeat;
  transition:0.3s all;
}
.box:hover:before {
  padding:5px;
}

<div class="box">

</div>

【讨论】：

【解决方案2】：

试试这个我认为对你有用的代码。

* {
  margin:0;
  padding:0;
}

body {
  background:#ccc;
  font-family: arial,verdana,tahoma;
}

.animation {
  width: 705px;
  height: 333px;
  overflow:hidden;
  
  margin: 100px auto;
  -webkit-box-shadow: 0 8px 6px -6px black;
  -moz-box-shadow: 0 8px 6px -6px black;
  box-shadow: 0px 8px 6px -6px black;
}
/* .animation ul {
  
} */
.animation li {
  position: relative;
  display:block;
  width:140px;
  float: left;
  
  border-left: 1px solid #888;
  -webkit-box-shadow: 0 0 25px 10px rgba(0,0,0,0.5);
  -moz-box-shadow: 0 0 25px 10px rgba(0,0,0,0.5);
  
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}


.animation ul:hover li {
  width: 50px;
}

.animation ul li:hover {
  width:500px;
}

.animation li img {
  display: block;
}

.image_title {
  background: rgba(0,0,0,0.5);
  position:absolute;
  left:0;
  bottom:0;
  width:500px;
}

.image_title a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding:20px;
  font-size:16px;
}

<div class="animation">
  <ul>
    <li>
      <div class="image_title">
        <a href="#">Wedding 1</a>
      </div>
      <a href="#">
     <img src="http://farm4.staticflickr.com/3667/9759830873_7474bd9fc2.jpg">
			</a>
    </li>
       <li>
      <div class="image_title">
        <a href="#">Wedding 2</a>
      </div>
      <a href="#">
     <img src="http://farm8.staticflickr.com/7435/10067483716_2b6a593ca8.jpg">
			</a>
    </li>
          <li>
      <div class="image_title">
        <a href="#">Wedding 3</a>
      </div>
      <a href="#">
     <img src="http://farm8.staticflickr.com/7310/10065811936_8debcccb71.jpg">
			</a>
    </li>
             <li>
      <div class="image_title">
        <a href="#">Wedding 4</a>
      </div>
      <a href="#">
     <img src="http://farm4.staticflickr.com/3715/10065692306_705364fa01.jpg">
			</a>
    </li>
                <li>
      <div class="image_title">
        <a href="#">Wedding 5</a>
      </div>
      <a href="#">
     <img src="http://farm4.staticflickr.com/3667/9759830873_7474bd9fc2.jpg">
			</a>
    </li>
  </ul>
</div>

【讨论】：