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%);
  }
}

@keyfr.........完整代码请登录后点击上方下载按钮下载查看