8种提交按钮悬浮动画效果
代码语言:html
所属分类:悬停
代码描述:8种提交按钮悬浮动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@1,300&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Sail&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Modak&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Russo+One&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Rye&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=MedievalSharp&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Iceberg&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> *, *::before, *::after { box-sizing: border-box; } body { width: 100vw; height: 100%; font-size: 20px; } header { position: absolute; top: 0; left: 50%; width: 90%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); font-family: 'Merriweather', serif; text-align: center; } header p { font-size: .8em; } .layout { position: absolute; top: 5em; left: 50%; -webkit-transform: translate(-55%, 0); transform: translate(-55%, 0); width: 16em; margin: 3em auto; } .btn1 { position: absolute; top: 0%; left: 0%; width: 7em; height: 2em; background: #0eff00; background: linear-gradient(331deg, #0eff00 0%, #00ecff 90%); border-radius: .25em; border: none; box-shadow: .1em .1em .15em grey; font-family: 'Sail', cursive; font-size: 1.2em; color: white; outline: none; } .btn1 .btn1-first { position: absolute; top: 0; left: 0; width: 100%; height: 50%; background: #0eff00; background: linear-gradient(331deg, #0eff00 0%, #00ecff 90%); background-attachment: fixed; background-size: 1em; border-radius: .15em .15em 0 0; overflow: hidden; } .btn1 .btn1-first p { position: absolute; top: -.6em; left: 1.9444444444em; color: white; } .btn1 .btn1-second { position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background: #0eff00; background: linear-gradient(331deg, #0eff00 0%, #00ecff 90%); background-attachment: fixed; background-size: 1em; border-radius: 0 0 .15em .15em; overflow: hidden; } .btn1 .btn1-second p { position: absolute; top: -1.6em; left: 1.9444444444em; color: white; } .btn1:focus div { -webkit-animation: shrink 1s linear forwards; animation: shrink 1s linear forwards; } @-webkit-keyframes shrink { 0% { height: .9em; } 100% { height: 0em; } } @keyframes shrink { 0% { height: .9em; } 100% { height: 0em; } } .btn2 { position: absolute; top: 0%; left: 9em; width: 7em; height: 2em; padding-top: .2em; background: #949494; background: linear-gradient(135deg, #949494 0%, white 100%); border-radius: .25em; border: none; box-shadow: .1em .1em .15em grey; font-family: 'Modak', cursive; font-size: 1.2em; color: white; outline: none; } .btn2 .btn2-first { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #949494; background: linear-gradient(135deg, #949494 0%, white 100%); border-radius: .25em; opacity: 0; } .btn2 .btn2-first p { position: absolute; top: -.55em; width: 100%; height: 100%; font-family: 'Modak', cursive; text-align: center; } .btn2:focus { -webkit-animation: spring 1.5s linear; animation: spring 1.5s linear; } .btn2:focus .btn2-first { -webkit-animation: opacity .75s linear forwards; animation: opacity .75s linear forwards; } @-webkit-keyframes spring { 0% { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 25% { -webkit-transform: scale(0) rotate(180deg); transform: scale(0) rotate(180deg); } 50% { -webkit-transform: scale(1) rotate(360deg); transform: scale(1) rotate(360deg); } 60% { -webkit-transform: scale(1.2) rotate(380deg); transform: scale(1.2) rotate(380deg); } 70% { -webkit-transform: scale(0.8) rotate(340deg); transform: scale(0.8) rotate(340deg); } 80% { -webkit-transform: scale(1.1) rotate(370deg); transform: scale(1.1) rotate(370deg); } 90% { -webkit-transform: scale(0.9) rotate(350deg); transform: scale(0.9) rotate(350deg); } 100% { -webkit-transform: scale(1) rotate(360deg); transform: scale(1) rotate(360deg); } } @keyframes spring { 0% { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } 25% { -webkit-transform: scale(0) rotate(180deg); transform: scale(0) rotate(180deg); } 50% { -webkit-transform: scale(1) rotate(360deg); transform: scale(1) rotate(360deg); } 60% { -webkit-transform: scale(1.2) rotate(380deg); transform: scale(1.2) rotate(380deg); } 70% { -webkit-transform: scale(0.8) rotate(340deg); transform: scale(0.8) rotate(340deg); } 80% { -webkit-transform: scale(1.1) rotate(370deg); transform: scale(1.1) rotate(370deg); } 90% { -webkit-transform: scale(0.9) rotate(350deg); transform: scale(0.9) rotate(350deg); } 100% { -webkit-transform: scale(1) rotate(360deg); transform: scale(1) rotate(360deg); } } @-webkit-keyframes opacity { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes opacity { 0% { opacity: 0; } 100% { opacity: 1; } } .btn3 { position: absolute; top: 4em; left: 0; width: 7em; height: 2em; background: black; font-family: 'Russo One', sans-serif; border-radius: .25em; border: none; box-shadow: .1em .1em .15em grey; font-size: 1.2em; color: white; outline: none; } .btn3 .btn3-first { position: absolute; top: 0; left: 0; width: 50%; height: 100%; background: white; color: black; border-radius: .25em 0 0 .25em; -webkit-transform-origin: 0% 100%; transform-origin: 0% 100%; } .btn3 .btn3-first p { position: absolute; top: -.55em; right: .15em; width: 50%; height: 100%; text-align: center; } .btn3 .btn3-second { position: absolute; top: 0; right: 0; width: 50%; height: 100%; background: white; color: black; border-radius: 0 .25em .25em 0; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; } .btn3 .btn3-second p { position: absolute; top: -.55em; left: 0; width: 50%; height: 100%; text-align: center; } .btn3:focus .btn3-first { -webkit-animation: fall1 2s ease-out forwards; animation: fall1 2s ease-out forwards; } .btn3:focus .btn3-second { -webkit-animation: fall2 2s linear forwards; animation: fall2 2s linear forwards; } @-webkit-keyframes fall1 { 0% { -webkit-transform: rotate(0deg) translateY(0); transform: rotate(0deg) translateY(0); opacity: 1; } 30% { -webkit-transform: rotate(120deg) translateY(0); transform: rotate(120deg) translateY(0); opacity: 1; } 40% { -webkit-transform: rotate(70deg) translateY(0); transform: rotate(70deg) translateY(0); opacity: 1; } 50% { -webkit-transform: rotate(110deg) translateY(0); transform: rotate(110deg) translateY(0); opacity: 1; } 60% { -webkit-transform: rotate(80deg) translateY(0); transform: rotate(80deg) translateY(0); opacity: 1; } 70% { -webkit-transform: rotate(100deg) translateY(0); transform: rotate(100deg) translateY(0); opacity: 1; } 80% { -webkit-transform: rotate(85deg) translateY(0); transform: rotate(85deg) translateY(0); opacity: 1; } 90% { -webkit-transform: rotate(90deg) translateY(0); transform: rotate(90deg) translateY(0); opacity: 1; } 100% { -webkit-transform: rotate(90deg) translateX(100px); transform: rotate(90deg) translateX(100px); opacity: 0; } } @keyframes fall1 { 0% { -webkit-transform: rotate(0deg) translateY(0); transform: rotate(0deg) translateY(0); opacity: 1; } 30% { -webkit-transform: rotate(120deg) translateY(0); transform: rotate(120deg) translateY(0); opacity: 1; } 40% { -webkit-transform: rotate(70deg) translateY(0); transform: rotate(70deg) translateY(0); opacity: 1; } 50% { -webkit-transform: rotate(110deg) translateY(0); transform: rotate(110deg) translateY(0); opacity: 1; } 60% { -webkit-transform: rotate(80deg) translateY(0); transform: rotate(80deg) translateY(0); opacity: 1; } 70% { -webkit-transform: rotate(100deg) translateY(0); transform: rotate(100deg) translateY(0); opacity: 1; } 80% { -webkit-transform: rotate(85deg) translateY(0); transform: rotate(85deg) translateY(0); opacity: 1; } 90% { -webkit-transform: rotate(90deg) translateY(0); transform: rotate(90deg) translateY(0); opacity: 1; } 100% { -webkit-transform: rotate(90deg) translateX(100px); transform: rotate(90deg) translateX(100px); opacity: 0; } } @-webkit-keyframes fall2 { 0% { -webkit-transform: rotate(0deg) translateY(0); transform: rotate(0deg) translateY(0); opacity: 1; } 30% { -webkit-transform: rotate(-120deg) translateY(0); transform: rotate(-120deg) translateY(0); opacity: 1; } 40% { -webkit-transform: rotate(-70deg) translateY(0); transform: rotate(-70deg) translateY(0); opacity: 1; } 50% { -webkit-transform: rotate(-110deg) translateY(0); transform: rotate(-110deg) translateY(0); opacity: 1; } 60% { -webkit-transform: rotate(-80deg) translateY(0); transform: rotate(-80deg) translateY(0); opacity: 1; } 70% { -webkit-transform: rotate(-100deg) translateY(0); transform: rotate(-100deg) translateY(0); opacity: 1; } 80% { -webkit-transform: rotate(-85deg) translateY(0); transform: rotate(-85deg) translateY(0); opacity: 1; } 90% { -webkit-transform: rotate(-90deg) translateY(0); transform: rotate(-90deg) translateY(0); opacity: 1; } 100% { -webkit-transform: rotate(-90deg) translateX(-100px); transform: rotate(-90deg) translateX(-100px); opacity: 0; } } @keyframes fall2 { 0% { -webkit-transform: rotate(0deg) translateY(0); transform: rotate(0deg) translateY(0); opacity: 1; } 30% { -webkit-transform: rotate(-120deg) translateY(0); transform: rotate(-120deg) translateY(0); opacity: 1; } 40% { -webkit-transform: rotate(-70deg) translateY(0); transform: rotate(-70deg) translateY(0); opacity: 1; } 50% { -webkit-transform: rotate(-110deg) translateY(0); transform: rotate(-110deg) translateY(0); opacity: 1; } 60% { -webkit-transform: rotate(-80deg) translateY(0); transform: rotate(-80deg) translateY(0); opacity: 1; } 70% { -webkit-transform: rotate(-100deg) translateY(0); transform: rotate(-100deg) translateY(0); opacity: 1; } 80% { -webkit-transform: rotate(-85deg) translateY(0); transform: rotate(-85deg) translateY(0); opacity: 1; } 90% { -webkit-transform: rotate(-90deg) translateY(0); transform: rotate(-90deg) translateY(0); opacity: 1; } 100% { -webkit-transform: rotate(-90deg) translateX(-100px); transform: rotate(-90deg) translateX(-100px); opacity: 0; } } .btn4 { position: absolute; top: 4em; left: 9em; width: 7em; height: 2em; background: #edc7b7; border-radius: .25em; border: none; box-shadow: .1em .1em .15em grey; font-size: 1.2em; color: white; outline: none; overflow: hidden; } .btn4 .reel { position: absolute; top: 0; width: 1.1666em; height: 100%; font-family: 'Rye', cursive; color: #a83131; -webkit-text-stroke: .5px black; background: black; background: -webkit-gradient(linear, left bottom, left top, from(black), color-stop(15%, white), color-stop(50%, white), color-stop(85%, white), to(black)); background: linear-gradient(0deg, black 0%, white 15%, white 50%, white 85%, black 100%); } .btn4 .reel p { position: absolute; top: -2.8em; width: 100%; height: 100%; text-align: center; } .btn4 .reel1 { left: 0; border-radius: .25em 0 0 .25em; border-right: solid 1px black; } .btn4 .reel2 { left: 1.1666em; border-right: solid 1px black; border-left: solid 1px black; } .btn4 .reel3 { left: 2.3333em; border-right: solid 1px black; border-left: solid 1px black; } .btn4 .reel4 { left: 3.4999em; border-right: solid 1px black; border-left: solid 1px black; } .btn4 .reel5 { left: 4.6666em; border-right: solid 1px black; border-left: solid 1px black; } .btn4 .reel6 { left: 5.8332em; border-radius: 0 .25em .25em 0; border-left: solid 1px black; } .btn4:focus .reel1 > p { -webkit-animation: spin 1s ease-out forwards; animation: spin 1s ease-out forwards; } .btn4:focus .reel2 > p { -webkit-animation: spin 1s ease-out .2s forwards; animation: spin 1s ease-out .2s forwards; } .btn4:focus .reel3 > p { -webkit-animation: spin 1s ease-out .4s forwards; animation: spin 1s ease-out .4s forwards; } .btn4:focus .reel4 > p { -webkit-animation: spin 1s ease-out .6s forwards; animation: spin 1s ease-out .6s forwards; } .btn4:focus .reel5 > p { -webkit-animation: spin 1s ease-out .8s forwards; animation: spin 1s ease-out .8s forwards; } .btn4:focus .reel6 > p { -webkit-animation: spin 1s ease-out 1s forwards; animation: spin 1s ease-out 1s forwards; } @-webkit-keyframes spin { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(2.2em); transform: translateY(2.2em); } } @keyframes spin { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(2.2em); transform: translateY(2.2em); } } .wrapper { -webkit-filter: drop-shadow(0.2em 0.2em 0.1em black); filter: drop-shadow(0.2em 0.2em 0.1em black); } .btn5 { position: absolute; top: 8em; left: 0; width: 7em; height: 2em; font-family: 'MedievalSharp', cursive; background: #d2d597; background: -webkit-gradient(linear, right top, left top, from(#d2d597), to(#ececc9)); background: linear-gradient(270deg, #d2d597 0%, #ececc9 100%); box-shadow: 0 0 1em rgba(133, 102, 0, 0.8) inset; border-radius: .25em; border: none; font-size: 1.2em; color: black; outline: none; -webkit-perspective: 500px; perspective: 500px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-clip-path: polygon(0 0, 0 9%, 4% 14%, 4% 23%, 3% 30%, 2% 40%, 4% 53%, 1% 63%, 3% 78%, 2% 86%, 0 100%, 11% 99%, 17% 98%, 27% 98%, 31% 95%, 37% 97%, 46% 98%, 49% 94%, 57% 94%, 60% 97%, 72% 98%, 78% 95%, 86% 94%, 89% 98%, 100% 100%, 97% 90%, 96% 83%, 99% 76%, 96% 68%, 96% 62%, 95% 54%, 97% 47%, 98% 38%, 96% 29%, 99% 20%, 98% 12%, 100% 0, 83% 0%, 67% 1%, 61% 3%, 56% 1%, 46% 4%, 37% 1%, 33% 1%, 24% 4%, 18% 3%, 11% 0%); clip-path: polygon(0 0, 0 9%, 4% 14%, 4% 23%, 3% 30%, 2% 40%, 4% 53%, 1% 63%, 3% 78%, 2% 86%, 0 100%, 11% 99%, 17% 98%, 27% 98%, 31% 95%, 37% 97%, 46% 98%, 49% 94%, 57% 94%, 60% 97%, 72% 98%, 78% 95%, 86% 94%, 89% 98%, 100% 100%, 97% 90%, 96% 83%, 99% 76%, 96% 68%, 96% 62%, 95% 54%, 97% 47%, 98% 38%, 96% 29%, 99% 20%, 98% 12%, 100% 0, 83% 0%, 67% 1%, 61% 3%, 56% 1%, 46% 4%, 37% 1%, 33% 1%, 24% 4%, 18% 3%, 11% 0%); } .btn5 .btn5-first { position: absolute; top: 0; left: 0; width: 50%; height: 100%; background: #d2d597; background: -webkit-gradient(linear, right top, left top, from(#d2d597), to(#ececc9)); background: linear-gradient(270deg, #d2d597 0%, #ececc9 100%); color: black; border-radius: .25em 0 0 .25em; box-shadow: 0.2em 0 0.7em rgba(133, 102, 0, 0.8) inset; -webkit-transform-origin: right; transform-origin: right; -webkit-clip-path: polygon(0 0, 0 9%, 4% 14%, 4% 23%, 3% 30%, 2% 40%, 4% 53%, 1% 63%, 3% 78%, 2% 86%, 0 100%, 11% 99%, 17% 98%, 27% 98%, 31% 95%, 37% 97%, 46% 98%, 49% 94%, 57% 94%, 60% 97%, 72% 98%, 78% 95%, 86% 94%, 89% 98%, 100% 100%, 100% 0, 83% 0%, 67% 1%, 61% 3%, 56% 1%, 46% 4%, 37% 1%, 33% 1%, 24% 4%, 18% 3%, 11% 0%); clip-path: polygon(0 0, 0 9%, 4% 14%, 4% 23%, 3% 30%, 2% 40%, 4% 53%, 1% 63%, 3% 78%, 2% 86%, 0 100%, 11% 99%, 17% 98%, 27% 98%, 31% 95%, 37% 97%, 46% 98%, 49% 94%, 57% 94%, 60% 97%, 72% 98%, 78% 95%, 86% 94%, 89% 98%, 100% 100%, 100% 0, 83% 0%, 67% 1%, 61% 3%, 56% 1%, 46% 4%, 37% 1%, 33% 1%, 24% 4%, 18% 3%, 11% 0%); } .btn5 .btn5-first p { position: absolute; top: -.55em; right: 0; width: 50%; height: 100%; text-align: center; } .btn5 .btn5-second { position: absolute; top: 0; right: 0; width: 50%; height: 100%; background: #d2d597; background: -webkit-gradient(linear, left top, right top, from(#d2d597), to(#ececc9)); background: linear-gradient(90deg, #d2d597 0%, #ececc9 100%); color: black; border-radius: 0 .25em .25em 0; box-shadow: -0.2em 0 0.7em rgba(133, 102, 0, 0.8) inset; -webkit-transform-origin: left; transform-origin: left; -webkit-clip-path: polygon(0 0, 0 100%, 11% 99%, 17% 98%, 27% 98%, 31% 95%, 37% 97%, 46% 98%, 49% 94%, 57% 94%, 60% 97%, 72% 98%, 78% 95%, 86% 94%, 89% 98%, 100% 100%, 97% 90%, 96% 83%, 99% 76%, 96% 68%, 96% 62%, 95% 54%, 97% 47%, 98% 38%, 96% 29%, 99% 20%, 98% 12%, 100% 0, 83% 0%, 67% 1%, 61% 3%, 56% 1%, 46% 4%, 37% 1%, 33% 1%, 24% 4%, 18% 3%, 11% 0%); clip-path: polygon(0 0, 0 100%, 11% 99%, 17% 98%, 27% 98%, 31% 95%, 37% 97%, 46% 98%, 49% 94%, 57% 94%, 60% 97%, 72% 98%, 78% 95%, 86% 94%, 89% 98%, 100% 100%, 97% 90%, 96% 83%, 99% 76%, 96% 68%, 96% 62%, 95% 54%, 97% 47%, 98% 38%, 96% 29%, 99% 20%, 98% 12%, 100% 0, 83% 0%, 67% 1%, 61% 3%, 56% 1%, 46% 4%, 37% 1%, 33% 1%, 24% 4%, 18% 3%, 11% 0%); } .btn5 .btn5-second p { position: absolute; top: -.55em; left: -.1em; width: 50%; height: 100%; text-align: center; } .btn5:focus .btn5-first { -webkit-animation: shadow 4s linear forwards; animation: shadow 4s linear forwards; } .btn5:focus .btn5-second { -webkit-animation: peel 4s ease-in-out forwards; animation: peel 4s ease-in-out forwards; } @-webkit-keyframes peel { 0% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); background: -webkit-gradient(linear, left top, right top, from(#d2d597), to(#ececc9)); background: linear-gradient(90deg, #d2d597 0%, #ececc9 100%); opacity: 1; border-radius: 0 .25em .25em 0 / 0 0 0 0; } 45% { -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); background: -webkit-gradient(linear, left top, right top, from(#a3a677), to(#c4c4a7)); background: linear-gradient(90deg, #a3a677 0%, #c4c4a7 100%); opacity: 1; border-radius: 0 .4em 3em 0 / 0 .8em 8em 0; } 90% { -webkit-transform: rotateY(-200deg); transform: rotateY(-200deg); background: -webkit-gradient(linear, left top, right top, from(#d2d597), to(#ececc9)); background: linear-gradient(90deg, #d2d597 0%, #ececc9 100%); opacity: 1; border-radius: 0 .25em 1.5em 0 / 0 0 2.5em 0; } 100% { -webkit-transform: rotateY(-200deg); transform: rotateY(-200deg); background: -webkit-gradient(linear, left top, right top, from(#d2d597), to(#ececc9)); background: linear-gradient(90deg, #d2d597 0%, #ececc9 100%); opacity: 0; border-radius: 0 .25em .25em 0 / 0 0 0 0; } } @keyframes peel { 0% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); background: -webkit-gradient(linear, left top, right top, from(#d2d597), to(#ececc9)); background: linear-gradient(90deg, #d2d597 0%, #ececc9 100%); opacity: 1; border-radius: 0 .25em .25em 0 / 0 0 0 0; } 45% { -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); background: -webkit-gradient(linear, left top, right top, from(#a3a677), to(#c4c4a7)); background: linear-gradient(90deg, #a3a677 0%, #c4c4a7 100%); opacity: 1; border-radius: 0 .4em 3em 0 / 0 .8em 8em 0; } 90% { -webkit-transform: rotateY(-200deg); transform: rotateY(-200deg); background: -webkit-gradient(linear, left top, right top, from(#d2d597), to(#ececc9)); background: linear-gradient(90deg, #d2d597 0%, #ececc9 100%); opacity: 1; border-radius: 0 .25em 1.5em 0 / 0 0 2.5em 0; } 100% { -webkit-transform: rotateY(-200deg); transform: rotateY(-200deg); background: -webkit-gradient(linear, left top, right top, from(#d2d597), to(#ececc9)); background: linear-gradient(90deg, #d2d597 0%, #ececc9 100%); opacity: 0; border-radius: 0 .25em .25em 0 / 0 0 0 0; } } @-webkit-keyframes shadow { 0% { box-shadow: -2px 0 4px -2px rgba(0, 0, 0, 0.6) inset, 0.2em 0 0.7em rgba(133, 102, 0, 0.8) inset; -webkit-transform: rotateY(0); transform: rotateY(0); opacity: 1; } 45% { box-shadow: -15px 0 20px -12px rgba(0, 0, 0, 0.6) inset, 0.2em 0 0.7em rgba(133, 102, 0, 0.8) inset; -webkit-transform: rotateY(0); transform: rotateY(0); opacity: 1; } 90% { box-shadow: -25px 0 35px -20px rgba(0, 0, 0, 0.6) inset, 0.2em 0 0.7em rgba(133, 102, 0, 0.8) inset; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); opacity: 0; } 100% { box-shadow: -30px 0 40px -20px rgba(0, 0, 0, 0.6) inset, 0.2em 0 0.7em rgba(133, 102, 0, 0.8) inset; -webkit-transform: rotateY(-10deg); transform: rotateY(-10deg); opacity: 0; } } @keyframes shadow { 0% { box-shadow: -2px 0 4px -2px rgba(0, 0, 0, 0.6) inset, 0.2em 0 0.7em rgba(133, 102, 0, 0.8) inset; -webkit-transform: rotateY(0); transform: rotateY(0); opacity: 1; } 45% { box-shadow: -15px 0 20px -12px rgba(0, 0, 0, 0.6) inset, 0.2em 0 0.7em rgba(133, 102, 0, 0.8) inset; -webkit-transform: rotateY(0); transform: rotateY(0); opacity: 1; } 90% { box-shadow: -25px 0 35px -20px rgba(0, 0, 0, 0.6) inset, 0.2em 0 0.7em rgba(133, 102, 0, 0.8) inset; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); opacity: 0; } 100% { box-shadow: -30px 0 40px -20px rgba(0, 0, 0, 0.6) inset, 0.2em 0 0.7em rgba(133, 102, 0, 0.8) inset; -webkit-transform: rotateY(-10deg); transform: rotateY(-10deg); opacity: 0; } } .btn6 { position: absolute; top: 8em; left: 9em; width: 7em; height: 2em; font-family: 'Iceberg', cursive; background: #0085ad; background-image: url("https://www.transparenttextures.com/patterns/nice-snow.png"); box-shadow: .1em .1em .15em grey; border-radius: .25em; border: none; font-size: 1.2em; color: white; outline: none; -webkit-perspective: 500px; perspective: 500px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .btn6 .btn6-first { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #81b2cc; background-image: url("https://www.transparenttextures.com/patterns/nice-snow.png"); background-size: cover; -webkit-clip-path: polygon(0 0, 0 100%, 7% 97%, 8% 90%, 15% 90%, 16% 85%, 20% 82%, 26% 81%, 30% 78%, 35% 79%, 39% 75%, 43% 70%, 46% 65%, 52% 63%, 55% 58%, 56% 51%, 58% 47%, 62% 48%, 65% 42%, 67% 36%, 73% 35%, 73% 29%, 81% 23%, 82% 17%, 88% 13%, 94% 10%, 100% 0); clip-path: polygon(0 0, 0 100%, 7% 97%, 8% 90%, 15% 90%, 16% 85%, 20% 82%, 26% 81%, 30% 78%, 35% 79%, 39% 75%, 43% 70%, 46% 65%, 52% 63%, 55% 58%, 56% 51%, 58% 47%, 62% 48%, 65% 42%, 67% 36%, 73% 35%, 73% 29%, 81% 23%, 82% 17%, 88% 13%, 94% 10%, 100% 0); color: white; border-radius: .25em; box-shadow: -0.1em -0.1em 0.2em 0.3em rgba(46, 148, 201, 0.5) inset; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; z-index: 1; } .btn6 .btn6-first p { position: absolute; top: -.55em; left: 1.75em; width: 50%; height: 100%; text-align: center; } .btn6 .btn6-second { position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: #81b2cc; background-image: url("https://www.transparenttextures.com/patterns/nice-snow.png"); background-size: cover; -webkit-clip-path: polygon(100% 100%, 0 100%, 7% 97%, 8% 90%, 15% 90%, 16% 85%, 20% 82%, 26% 81%, 30% 78%, 35% 79%, 39% 75%, 43% 70%, 46% 65%, 52% 63%, 55% 58%, 56% 51%, 58% 47%, 62% 48%, 65% 42%, 67% 36%, 73% 35%, 73% 29%, 81% 23%, 82% 17%, 88% 13%, 94% 10%, 100% 0); clip-path: polygon(100% 100%, 0 100%, 7% 97%, 8% 90%, 15% 90%, 16% 85%, 20% 82%, 26% 81%, 30% 78%, 35% 79%, 39% 75%, 43% 70%, 46% 65%, 52% 63%, 55% 58%, 56% 51%, 58% 47%, 62% 48%, 65% 42%, 67% 36%, 73% 35%, 73% 29%, 81% 23%, 82% 17%, 88% 13%, 94% 10%, 100% 0); color: white; border-radius: .25em; -webkit-transform-origin: left; transform-origin: left; box-shadow: 0.1em 0.1em 0.2em 0.3em rgba(46, 148, 201, 0.5) inset; z-index: 3; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; } .btn6 .btn6-second p { position: absolute; top: -.55em; right: 1.75em; width: 50%; height: 100%; text-align: center; } .btn6 .vapor, .btn6 .vapor:before, .btn6 .vapor2:before { position: absolute; bottom: -.5em; left: .5em; width: .5em; height: 1em; border-radius: 50%; background: white; -webkit-filter: blur(0.2em); filter: blur(0.2em); -webkit-transform-origin: top; transform-origin: top; -webkit-animation: vapor 3s linear infinite; animation: vapor 3s linear infinite; z-index: 2; } .btn6 .vapor:before, .btn6 .vapor2:before { content: ''; position: absolute; top: .3em; right: .3em; } .btn6 .vapor2 { position: absolute; top: .2em; right: 1em; width: .5em; height: 1em; border-radius: 50%; background: white; -webkit-filter: blur(0.2em); filter: blur(0.2em); -webkit-transform-origin: top; transform-origin: top; z-index: 2; -webkit-animation: vapor 3s ease-in-out .5s infinite; animation: vapor 3s ease-in-out .5s infinite; } .btn6 .vapor2:before { content: ''; position: absolute; top: -.3em; right: 0; } .btn6:focus .btn6-first { -webkit-animation: vibrate-left 4s linear forwards; animation: vibrate-left 4s linear forwards; } .btn6:focus .btn6-second { -webkit-animation: vibrate-right 4s linear forwards; animation: vibrate-right 4s linear forwards; } @-webkit-keyframes vibrate-left { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 2% { -webkit-transform: rotate(1deg); transform: rotate(1deg); } 4% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 6% { -webkit-transform: rotate(1deg); transform: rotate(1deg); } 8% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 10% { -webkit-transform: rotate(1deg); transform: rotate(1deg); } 12% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 14% { -webkit-transform: rotate(1deg); transform: rotate(1deg); } 16% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 18% { -webkit-transform: rotate(1deg) translate3d(-0.1em, -0.1em, 0); transform: rotate(1deg) translate3d(-0.1em, -0.1em, 0); } 40% { -webkit-transform: rotate(1deg) translate3d(-0.1em, -0.1em, 0); transform: rotate(1deg) translate3d(-0.1em, -0.1em, 0); opacity: 1; } 100% { -webkit-transform: rotate(45deg) translateY(1em); transform: rotate(45deg) translateY(1em); opacity: 0; } } @keyframes vibrate-left { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 2% { -webkit-transform: rotate(1deg); transform: rotate(1deg); } 4% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 6% { -webkit-transform: rotate(1deg).........完整代码请登录后点击上方下载按钮下载查看
网友评论0