css实现蛋头博士飞行动画效果代码-html代码-BFW代码库

css实现蛋头博士飞行动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现蛋头博士飞行动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>





    <style>
        :root {
          --background-color: #f4c62d;
          --ship-jump-duration: 0.5s;
        }
        
        body {
          margin: 0;
          background: var(--background-color);
        }
        
        .container {
          display: flex;
          justify-content: center;
        }
        
        .robotnik-container {
          width: 400px;
          height: 400px;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
        }
        
        .robotnik-container .dr-robotnik-container {
            position: absolute;
            transform: translateY(-10px);
            display: flex;
            justify-content: center;
          }
        
        .robotnik-container .dr-robotnik-container .dr-robotnik {
              display: flex;
              justify-content: center;
              -webkit-animation: jump var(--ship-jump-duration) ease infinite alternate 0.1s;
                      animation: jump var(--ship-jump-duration) ease infinite alternate 0.1s;
            }
        
        .robotnik-container .dr-robotnik-container .head {
              background: #f6d8cb;
              width: 51px;
              height: 60px;
              border-radius: 50%;
              position: absolute;
              transform: translate(20px, -35px);
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              z-index: 10;
            }
        
        .robotnik-container .dr-robotnik-container .head .shine {
                width: 40px;
                height: 40px;
                border: 3px solid #fff8;
                border-radius: 50%;
                position: absolute;
                top: 0;
                right: 0;
                -webkit-clip-path: polygon(70% 0, 70% 40%, 100% 40%, 100% 0);
                        clip-path: polygon(70% 0, 70% 40%, 100% 40%, 100% 0);
                transform: translate(-3px, 3px);
              }
        
        .robotnik-container .dr-robotnik-container .head .brow {
                background: #0002;
                width: 20px;
                height: 2px;
                border-radius: 3px;
                margin-bottom: 3px;
                transform: translateX(5px);
              }
        
        .robotnik-container .dr-robotnik-container .head .eyes {
                display: flex;
                transform: translateX(5px);
              }
        
        .robotnik-container .dr-robotnik-container .head .eyes .eye {
                  width: 4px;
                  height: 12px;
                  background: #0f2630;
                  border-radius: 3px;
                  margin-left: 3px;
                }
        
        .robotnik-container .dr-robotnik-container .head .nose {
                width: 18px;
                height: 12px;
                background: #f9aeac;
                border-radius: 8px;
                position: relative;
                transform: translate(10px, 2px);
              }
        
        .robotnik-container .dr-robotnik-container .head .mustache-container .left .mustache-hairs {
                    --x: -16px;
                  }
        
        .robotnik-container .dr-robotnik-container .head .mustache-container .right {
                  transform: scaleX(-1);
                }
        
        .robotnik-container .dr-robotnik-container .head .mustache-container .mustache-hairs {
                  background: #543935;
                  height: 12px;
                  border-radius: 50%;
                  position: absolute;
                  transform-origin: 100% 50%;
                  transform: translate(var(--x, 0), 8px) rotate(var(--rotate));
                  right: 0;
                }
        
        .robotnik-container .dr-robotnik-container .head .mustache-container .mustache-hairs.top {
                    --rotate: 20deg;
        
                    width: 65px;
                  }
        
        .robotnik-container .dr-robotnik-container .head .mustache-container .mustache-hairs.medium {
                    --rotate: 10deg;
        
                    width: 55px;
                  }
        
        .robotnik-container .dr-robotnik-container .head .mustache-container .mustache-hairs.bottom {
                    --rotate: -4deg;
        
                    width: 45px;
                  }
        
        .robotnik-container .dr-robotnik-container .dr-robotnik-body {
              background: #c21b2d;
              width: 155px;
              height: 150px;
              border-radius: 50%;
              display: flex;
              justify-content: center;
              align-items: center;
.........完整代码请登录后点击上方下载按钮下载查看