css实现金条金砖墙点击带声效脱落效果代码
代码语言:html
所属分类:其他
代码描述:css实现金条金砖墙点击带声效脱落效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap" rel="stylesheet"> <style> body { display: grid; grid-template-columns: repeat(auto-fill, 10vw); overflow: hidden; height: 100vh; width: 100vw; background: #d78b0b; } body:before { content: "It's corn"; position: absolute; top: 0; right: 0; bottom: 0; left: 0; font-size: 15vw; font-family: "Montserrat", sans-serif; font-weight: 600; display: flex; align-items: center; justify-content: center; text-transform: uppercase; pointer-events: none; color: #e39a1e; z-index: 0; text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.05), 1px 1px 1px rgba(255, 255, 255, 0.05); } .kernel { width: 10vw; height: 100%; background: #f6c51b; border-radius: 0.5rem; z-index: 1; cursor: pointer; transition: all 200ms ease-in; box-shadow: inset 0.5vw 0.5vw 1vw #f8d947, inset -0.5vw -1vw 1vw #d68909, 0 1vw 1vw rgba(0, 0, 0, 0); } .kernel:hover { transform: scale(1.25); z-index: 2; box-shadow: inset 0.5vw 0.5vw 1vw #f8d947, inset -0.5vw -0.5vw 1vw #d68909, 0 1vw 1vw rgba(0, 0, 0, 0.25); } .kernel.animating { pointer-events: none; animation: drop-kernel 1000ms ease; animation-fill-mode: forwards; z-index: 2; } @keyframes drop-kernel { 100% { transform: translateY(100vh) rotate(180deg); } } </style> </head> <body> <div class="kernel"></div> <div class="kernel"></div> <div class="kernel"></div> <div class="kernel"></div> <div class="kernel"></div> <div class="kernel"></div> <div class="kernel"></div> <div class="kernel"></div> <div class="kernel"></div> <div class="kernel"></div> <div class="kernel"></div> <div class="kernel"></div> <div class="kernel"></div> <div class="kernel"></div> <div class="kernel"></div> <div class="kernel"></div> <div class="kernel"></div> <div class="kernel"></div> <div class="kernel"></div> <div class="kernel"></div> <div class="kernel"></div> <div class="kernel"></div> <div class="kernel"></div> <div class="kernel"></div> <div class="kernel"></div> <div class="kernel"></div> <div class="kernel"></div> <div class="kernel"></div> <div class="kernel"></div> <div class="kernel"></div> <div class="kernel"></div> <div class="kernel"></div> <div class="kernel"></div> <div class="kernel"></div> <div class="kernel"></div> <div class="kernel"></div> <div class="kernel&.........完整代码请登录后点击上方下载按钮下载查看
网友评论0