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