svg+css实现神秘方块按钮效果代码-html代码-BFW代码库

svg+css实现神秘方块按钮效果代码

代码语言：html

所属分类：其他

代码描述：svg+css实现神秘方块按钮效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  <meta name="viewport" content="width=device-width, initial-scale=1">
  

  
  
<style>
* {
  box-sizing: border-box;
}

:root {
  --background: #5987FF;
  --text-primary: #fff;
  --text-secondary: #ddd;
}

.snagit {
  --block-primary: #3496D4;
  --block-bright: #61A8D4;
  --block-dark: #0F73B5;
}

.camtasia {
  --block-primary: #409743;
  --block-bright: #65ac41;
  --block-dark: #1f7823;
}

.audiate {
  --block-primary: #6A5DB2;
  --block-bright: #9992CB;
  --block-dark: #453A95;
}

body {
  background: var(--background);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}

button {
  width: 15vw;
  padding: 0;
  border: 0;
  transition: all 200ms ease;
  margin: 2vw;
  cursor: pointer;
  position: relative;
  background: none;
}

svg {
  display: block;
  height: auto;
  pointer-events: none;
}

.icon {
  position: relative;
  z-index: 1;
}

.highlight {
  fill: var(--block-bright);
}

.shadow {
  fill: var(--block-dark);
}

.text-primary {
  fill: var(--text-primary);
}

.text-secondary {
  fill: var(--text-secondary);
}

.coin {
  position: absolute;
  bottom: 0;
  width: 50%;
  margin: 0 25%;
}

.background {
  animation: infinite alternate block-flash 1000ms linear;
}

.bump {
  animation: block-bump 250ms ease;
  pointer-events: none;
}

.bump .coin {
  animation: coin-bump 500ms ease;
}

@keyframes block-flash {
  0%, 24.99% {
    fill: var(--block-bright);
  }
  25%, 74.99% {
    fill: var(--block-primary);
  }
  75%, 100% {
    fill: var(--block-dark);
  }
}
@keyframes block-bump {
  50% {
    transform: translateY(-25%);
  }
}
@keyframes coin-bump {
  0% {
    transform: translateY(0) rotateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(-250%) rotateY(90deg);
    opacity: 1;
  }
  100% {
    transform: translateY(-25%);
    opacity: 0;
  }
}
</style>


</head>

<body >
  <button class="button snagit">
  <svg class="coin" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 32">
    <path fill="#ffc600" d="M16 6v20h-2v4h-2v2H4v-2H2v-4H0V6h2V2h2V0h8v2h2v4h2z"/>
    <path fill="#ea800a" d="M4 6h2v20H4z"/>
    <path fill="#010000" d="M10 6h2v20h-2zM6 26h4v2H6z" />
    <path fill="#ea800a" d="M6 4h4v2H6z"/>
  </svg>
  <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
    <path class="highlight" d="M0 0h32v32H0z"/>
    <path class="background" d="M2 2h28v28H2z"/>
    <path class="shadow" d="M3 27h2v2H3zm24 0h2v2h-2zm0-24h2v2h-2zM3 3h2v2H3z"/>
    <path class="shadow" d="M30 0v30H0v2h32V0h-2zM0 0h2v2H0z"/>
    <path class="shadow" d="M23 11v-1h1V9h1V8h1V7H11v1h-1v1H9v1H8v6h1v1h1v1h1v1h11v4H11v1h-1v1H9v1H8v1h15v-1h1v-1h1v-1h1v-6h-1v-1h-1v-1h-1v-1H12v-4h11z"/>
    <path class="text-primary" d="M25 6v1h-1v1h-1v1h-1v1H7V9h1V8h1V7h1V6h15zm0 16v1h-1v1h-1v1h-1v1H7v-1h1v-1h1v-1h1v-1h15z"/>
    <path class="text-secondary" d="M7 10h4v4H7z"/>
    <path class="text-primary" d="M25 18v-1h-1v-1h-1v-1h-1v-1H7v1h1v1h1v1h1v1h15z"/>
    <path class="text-secondary&q.........完整代码请登录后点击上方下载按钮下载查看