鼠标点击颜色爆炸效果-html代码-BFW代码库

鼠标点击颜色爆炸效果

代码语言：html

所属分类：动画

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0; 
  overflow: hidden;
  baackground-image: url('data:image/svg+xml,%3Csvg width="52" height="26" viewBox="0 0 52 26" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%239C92AC" fill-opacity="0.4"%3E%3Cpath d="M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z" /%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
}
.body, .body2 {
  height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  overflow:hidden;
  cursor:pointer;
  transition:2s;
}

.boom{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  height:500vw;
  width:500vw;
  animation: boomba 1s linear;
  border-radius:200vw;
}

@keyframes boomba{
  0%{height:10px; width:10px;}
  100%{height:500vw; width:500vw;}
}

.bubble1,.bubble2,.bubble3,.bubble4,.bubble5,.bubble6,.bubble7,.bubble8,.bubble9{
  position:absolute;
  top:50%;
  left:50%;
  height:10vw;
  width:10vw;
  transform:translate(-50%,-50%);
  border-radius:100vw;
  opacity:0;  
}
.bubble1{
  animation:fade1 1s;
}
.bubble2{
  animation:fade2 .8s;
}
.bubble3{
  animation:fade3 .7s;
}
.bubble4{
  animation:fade4 1.1s;
}
.bubble5{
  animation:fade5 1.2s;
}
.bubble6{
  animation:fade6 1.3s;
}
.bubble7{
  animation:fade7 1.4s;
}
.bubble8{
  animation:fade8 1.5s;
}
.bubble9{
  animation:fade9 1.6s;
}

@keyframes fade1{
  0%{
    height:0px;
    width:0px;
    opacity:1;
  }
  50%{
    opacity:1
  }
  100%{
    height:10vw;
    width:10vw;
    opacity:0;
  }
}
@keyframes fade2{
  0%{
    height:0px;
    width:0px;
    opacity:1;
  }
  50%{
    opacity:1
  }
  100%{
    height:12vw;
    width:12vw;
    opacity:0;
  }
}
@keyframes fade3{
  0%{
    height:0px;
    width:0px;
    opacity:1;
  }
  50%{
    opacity:1
  }
  100%{
    height:15vw;
    width:15vw;
    opacity:0;
  }
}
@keyframes fade4{
  0%{
    height:0px;
    width:0px;
    opacity:1;
  }
  50%{
    opacity:1
  }
  100%{
    height:5vw;
    width:5vw;
    opacity:0;
  }
}
@keyframes fade5{
  0%{
    height:0px;
    width:0px;
    opacity:1;
  }
  50%{
    opacity:1
  }
  100%{
    height:6vw;
    width:6vw;
    opacity:0;
  }
}
@keyframes fade6{
  0%{
    height:0px;
    width:0px;
    opacity:1;
  }
  50%{
    opacity:1
  }
  100%{
    height:6vw;
    width:6vw;
    opacity:0;
  }
}
@keyframes fade7{
  0%{
    height:0px;
    width:0px;
    opacity:1;
  }
  50%{
    opacity:1
  }
  100%{
    height:6vw;
    width:6vw;
    opacit.........完整代码请登录后点击上方下载按钮下载查看