css实现鼠标点击按钮分割弹出图层效果代码
代码语言:html
所属分类:其他
代码描述:css实现鼠标点击按钮分割弹出图层效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Comfortaa&display=swap:400,100,500,300italic,500italic,700italic,900,300"); :root { --curve: cubic-bezier(.5,-0.53,.14,1.23); --button-width: calc(240 / 16 * 1em); --button-height: calc(40 / 16 * 1em); --button-background: hsl(209, 24%, 55%); --button-background-after: hsl(209, 24%, 52%); --button-foreground: hsl(0, 0%, 100%); --left: 10%; --right: 10%; --shadow: rgb(240 240 240); --shadow-distance: calc(10 / 16 * 1em); } body { position: relative; display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; margin: 0; padding: 0; font-family: "Comfortaa"; } body:before { content: ""; position: absolute; width: 0%; height: 100vh; background: linear-gradient(to right, var(--button-background-after) 50%, var(--button-background) 50%); transition: all 0.5s var(--curve); box-shadow: var(--shadow-distance) var(--shadow-distance) 0 var(--shadow); } body:has(button:focus):before { width: calc(100% - var(--left) - var(--right) - var(--button-width)); } button { position: relative; width: 100%; height: var(--button-height); border: none; background: transparent; font-family: "Comfortaa"; font-size: calc(16 / 16 * 1em);.........完整代码请登录后点击上方下载按钮下载查看
网友评论0