svg+css实现可爱机器人动画效果代码-html代码-BFW代码库

svg+css实现可爱机器人动画效果代码

代码语言：html

所属分类：动画

代码描述：svg+css实现可爱机器人动画效果代码，点击触发。

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


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

<head>

  <meta charset="UTF-8">

<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300&display=swap" rel="stylesheet">

<meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
body {
  background: #DA542D;
}

svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
}

@keyframes floatRobot {
  0%, 100% { transform: translateY(0) }
  50% { transform: translateY(0.5%) }
}

@keyframes shakeHead {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(10deg); }
  30% { transform: rotate(6deg); }
  42% { transform: rotate(8deg); }
  65% { transform: rotate(3.5deg) }
  80% { transform: rotate(5deg) }
  95% { transform: rotate(-2deg) }
}

@keyframes shakeNeck {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(9deg); }
  30% { transform: rotate(5deg); }
  42% { transform: rotate(7.5deg); }
  65% { transform: rotate(3deg) }
  80% { transform: rotate(4.5deg) }
  95% { transform: rotate(-1.5deg) }
}

@keyframes shakeBody {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(8deg); }
  30% { transform: rotate(5.5deg); }
  42% { transform: rotate(7deg); }
  65% { transform: rotate(2.5deg) }
  80% { transform: rotate(3.5deg) }
  95% { transform: rotate(-1deg) }
}

@keyframes mergeCones {
  16%, 90% {
    transform: translate(5%, 0.1%);
  }
  100% { 
    transform: translate(0, 0.1%);
  }
}

@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}



.cone:nth-child(2), .flame:nth-child(2) { transform: translate(-1.75%, 3.5%) }
.cone:nth-child(3), .flame:nth-child(3) { transform: translate(-2.85%, 3.75%) }
.cone:nth-child(4), .flame:nth-child(4) { transform: translate(-3.9%, 4%) }
.cone:nth-child(5), .flame:nth-child(5) { transform: translate(-5%, 4.25%) }
.cone:nth-child(6), .flame:nth-child(6) { transform: translate(1.75%, 3.5%) }
.cone:nth-child(7), .flame:nth-child(7) { transform: translate(2.85%, 3.75%) }
.cone:nth-child(8), .flame:nth-child(8) { transform: translate(3.9%, 4%) }
.cone:nth-child(9), .flame:nth-child(9) { transform: translate(5%, 4.25%) }

.cone:nth-child(2), .flame:nth-child(2) { transform: translate(-1.25%, 0.1%) }
.cone:nth-child(3), .flame:nth-child(3) { transform: translate(-2.5%, 0.1%) }
.cone:nth-child(4), .flame:nth-child(4) { transform: translate(-3.75%, 0.1%) }
.cone:nth-child(5), .flame:nth-child(5) { transform: translate(-4.8%, 0.1%) }
.cone:nth-child(6), .flame:nth.........完整代码请登录后点击上方下载按钮下载查看