Hi.
I have used the code in the introduction to add an arrow to my website. I would like to replace the arrow with the following image: https://static1.squarespace.com/static/61b3139e81c1617fe26fca37/t/61e954d5be75330fd18f561f/1642681557218/Prikker.png
I want two dots on the picture, and two dots on a white background.
The image should also be static without movement.
Can anyone help with this?
<div class="scroll-down"></div>
<style>
.scroll-down {
position: absolute;
left: 50%;
bottom: 15px;
display: block;
text-align: center;
font-size: 20px;
z-index: 100;
text-decoration: none;
text-shadow: 0;
width: 13px;
height: 13px;
border-bottom: 3px solid #eda005;
border-right: 3px solid #eda005;
z-index: 9;
left: 10%;
-webkit-transform: translate(-50%, 0%) rotate(45deg);
-moz-transform: translate(-50%, 0%) rotate(45deg);
transform: translate(-50%, 0%) rotate(45deg);
-webkit-animation: fade_move_down 4s ease-in-out infinite;
-moz-animation: fade_move_down 4s ease-in-out infinite;
animation: fade_move_down 4s ease-in-out infinite;
}
/*animated scroll arrow animation*/
@-webkit-keyframes fade_move_down {
0% { -webkit-transform:translate(0,-10px) rotate(45deg); opacity: 0; }
50% { opacity: 1; }
100% { -webkit-transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
@-moz-keyframes fade_move_down {
0% { -moz-transform:translate(0,-10px) rotate(45deg); opacity: 0; }
50% { opacity: 1; }
100% { -moz-transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
@keyframes fade_move_down {
0% { transform:translate(0,-10px) rotate(45deg); opacity: 0; }
50% { opacity: 1; }
100% { transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
</style>