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: .........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0