js+css实现万圣节Trick AND Treat恶搞代码
代码语言:html
所属分类:搞笑
代码描述:js+css实现万圣节Trick AND Treat恶搞代码
代码标签: js css 万圣节 Trick AND Treat 恶搞 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700"); * { border-box: box-sizing; } body { height: 100vh; margin: 0; background-color: antiquewhite; overflow: hidden; } h1 { position: absolute; width: 100%; top: 1rem; text-align: center; } .container { position: relative; height: 100vh; } button { font-size: 1.2em; padding: 10px 20px; cursor: pointer; border: none; position: absolute; top: 50%; --button-spacing: 4rem; transition: all 0.1s ease-out; } button#trick-button { color: black; background-color: orange; left: calc(50% - var(--button-spacing)); z-index: 3; } button#treat-button { color: orange; background-color: black; left: calc(50% + var(--button-spacing)); z-index: 2; } #toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 5; .toast { width: min(70vw, 300px); background-color: var(--pico-secondary-background); padding: 1rem; margin-bottom: 0.25rem; border-radius: 0.25rem; display: flex; justify-content: flex-start; align-items: center; gap: 1rem; font-family: Montserrat, sans-serif; font-size: 1.25rem; opacity: 0; transition: opacity 0.5s ease; &.visible { opacity: 1; } &.success { color: #fff; background-color: #408140; } &.error { color: #fff; background-color: #eb6123; } } } #overlay { --opacity: 0; position: absolute; left: 0; top: 0; width: 250px; height: 250px; border-radius: 50%; border-width: 10000px; border-style: solid; border-color: rgb(0 0 0 / var(--opacity)); background-color: transparent; transform: translate3d(-50%, -50%, 0); z-index: 4; pointer-events: none; filter: blur(12px); } </style> </head> <body translate="no"> <h1>Wouldn't you like a nice treat?</h1> <div class="container"> <button id="trick-button">Trick</button> </div> <div class="button-container"> <button id="treat-button">Treat</button> </div> <div id="toast-container"></div> <div id="overlay"></div> <script > console.clear(); const trickBtn = document.querySelector("#trick-button"); const treatBtn = document.querySelector("#treat-button"); class Toast { constructor(container) { this.container = document.querySelector(`#${container}`); this.toasts = []; this.trickMsgs = [ "Nope!", "Nice try.", "Maybe next time", "Close, but no cigar.", "Gotcha!", "That all you got?", "Boo!", "lmao", "RIP", "Tricked again!"]; this.msgs = ["Fine! You got me!", "You're fast!"]; this.successIcon = `<svg style="margin-right: 0.5rem;" width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM18.4158 9.70405C18.8055 9.31268 18.8041 8.67952 18.4127 8.28984L17.7041 7.58426C17.3127 7.19458 16.6796 7.19594 16.2899 7.58731L10.5183 13.3838L7.19723 10.1089C6.80398 9.72117 6.17083 9.7256 5.78305 10.1.........完整代码请登录后点击上方下载按钮下载查看
网友评论0