Dev tools · September 30, 2024
Pure CSS silky Border line animation(open-source code)
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,…
What it does
In the maker’s words, at launch
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
Does the same job
all alternatives →- CACSS3 animation2012 · thegoodman.cc · ▲271
- IEImage Effects with CSS2016 · bennettfeely.com · ▲203
More dev tools this month
the category →
Open-source GTM skills for technical founders
Dev tools · 29d ago · gtmcofounder.com
OpenTrailPaper is open-source bike computer firmware for the LilyGO T5S3 4.7" E-Paper PRO. It supports offline maps, GPX routes, FIT recording and Bluetooth sensors.
Dev tools · 1d ago · opentrailpaper.com
Launched alongside, September 2024
the whole month →
BeforeSunset AI 2.0▲1,267Personalized AI daily planning that suits your life
AI · 2024 · beforesunset.ai
