div+css实现三维长方体堆叠开关点击效果代码
代码语言:html
所属分类:其他
代码描述:div+css实现三维长方体堆叠开关点击效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css"> <style> @import url("https://fonts.googleapis.com/css2?family=Silkscreen&display=swap"); html, body { max-height: 100%; height: 100%; overflow: hidden; } .background { max-height: 100%; height: 100%; background: #ffffff; display: flex; font-family: "Silkscreen", cursive; } .toggles { width: 300px; margin: auto; position: relative; display: flex; flex-direction: column-reverse; transform: skewY(15deg); } .toggles :not(button).block:first-of-type:after { z-index: -1; box-shadow: 10rem 11rem 50px rgba(120, 90, 145, 0.5); } .toggles :not(button).block:last-of-type:after { z-index: -1; box-shadow: 15rem 16rem 120px rgba(120, 90, 145, 0.3); } .toggles button.block { cursor: pointer; font: inherit; z-index: 0; font-size: 0.7rem; } .toggles button.block:first-of-type:after { z-index: -1; box-shadow: 7rem 8rem 50px rgba(120, 90, 145, 0.5); } .toggles button.block:last-of-type:after { z-index: -1; box-shadow: 15rem 16rem 120px rgba(120, 90, 145, 0.3); } .toggles button.block > div { position: absolute; height: calc(3rem - 2%); width: 100%; z-index: 1; top: -99%; transform: skewX(-45deg); display: flex; transform-origin: bottom; } .toggles button.block > div > div { flex: 1; height: 100%; display: flex; justify-content: center; align-items: center; font-size: 1rem; } .toggles button.block > div > div:first-child { background: #c84150; justify-content: start; padding-left: 10px; color: #f0695f; } .toggles button.block > div > div:last-child { background: #237d5f; justify-content: end; padding-right: 20px; color: #46c3a5; } .toggles .block { background: #f59baf; flex: 1; min-height: 3rem; border: none; color: #000000; font-size: 1.2rem; letter-spacing: 0; display: flex; position: relative; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0