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 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
