div+css实现游戏按钮点击动画效果代码
代码语言：html
所属分类：其他
代码描述：div+css实现游戏按钮点击动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
:root {
--surface: #271C22;
--primary: #FFD600;
--secondary: #99CFD4;
--secondary-variant: #4A46BA;
--tertiary: #D52B5D;
--tertiary-variant: #4A2832;
--dot:#D0ABB8;
--ghost-1: #D0ABB8;
--ghost-2: #DDA445;
--ghost-3: #99CFD4;
--ghost-4: #E0161A;
--ghost-variant: #4A46BA;
}
arcade-machine {
display: grid;
place-items: center;
border-bottom-left-radius: 10rem;
border-bottom-right-radius: 10rem;
width: 100vw;
height: 100vh;
background: linear-gradient(to bottom, #AB1740, #CB2057);
position: relative;
}
arcade-machine:before {
content: "";
background: linear-gradient(to bottom, #DC3362, #CB2057);
box-shadow: -0.0825rem 0.1rem 1rem 0.0625rem rgba(70, 8, 17, 0.4), -0.0625rem 0.1rem 0 rgba(131, 30, 61, 0.34), 0.0625rem 0.1rem 0 rgba(131, 30, 61, 0.34);
position: absolute;
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
top: 0;
left: 2rem;
right: 2rem;
bottom: 1.5rem;
}
arcade-machine:after {
content: "";
background: linear-gradient(to bottom, #DC3362, #CB2057);
box-shadow: -0.0625rem 1rem 0.4rem #CB2057, 0.0625rem 1rem 0.4rem #CB2057;
position: absolute;
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
top: 50%;
left: 2rem;
right: 2rem;
bottom: 1.5rem;
}
arcade-machine-title {
display: flex;
aspect-ratio: 4.8/20;
height: min(20rem, 35vh);
border-bottom-left-radius: 10rem;
border-bottom-right-radius: 10rem;
position: absolute;
left: 4rem;
top: 0;
background: url(//repo.bfw.wiki/bfwrepo/icon/637977059b93a.png) center center no-repeat, linear-gradient(to bottom, #CD1E4F, #C0134B 20%);
background-size: contain;
padding: 0.5rem;
background-origin: content-box;
box-shadow: inset -0.0625rem 0 0 rgba(131, 30, 61, 0.34), inset 0.0625rem 0 0 rgba(131, 30, 61, 0.34), inset 0 -0.2rem 0.8rem rgba(0, 0, 0, 0.15);
}
arcade-button {
z-index: 1111111;
display: flex;
align-items: center;
color: var(--primary);
border-radius: 10rem;
width: 20rem;
height: 7rem;
position: relative;
overflow: hidden;
-webkit-animation: progress 2s linear infinite;
animation: progress 2s linear infinite;
transition: border 0.3s linear;
--border-color: var(--secondary);
border: 0.375rem solid var(--border-color);
text-transform: uppercase;
box-shadow: -0.0625rem -0.0625rem 0.125rem rgba(255, 255, 255, 0.25), -0.125rem -0.125rem 0.8125rem rgba(231, 135, 164, 0.15), -0.25rem -0.25rem 1.1875rem 0.3125rem #DD6589, 0.25rem 0.25rem 0.1875rem #7E233E, 0.25rem 0.25rem 1.5rem 0.4375rem #951D41;
background: var(--surface);
}
@media (hover) {
arcade-button:hover {
border-color: var(--tertiary);
border-width: 0.75rem;
cursor: pointer;
}
arcade-button:hover:after, arcade-button:hover walls, arcade-button:hover dots, arcade-button:hover dots-v {
margin: -0.375rem;
}
}
arcade-button:active {
border-color: var(--tertiary-variant);
border-width: 0.5rem;
cursor: pointer;
}
arcade-button:active:after {
margin: -0.125rem;
}
arcade-button:before {
content: "";
position: absolute;
inset: 0;
-webkit-animation: content-placeholder-animation var(--content-placeholder-animation-duration, 1.5s) ease 2 forwards;
animation: content-placeholder-animation var(--content-placeholder-animation-duration, 1.5s) ease 2 forwards;
background: transparent linear-gradient(to right, transparent 0, transparent calc(10% - 6.25rem), color-mix(in srgb, var(--tertiary-variant), transparent 15%) 50%, transparent calc(50% + 6.25rem), transparent 100%) center left;
background-size: 100% 100%;
}
arcade-button:after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(transparent 40%, var(--surface)) repeat;
z-index: 120;
background-size: 0.25rem 0.25rem;
transition: margin 0.3s linear;
}
arcade-button input {
display: none;
z-index: 111;
}
arcade-button input:not(:checked) ~ *:not(arcade-button-text):not(.audio) {
display: none;
transition: all 0.3s ease;
opacity: 1;
}
arcade-button input:not(:checked) ~ arcade-button-text {
-webkit-animation: none;
animation: none;
}
arcade-button input:not(:checked) ~ arcade-button-text:after {
content: var(--button-label);
}
arcade-button input:not(:checked) ~ walls {
opacity: 0;
}
arcade-button input:checked ~ .audio {
display: block !important;
}
arcade-button-text {
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-size: 2rem;
letter-spacing: 0.5rem;
-webkit-animation: label 5s linear infinite;
animation: label 5s linear infinite;
}
arcade-button-text:after {
content: "Loading";
}
@-webkit-keyframes content-placeholder-animation {
from {
opacity: 0;
transform: translateX(-100%);
}
50% {
opacity: 1;
}
to {
opacity: 0;
transform: translateX(100%);
}
}
@keyframes content-placeholder-animation {
from {
opacity: 0;
transform: translateX(-100%);
}
50% {
opacity: 1;
}
to {
opacity: 0;
transform: translateX(100%);
}
}
@-webkit-keyframes label {
from {
opacity: 0;
transform: translateY(0.26rem);
}
66% {
opacity: 0;
transform: translateY(0.26rem);
}
69% {
transform: translateY(0);
opacity: 0.1;
}
71% {
opacity: 1;
}
74% {
opacity: 0.2;
}
76% {
opacity: 1;
}
78% {
opacity: 0.2;
}
82% {
opacity: 1;
}
90% {
opacity: 1;
transform: translateY(0);
}
93% {
opacity: 0;
transform: translateY(0.26rem);
}
to {
opacity: 0;
}
}
@keyframes label {
from {
opacity: 0;
transform: translateY(0.26rem);
}
66% {
opacity: 0;
transform: translateY(0.26rem);
}
69% {
transform: translateY(0);
opacity: 0.1;
}
71% {
opacity: 1;
}
74% {
opacity: 0.2;
}
76% {
opacity: 1;
}
78% {
opacity: 0.2;
}
82% {
opacity: 1;
}
90% {
opacity: 1;
transform: translateY(0);
}
93% {
opacity: 0;
transform: translateY(0.26rem);
}
to {
opacity: 0;
}
}
@property --ghost-eye-size {
syntax: "<number>";
inherits: true;
initial-value: 0;
}
ghost {
--ghost-eye-size: 1;
--ghost-chomp-color: transparent;
display: grid;
background: radial-gradient(calc(.45rem * var(--ghost-eye-size)) calc(.45rem * var(--ghost-eye-size)) at 0.85rem 1rem, var(--eye-color, var(--ghost-variant)) 50%, transparent 50%, transparent), radial-gradient(calc(.45rem * var(--ghost-eye-size)) calc(.45rem * var(--ghost-eye-size)) at 1.75rem 1rem, var(--eye-color, var(--ghost-variant)) 50%, transparent 50%, transparent), radial-gradient(calc(.60rem * var(--ghost-eye-size)) calc(.75rem * var(--ghost-eye-size)) at 0.75rem 1rem, white 50%, transparent 50%, transparent), radial-gradient(calc(.60rem * var(--ghost-eye-size)) calc(.75rem * var(--ghost-eye-size)) at 1.6rem 1rem, white 50%, transparent 50%, transparent), var(--ghost-color);
-webkit-clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 99% 100%, 77% 86%, 58% 100%, 42% 84%, 27% 100%, 15% 84%);
clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 99% 100%, 77% 86%, 58% 100%, 42% 84%, 27% 100%, 15% 84%);
-webkit-animation: ghost-body 0.3s ease infinite, ghost-move 5s linear infinite;
animation: ghost-body 0.3s ease infinite, ghost-move 5s linear infinite;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
width: 2rem;
height: 2.4rem;
margin-top: 0.35rem;
left: 1rem;
z-index: 8;
place-items: center;
}
ghost:after {
content: "";
background: var(--ghost-chomp-color, white);
height: 0.4rem;
width: 1.25rem;
transform: translate(0.25rem, 0.5rem);
-webkit-clip-path: polygon(0% 77%, 24% 7%, 45% 47%, 63% 0%, 77% 45%, 94% 2%, 80% 76%, 63% 30%, 46% 90%, 25% 39%);
clip-path: polygon(0% 77%, 24% 7%, 45% 47%, 63% 0%, 77% 45%, 94% 2%, 80% 76%, 63% 30%, 46% 90%, 25% 39%);
-webkit-animation: ghost-chomp 0.3s ease infinite;
animation: ghost-chomp 0.3s ease infinite;
}
ghost.pinky {
--ghost-color: var(--ghost-color-variant, var(--ghost-1));
}
ghost.clyde {
--ghost-color: var(--ghost-color-variant, var(--ghost-2));
}
ghost.inky {
--ghost-color: var(--ghost-color-variant, var(--ghost-3));
}
ghost.blinky {
--ghost-color: var(--ghost-color-variant, var(--ghost-4));
}
ghost.dizzied {
--ghost-color: var(--ghost-variant);
--ghost-color-variant: var(--ghost-variant);
--ghost-eye-size: 0.5;
--ghost-eye-color: transparent;
--ghost-chomp-color: white;
}
@-webkit-keyframes ghost-body {
from {
-webkit-clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 100% 100%, 90.56% 90.56%, 82.44% 73.62%, 75.44% 90.56%, 65.13% 100%, 56.49% 90.56%, 47.44% 73.62%, 42.25% 91.5%, 31.22% 100%, 21.24% 92.09%, 15% 73.62%, 8.5% 91.5%);
clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 100% 100%, 90.56% 90.56%, 82.44% 73.62%, 75.44% 90.56%, 65.13% 100%, 56.49% 90.56%, 47.44% 73.62%, 42.25% 91.5%, 31.22% 100%, 21.24% 92.09%, 15% 73.62%, 8.5% 91.5%);
}
50% {
-webkit-clip-path: polygon(0% 75.25%, 0% 0%, 100% 0%, 100% 75.25%, 90.56% 90.56%, 83.3% 100%, 75.44% 90.56%, 65.96% 73.58%, 56.49% 90.56%, 49.96% 100%, 42.25% 91.5%, 31.23% 73.58%, 21.24% 92.09%, 14.98% 100%, 8.5% 91.5%);
clip-path: polygon(0% 75.25%, 0% 0%, 100% 0%, 100% 75.25%, 90.56% 90.56%, 83.3% 100%, 75.44% 90.56%, 65.96% 73.58%, 56.49% 90.56%, 49.96% 100%, 42.25% 91.5%, 31.23% 73.58%, 21.24% 92.09%, 14.98% 100%, 8.5% 91.5%);
}
to {
-webkit-clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 100% 100%, 90.56% 90.56%, 82.44% 73.62%, 75.44% 90.56%, 65.13% 100%, 56.49% 90.56%, 47.44% 73.62%, 42.25% 91.5%, 31.22% 100%, 21.24% 92.09%, 15% 73.62%, 8.5% 91.5%);
clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 100% 100%, 90.56% 90.56%, 82.44% 73.62%, 75.44% 90.56%, 65.13% 100%, 56.49% 90.56%, 47.44% 73.62%, 42.25% 91.5%, 31.22% 100%, 21.24% 92.09%, 15% 73.62%, 8.5% 91.5%);
}
}
@keyframes ghost-body {
from {
-webkit-clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 100% 100%, 90.56% 90.56%, 82.44% 73.62%, 75.44% 90.56%, 65.13% 100%, 56.49% 90.56%, 47.44% 73.62%, 42.25% 91.5%, 31.22% 100%, 21.24% 92.09%, 15% 73.62%, 8.5% 91.5%);
clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 100% 100%, 90.56% 90.56%, 82.44% 73.62%, 75.44% 90.56%, 65.13% 100%, 56.49% 90.56%, 47.44% 73.62%, 42.25% 91.5%, 31.22% 100%, 21.24% 92.09%, 15% 73.62%, 8.5% 91.5%);
}
50% {
-webkit-clip-path: polygon(0% 75.25%, 0% 0%, 100% 0%, 100% 75.25%, 90.56% 90.56%, 83.3% 100%, 75.44% 90.56%, 65.96% 73.58%, 56.49% 90.56%, 49.96% 100%, 42.25% 91.5%, 31.23% 73.58%, 21.24% 92.09%, 14.98% 100%, 8.5% 91.5%);
clip-path: polygon(0% 75.25%, 0% 0%, 100% 0%, 100% 75.25%, 90.56% 90.56%, 83.3% 100%, 75.44% 90.56%, 65.96% 73.58%, 56.49% 90.56%, 49.96% 100%, 42.25% 91.5%, 31.23% 73.58%, 21.24% 92.09%, 14.98% 100%, 8.5% 91.5%);
}
to {
-webkit-clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 100% 100%, 90.56% 90.56%, 82.44% 73.62%, 75.44% 90.56%, 65.13% 100%, 56.49% 90.56%, 47.44% 73.62%, 42.25% 91.5%, 31.22% 100%, 21.24% 92.09%, 15% 73.62%, 8.5% 91.5%);
clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 100% 100%, 90.56% 90.56%, 82.44% 73.62%, 75.44% 90.56%, 65.13% 100%, 56.49% 90.56%, 47.44% 73.62%, 42.25% 91.5%, 31.22% 100%, 21.24% 92.09%, 15% 73.62%, 8.5% 91.5%);
}
}
@-webkit-keyframes ghost-chomp {
from {
-webkit-clip-path: polygon(0% 77%, 24% 7%, 45% 47%, 63% 0%, 77% 45%, 94% 2%, 80% 76%, 63% 30%, 46% 90%, 25% 39%);
clip-path: polygon(0% 77%, 24% 7%, 45% 47%, 63% 0%, 77% 45%, 94% 2%, 80% 76%, 63% 30%, 46% 90%, 25% 39%);
}
50% {
-webkit-clip-path: polygon(0 5%, 22% 64%, 44% 5%, 61% 70%, 77% 6%, 99% 76%, 79% 33%, 61% 91%, 44% 37%, 21% 95%);
clip-path: polygon(0 5%, 22% 64%, 44% 5%, 61% 70%, 77% 6%, 99% 76%, 79% 33%, 61% 91%, 44% 37%, 21% 95%);
}
to {
-webkit-clip-path: polygon(0% 77%, 24% 7%, 45% 47%, 63% 0%, 77% 45%, 94% 2%, 80% 76%, 63% 30%, 46% 90%, 25% 39%);
clip-path: polygon(0% 77%, 24% 7%, 45% 47%, 63% 0%, 77% 45%, 94% 2%, 80% 76%, 63% 30%, 46% 90%, 25% 39%);
}
}
@keyframes ghost-chomp {
from {
-webkit-clip-path: polygon(0% 77%, 24% 7%, 45% 47%, 63% 0%, 77% 45%, 94% 2%, 80% 76%, 63% 30%, 46% 90%, 25% 39%);
clip-path: polygon(0% 77%, 24% 7%, 45% 47%, 63% 0%, 77% 45%, 94% 2%, 80% 76%, 63% 30%, 46% 90%, 25% 39%);
}
50% {
-webkit-clip-path: polygon(0 5%, 22% 64%, 44% 5%, 61% 70%, 77% 6%, 99% 76%, 79% 33%, 61% 91%, 44% 37%, 21% 95%);
clip-path: polygon(0 5%, 22% 64%, 44% 5%, 61.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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