css实现按钮边框走光动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现按钮边框走光动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } body { display: grid; place-items: center; min-height: 100vh; background: hsl(0 0% 15%); } button { --speed: 1.25s; container-type: size; width: 50vmin; aspect-ratio: 8 / 3; position: relative; padding: 0; border-radius: 999px; background: hsl(0 0% 10%); border: 0; overflow: hidden; box-shadow: 0 1px 0 0 hsl(0 0% 100% / 0.35) inset, 0 -1px 0 0 hsl(0 0% 0% / 0.85); } button:after { content: "Button"; position: absolute; inset: 2px; border-radius: 999px; background: hsl(0 0% 10%); display: grid; place-items: center; font-family: sans-serif; color: hsl(0 0% 90%); font-size: 4vmin; } .gradient { position: absolute; width: 100cqh; aspect-ratio: 1; /* background: red; */ position: absolute; left: 0; top: 50%; translate: 0 -50%; border-radius: 50%; -webkit-animation: slide var(--speed) ease-in-out infinite alternate; animation: slide var(--speed) ease-in-out infinite alternate; /* animation-timin.........完整代码请登录后点击上方下载按钮下载查看
网友评论0