css实现鼠标悬浮微光动感光感走光动画按钮效果代码
代码语言:html
所属分类:动画
代码描述:css实现鼠标悬浮微光动感光感走光动画按钮效果代码
代码标签: css 鼠标 悬浮 微光 动感 光感 走光 动画 按钮
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> @import url("https://fonts.googleapis.com/css2?family=Heebo:wght@100..900&display=swap"); :root { --canvas: 220; --bg: hsl(var(--canvas), 15%, 22%); --fg: hsl(var(--canvas), 39%, 95%); --link: hsl(var(--canvas), 90%, 80%); --linkh: hsl(150, 95%, 70%); --wgt: 200; } body, html { font-family: heebo, sans-serif; color: var(--fg); background: var(--bg); font-weight: var(--wgt); padding: 0 0 50px; display: grid; place-items: center; height: 100%; } a { color: var(--link); text-decoration: none; font-weight: 450; transition: all 0.3s ease; } a:hover, a:focus, a:active { color: var(--linkh); } button { background: hsl(var(--canvas), 10%, 10%); color: inherit; border: none; border-radius: 0.5em; padding: 0.25em 0.5em; font-family: inherit; font-size: inherit; } @keyframes iconsLoad { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0px); } } :root { --glow-hue: 222deg; --shadow-hue: 180deg; --spring-easing: linear( 0, 0.002, 0.01 0.9%, 0.038 1.8%, 0.156, 0.312 5.8%, 0.789 11.1%, 1.015 14.2%, 1.096, 1.157, 1.199, 1.224 20.3%, 1.231, 1.231, 1.226, 1.214 24.6%, 1.176 26.9%, 1.057 32.6%, 1.007 35.5%, 0.984, 0.968, 0.956, 0.949 42%, 0.946 44.1%, 0.95 46.5%, 0.998 57.2%, 1.007, 1.011 63.3%, 1.012 68.3%, 0.998 84%, 1 ); --spring-duration: 1.33s; } @property --shimmer { syntax: "<angle>"; inherits: false; initial-value: 33deg; } @keyframes shimmer { 0% { --shimmer: 0deg; } 100% { --shimmer: 360deg; } } @keyframes shine { 0% { opacity: 0; } 15% { opacity: 1; } 55% { opacity: 1; } 100% { opacity: 0; } } @keyframes text { 0% { background-position: 100% center; } 100% { background-position: -100% center; } } button { color: var(--bg); font-weight: 600; /* background-image: linear-gradient(90deg, #fcecfe, #fbf6e7, #e6fcf5); */ background-image: linear-gradient( 315deg, #ffc4ec -10%, #efdbfd 50%, #ffedd6 110% ); padding: .8em 1.4em; position: relative; isolation: isolate; box-shadow: 0 2px 3px 1px hsl(var(--glow-hue) 50% 20% / 50%), inset 0 -10px 20px -10px hsla(var(--shadow-hue),10%,90%,95%); border-radius: 0.66em; scale: 1; transition: all var(--spring-duration) var(--spring-easing); } button:hover:not(:active), button.active { transition-duration: calc(var(--spring-duration)*0.5); scale: 1.2; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0