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

代码语言：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-child(6) { transform: translate(1.3%, 0.1%) }
.cone:nth-child(7), .flame:nth-child(7) { transform: translate(2.6%, 0.1%) }
.cone:nth-child(8), .flame:nth-child(8) { transform: translate(3.85%, 0.1%) }
.cone:nth-child(9), .flame:nth-child(9) { transform: translate(5.2%, 0.1%) }

.cone, 
.flame {
  transform-origin: 50% 50%;
  transform: translate(0, 0.1%);
}

p {
  position: absolute;
  bottom: 1vmin;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  color: white;
  text-transform: uppercase;
  font-family: 'Roboto Condensed', Roboto, Helvetica, Arial, sans-serif;
  font-size: 2.5vmin;
}

.animated p {
  display: none;
}

#smoke {
  opacity: 0;
}

#robot {
  animation: floatRobot 2s infinite;
}

.animated #head {
  transform-origin: 50% 50%;
  animation: shakeHead 2s cubic-bezier(.65,.07,.87,1.18) 2;
}

.animated #neck {
  transform-origin: 50% 50%;
  animation: shakeNeck 1.95s cubic-bezier(.7,.07,.87,1.20) 2;
}

.animated #body {
  transform-origin: 50% 50%;
  animation: shakeBody 1.9s cubic-bezier(.65,.1,.87,1.25) 2;
}

.animated .cone {
  animation: mergeCones 1.75s 2.2s cubic-bezier(.65,.1,.87,1.25) 1 forwards;
}

.animated .flame {
  animation: mergeCones 1.75s 2.2s cubic-bezier(.65,.1,.87,1.25) 1 forwards,
    fadeOut 0.85s 4.1s 1 forwards;
}

.animated #smoke {
  animation: fadeIn 1.25s 4.6s 1 forwards;
}
</style>



</head>

<body  >

<p>Click anywhere to blow out the candles</p>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1024 768" enable-background="new 0 0 1024 768" xml:space="preserve">
  <svg fill="#fff" x="0" y="-500">
    <path d="M273.1,595.4c0-1.6-0.6-3-1.7-4.1c-1.1-1.1-2.5-1.7-4.1-1.7h-30.9c-1.6,0-3,0.6-4.1,1.7c-1.1,1.1-1.7,2.5-1.7,4.1c0,1.5,0.6,2.9,1.7,4c1.1,1.1,2.5,1.7,4.1,1.7h30.9c3.6,0,6.9,0.7,10.2,2.2c3.2,1.4,6.1,3.5,8.5,6.2c4.3,4.8,6.5,10.4,6.5,16.8c0,3.5-0.7,6.8-2,9.8c-1.3,3.1-3.1,5.7-5.4,8c-2.3,2.3-5,4.1-8,5.4c-3.1,1.3-6.3,2-9.8,2h-30.9c-3.1,0-6-0.5-8.8-1.6c-2.7-1.1-5.2-2.5-7.4-4.4c-2.2-1.9-4.1-4.1-5.6-6.6c-1.5-2.6-2.5-5.3-3-8.4c-0.1-0.7-0.3-1.4-0.3-2.1c-0.1-0.7-0.1-1.4-0.1-2.2h19.4c0,1.6,0.6,3,1.7,4.1c1.1,1.1,2.5,1.7,4.1,1.7h30.9c1.6,0,3-0.6,4.1-1.7c1.1-1.1,1.7-2.5,1.7-4.1c0-1.6-0.6-2.9-1.7-4.1c-1.1-1.2-2.5-1.7-4.1-1.7h-30.9c-3.6,0-7-0.7-10.2-2.1c-3.2-1.4-6.1-3.5-8.5-6.2c-4.3-4.8-6.5-10.4-6.5-16.7c0-3.5,0.7-6.8,2-9.8c1.3-3.1,3.1-5.7,5.4-8c2.3-2.3,5-4.1,8-5.4c3.1-1.3,6.3-2,9.8-2h30.9c3.5,0,6.8,0.7,9.8,2c3.1,1.3,5.7,3.1,8,5.4c2.3,2.3,4.1,5,5.4,8c1.3,3.1,2,6.3,2,9.8H273.1z.........完整代码请登录后点击上方下载按钮下载查看