Hacker News new | past | comments | ask | show | jobs | submit login
Show HN: Pure CSS silky Border line animation(open-source code) (github.com/volume988)
5 points by volume988 8 months ago | hide | past | favorite | 1 comment
Use only CSS to achieve a silky border line animation effect. Key implementation ideas include:

1. Perspective effect: Create a border effect by setting up two nested elements with the parent element having 1 pixel padding.

2. animation: Create an absolutely positioned child element and use the animation property to move it uniformly along the border of the parent element.

3. Uniform animation: By calculating the path and distance of the element movement, adjust the percentage of key frames to ensure uniform animation.

4. Rounded corners: Add rounded corners to the parent and child elements, and adjust the position of the animation elements to fit the rounded corners.

5. Animation optimization: Adjust the animation trajectory at the rounded corners to ensure a natural and smooth transition.

6. Blur shadow: Achieve the shadow effect by setting the background radial gradient of the child element and using the backdrop-filter attribute to add a blur effect.

https://github.com/volume988/button-motion







Consider applying for YC's Fall 2025 batch! Applications are open till Aug 4

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: