Need help with creating border

I love the orange border around the circle image on this website. I think she may have used javascript to have it move with the mouse, but when I inspect the website I can’t see how she went about creating this. I want to create something similar for my portfolio website, can someone help me out?

I don’t know how to create the animation, but if you just want the same look, I think the border is an orange circle behind the circular image, then it’s offset down and right so only part of it is showing.

Thanks, figured it out. I did a version of her border without using javascript so it isn’t exactly the same. This worked:

.me {
  height: 400px; 
  object-fit: cover; 
  border-radius: 50%; 
  width: calc(400px * 1);
  margin-left: 600px; 
  margin-bottom: 150px;
  border: 12px solid transparent;
  box-shadow: 10px 10px 0px #ffb6c1;
  animation: moveBorder 2s alternate infinite;
}

@keyframes moveBorder {
  0% {
    box-shadow: 10px 10px 0px #ffb6c1;
  }
  100% {
    box-shadow: 15px 15px 0px #ffb6c1;
  }
}

It’s a Webflow site I’m guessing it’s part of a template. You can only see the transpiled code which isn’t very useful.


You can drive a transform: translate using the X and Y coordinates of the mouse using the mouse event.

Example:

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.