div+css实现按钮悬浮立体阴影动画效果代码
代码语言:html
所属分类:悬停
代码描述:div+css实现按钮悬浮立体阴影动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Arvo&family=Noto+Sans&display=swap'); :root { font-size: 1.5rem; } *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { margin: 0; height: 100vh; width: 100%; color: black; background: #0c0c0b; overflow: hidden; display: grid; place-content: center; } .button { color: white; height: 2.5rem; width: 7rem; border-radius: 0.5rem; display: grid; place-content: center; position: relative; } .button:after { position: absolute; content: ""; inset: 0.125rem; background: black; border-radius: 0.375rem; z-index: 1; transition: border-radius 300ms; } .button:has(.hoverzone:hover):after { border-radius: 0; } .button:before { position: absolute; content: ""; inset: 0; border-radius: 0.5rem; background: linear-gradient(135deg, #3cfd7f, #02fa99, #00f6af, #00f1c1); filter: blur(0.5rem); opacity: 0.5; transition: opacity 300ms, filter 300ms; } .button:has(.hoverzone:hover):before { filter: none; } .hoverzone { position: absolute; inset: 0; cursor: pointer; z-index: 10; } .sharpshadow { --anim: 0; --shadowlength: 0.75rem; background: linear-gradient(135deg, #3cfd7f, #02fa99, #00f6af, #00f1c1); position: absolute; border-radius: 0.5rem; inset: 0 calc(0px - var(--shadowlength) * var(--anim).........完整代码请登录后点击上方下载按钮下载查看
网友评论0