一个div布局实现傀儡像素跳动动画效果代码-html代码-BFW代码库

一个div布局实现傀儡像素跳动动画效果代码

代码语言：html

所属分类：动画

代码描述：一个div布局实现傀儡像素跳动动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #282a36;
}

#golem {
  width: 10px;
  height: 10px;
  animation: fire 1.5s ease-in-out infinite;
}

@keyframes fire {
  0% {
    background-color: #ffb86c;
    box-shadow: 0 -10px #f8f4fe, 0 10px #bd93f9, 0 20px #bd93f9, 0 50px rgba(0, 0, 0, 0.3), 0 60px rgba(0, 0, 0, 0.4), -10px -10px #f8f4fe, -10px 0 #f8f4fe, -10px 10px #bd93f9, -10px 20px #f8f4fe, -10px 30px #8232f4, -10px 40px #660de6, -10px 50px #510ab6, -10px 60px rgba(0, 0, 0, 0.5), -20px 0 white, -20px 10px #f8f4fe, -20px 50px rgba(0, 0, 0, 0.3), -20px 60px rgba(0, 0, 0, 0.4), -30px 20px #bd93f9, 10px -10px #dbc3fc, 10px 0 #bd93f9, 10px 10px #9f63f6, 10px 20px #8232f4, 10px 30px #8232f4, 10px 40px #660de6, 10px 50px #510ab6, 10px 60px rgba(0, 0, 0, 0.5), 20px 0 #bd93f9, 20px 50px rgba(0, 0, 0, 0.4), 20px 60px rgba(0, 0, 0, 0.4), 30px -30px #ff5555, 30px -10px white, 30px 0 #bd93f9, 30px 50px rgba(0, 0, 0, 0.4), 40px 60px rgba(0, 0, 0, 0.2);
  }
  50% {
    background-color: #ff5555;
    box-shadow: 0 -10px #dbc3fc, 0 10px #bd93f9, 0 20px #bd93f9, 0 50px rgba(0, 0, 0, 0.2), 0 60px rgba(0, 0, 0, 0.4), -10px -10px #dbc3fc, -10px 0 #dbc3fc, -10px 10px #bd93f9, -10px 20px #bd93f9, -10px 30px #660de6, -10px 40px #510ab.........完整代码请登录后点击上方下载按钮下载查看