css - Diagonal animation on hover

Question

Ask a Question

Welcome To Ask or Share your Answers For Others

css - Diagonal animation on hover

asked Jan 31, 2022 in Technique[技术] by 深蓝 (71.8m points)

I am trying to replicate this diagonal arrow animation from this website: https://robertsspaceindustries.com/

https://imgur.com/a/6V9T2T7

Here is a small boilerplate: https://jsfiddle.net/randal923/x0ywchq5/8/

I am not sure what is the best way to position the arrow and how to animate it. Thanks in advance.

<!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%;
      }
    }
  }
}

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

280 views

1 Answer

深蓝 · Answer 1 · 2022-01-31T07:23:28+0000

Here is an idea using multipe background to create the arrow then you animate the origin of the position to create the needed effect:

.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>

Categories

css - Diagonal animation on hover

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags