js+css实现万圣节释放小鬼确认按钮动画效果代码
代码语言:html
所属分类:动画
代码描述:js+css实现万圣节释放小鬼确认按钮动画效果代码,点击确认或取消可以看到小鬼的不同表情
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @font-face { font-family: "Stranger"; src: url("//repo.bfw.wiki/bfwrepo/font/Molot.woff") format("woff"); } body, html { height: 100%; display: grid; font-size: 24px; --x: 0; --y: 0; --total: 0; } body { background: url(https://assets.codepen.io/t-1/shapelined-Z1xxfm52Htc-unsplash.jpg) no-repeat center center fixed; height: 100vh; overflow: hidden; } body:after { content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: inherit; z-index: 3; filter: saturate(0); mix-blend-mode: darken; } body:before { content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; pointer-events: none; filter: contrast(270%) brightness(2000%) saturate(0); z-index: 2; background-image: radial-gradient(circle at calc(50% - (var(--x) * -25px)) calc(50% - (var(--y) * -25px)), transparent calc(50px - (var(--total) * -50px)), #000 700px), url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='4.24' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); background-size: 100% 100%, 200px; } body.loaded #container:before { opacity: 0; pointer-events: none; } #container { margin: auto; font-family: "Stranger"; display: flex; justify-content: center; flex-wrap: wrap; width: 500px; position: relative; z-index: 4; } #container:before { content: ""; position: absolute; width: 200vw; height: 200vh; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #000; z-index: 9; transition: opacity 1s ease-in-out; } #container .buttons { margin-top: 1rem; width: inherit; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; position: relative; z-index: 9; perspective: 100px; } #container .buttons button { z-index: 3; cursor: pointer; width: 45%; margin: 0 2.5%; font-family: "Stranger"; font-size: 1.25rem; text-transform: uppercase; background: transparent; border: 0px solid; padding: 0.5rem; position: relative; background: red; height: 60px; display: flex; justify-content: center; align-items: center; color: #fff; letter-spacing: 2px; transition: opacity 0.25s ease-in-out; background: #fff; box-shadow: inset 0 0 20px 20px #fff; -webkit-text-stroke: 1.5px #000; } #container .buttons button > span.word { transform: translateY(100px); } #container .buttons button:hover:not(.active) { overflow: visible; } #container .buttons button.active { overflow: visible; } #container .buttons button.active > span.word { transform: translateY(100px); transition-delay: 1s; } #container .buttons button.active > span.word > span { opacity: 0; } #container .buttons button.active:not(:hover) { overflow: visible; transition-delay: 0s; } #container .buttons button.active:not(:hover) > span.word { transform: translateY(100px); transition-delay: 1s; } #container .buttons button.active:not(:hover) > span.word > span { opacity: 0; } #container .buttons button:not(.active), #container .buttons button:not(:hover) { opacity: 0; animation: fadein 1s ease-in-out 1 forwards 0.75s; overflow: hidden; pointer-events: none; } #container .buttons button:not(.active) > span.word, #container .buttons button:not(:hover) > span.word { transform: translateY(0px); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.075); transition-delay: 1.25s; } #container .buttons button:not(.active) > span.word > span, #container .buttons button:not(:hover) > span.word > span { opacity: 1; } @keyframes fadein { 100% { opacity: 1; pointer-events: all; } } #container .buttons button:nth-of-type(2) { color: red; -webkit-text-stroke: 0px #fff; } #container .buttons button:nth-of-type(2) span.overlay:after { background: radial-gradient(ellipse at center, #000 5px, transparent 5px) -50px 50%/15px 20px no-repeat, radial-gradient(ellipse at center, #000 5px, transparent 5px) 120px 50%/15px 20px no-repeat, radial-gradient(circle at bottom, #000 15px, transparent 15px) 12.5px 170px/100% 100% no-repeat; } #container .buttons button:nth-of-type(2) span.word:before { -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: contrast(170%) brightness(1000%); z-index: 2; background-image: linear-gradient(calc(var(--x) * -4deg), #000, rgba(0, 0, 0, 0)), url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='4.24' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); background-size: 100% 100%, 200px; mix-blend-mode: darken; } #container .buttons button span.word { position: relative; } #container .buttons button span.word:before { content: attr(data-word); position: absolute; color: #fff; z-index: 3; transition: opacity 0.25s ease-in-out; transition-delay: 0.5s; } #container .buttons button span.word > span { display: inline-block; } #container .buttons button span.overlay { position: absolute; width: 100%; height: calc(100% + 2px); top: -1px; left: 0; z-index: 9; filter: contrast(170%) brightness(1000%) saturate(0); background-image: linear-gradient(to bottom, #000, rgba(0, 0, 0, 0)), url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='4.24' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); background-size: 100% 100%, 300px; mix-blend-mode: darken; transition: 0.5s ease-in-out, box-shadow 0s ease-in-out; } #container .buttons button span.overlay:after { content: ""; position: absolute; top: -150px; width: 100px; height: 100px; opacity: 0; filter: blur(1px); left: 0; background: radial-gradient(ellipse at bottom, #000 5px, transparent 5px) -50px 50%/15px 25px no-repeat, radial-gradient(ellipse at bottom, #000 5px, transparent 5px) 120px 50%/15px 25px no-repeat, radial-gradient(circle at top, #000 15px, transparent 15px) -7.5px 170px/100% 100% no-repeat; box-shadow: 0px 55px 0 -35px #fff, 0px 55px 0 -35px #fff; transition: 0.5s ease-in-out; border-radius: 100%; } #container .buttons button span.overlay:before { content: ""; position: absolute; height: 300%; bottom: 0; left: 0; width: 100%; background: #fff; transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); opacity: 0; -webkit-mask: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), #000 50%); -webkit-mask-size: 100% 200%; -webkit-mask-position: 50% 100%; border-radius: 0 0 0 0; transform-origin: bottom; transform: scaleY(0.335); } #container .buttons button span.word { position: relative; z-index: 10; } #container .buttons button:before { content: ""; pointer-events: none; position: absolute; width: 100%; left: 0px; top: -10px; height: calc(100% + 20px); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cdefs%3E%3Cstyle%3E .wave%7B stroke:%23FFF; stroke-width:8; stroke-linecap:square; %7D %3C/style%3E%3C/defs%3E%3Cpattern id='wavePattern' x='0' y='0' width='80' height='60' patternUnits='userSpaceOnUse'%3E%3Cpath fill='none' class='wave' d='M 0 40 Q 20 45 40 40 Q 60 35 80 40' /%3E%3C/pattern%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='url(%23wavePattern)'%3E%3C/rect%3E%3C/svg%3E") 0px 30px/80px 80px repeat-x, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cdefs%3E%3Cstyle%3E .wave%7B stroke:%23FFF; stroke-width:8; stroke-linecap:square; %7D %3C/style%3E%3C/defs%3E%3Cpattern id='wavePattern' x='0' y='0' width='80' height='60' patternUnits='userSpaceOnUse'%3E%3Cpath fill='none' class='wave' d='M 0 40 Q 20 45 40 40 Q 60 35 80 40' /%3E%3C/pattern%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='url(%23wavePattern)'%3E%3C/rect%3E%3C/svg%3E") 0px calc(100% + -30px)/80px 80px repeat-x; z-index: 9; transition: opacity 0.25s; opacity: 0; } #container .buttons button:after { content: ""; pointer-events: none; position: absolute; width: 100%; left: 0; height: 50px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cdefs%3E%3Cstyle%3E .wave%7B stroke:%23000; stroke-width:6; stroke-linecap:square; %7D %3C/style%3E%3C/defs%3E%3Cpattern id='wavePattern' x='0' y='0' width='80' height='60' patternUnits='userSpaceOnUse'%3E%3Cpath fill='none' class='wave' d='M 0 40 Q 20 45 40 40 Q 60 35 80 40' /%3E%3C/pattern%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='url(%23wavePattern)'%3E%3C/rect%3E%3C/svg%3E") 0px 0px/80px 80px repeat-x; z-index: -2; top: 30px; opacity: 0; transition: opacity 0.25s; filter: blur(5px); } #container .buttons button:hover, #container .buttons button.active { text-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); color: rgba(255, 255, 255, 0.75); -webkit-text-stroke: 1.5px transparent; backgroun.........完整代码请登录后点击上方下载按钮下载查看
网友评论0