动态立体选择按钮效果
代码语言:html
所属分类:表单美化
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat&display=swap"rel="stylesheet'> <style> * { box-sizing: border-box; margin: 0; padding: 0; } body { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background: #1355f6; overflow: hidden; } #app { width: 300px; height: 300px; display: grid; place-items: center; } #app ul { position: relative; width: 300px; height: 70px; display: grid; grid-template-columns: repeat(2, 1fr); border-radius: 45px; background: rgba(255, 255, 255, 0.65); transform-origin: center center; transform: perspective(1000px); overflow: hidden; } #app ul li { list-style: none; display: grid; place-items: center; font-size: 1.25rem; font-family: "montserrat"; font-weight: 500; text-transform: capitalize; color: #1355f6; z-index: 10; cursor: pointer; } #app ul .focus-el { position: absolute; left: 0; top: 0; width: calc(100% / 2); height: 100%; border-radius: 45px; background: #fff; } .support { position: absolute; right: 10px; bottom: 10px; padding: 10px; display: flex; } .support a { margin: 0 10px; color: #fffdf9; font-size: 1.8rem; backface-visibility: hidden; transition: all 150ms ease; } .support a:hov.........完整代码请登录后点击上方下载按钮下载查看
网友评论0