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;
}
.robotnik-container .dr-robotnik-container .dr-robotnik-body .shirt {
background: #f3c62e;
width: 40px;
height: 130px;
position: absolute;
-webkit-clip-path: polygon(0 0, 100% 0, 60% 100%, 175% 100%);
clip-path: polygon(0 0, 100% 0, 60% 100%, 175% 100%);
transform: translateX(20px);
}
.robotnik-container .dr-robotnik-container .dr-robotnik-body .arm {
width: 100px;
height: 100px;
border-radius: 50%;
border: 2px solid #99111e;
border-left: 0;
border-top: 0;
transform: translate(-50px, -10px);
}
.robotnik-container .ship-container {
width: 250px;
height: 250px;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
-webkit-animation: jump var(--ship-jump-duration) ease infinite alternate;
animation: jump var(--ship-jump-duration) ease infinite alternate;
}
.robotnik-container .ship-container .external-balls {
width: 100%;
position: absolute;
display: flex;
justify-content: space-between;
transform: translateY(-14px);
}
.robotnik-container .ship-container .external-balls .ball {
width: 16px;
height: 16px;
background: #0b2c40;
border-radius: 50%;
}
.robotnik-container .ship-container .crystal {
background: #fff6;
width: 60px;
height: 35px;
position: absolute;
border-radius: 90% 50% 0 0;
transform: translate(45px, -50px) rotate(-20deg);
}
.robotnik-container .ship-container .crystal .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, -2px) rotate(20deg);
}
.robotnik-container .ship-container .ship-top {
width: 190px;
height: 50px;
border-radius: 15px;
position: absolute;
background: #0b2c40;
transform: translateY(-20px);
}
.robotnik-container .ship-container .ship {
width: 225px;
height: 225px;
background: #0b2c40;
border-radius: 50%;
-webkit-clip-path: polygon(0 35%, 100% 35%, 100% 100%, 0 100%);
clip-path: polygon(0 35%, 100% 35%, 100% 100%, 0 100%);
display: flex;
justify-content: center;
align-items: flex-end;
}
.robotnik-container .ship-container .ship .shadow {
background: #0004;
width: 100px;
height: 50px;
border-radius: 0 0 50% 50%;
margin-bottom: 10px;
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 100%, 0 100%);
clip-path: polygon(0 70%, 100% 70%, 100% 100%, 0 100%);
}
.robotnik-container .ship-container .chassis-container {
--chassis-size: 240px;
width: 100%;
height: 65%;
position: absolute;
align-self: flex-end;
/* background: #f004; */
overflow: hidden;
}
.robotnik-container .ship-container .chassis-container .chassis-top {
width: var(--chassis-size);
height: var(--chassis-size);
border-radius: 50%;
background: #768c99;
-webkit-clip-path: polygon(0 30%, 100% 30%, 100% 50%, 0 50%);
clip-path: polygon(0 30%, 100% 30%, 100% 50%, 0 50%);
position: absolute;
top: 0;
left: 5px;
transform: translateY(-75px);
background-image: linear-gradient(60deg, transparent 35.5%, #95adb5 36% 60%, transparent 60.5%);
}
.robotnik-container .ship-container .chassis-container .chassis-top .balls {
display: flex;
width: 100%;
height: 30px;
justify-content: space-around;
transform: translateY(90px);
}
.robotnik-container .ship-container .chassis-container .chassis-top .balls .ball {
width: 16px;
height: 16px;
background: #0b2c40;
border-radius: 50%;
}
.robotnik-container .ship-container .chassis-container .chassis-medium {
width: var(--chassis-size);
height: var(--chassis-size);
border-radius: 50%;
background: #5b6c75;
-webkit-clip-path:
polygon(
0 50%,
100% 50%,
100% 75%,
90% 75%,
90% 54%,
75% 54%,
75% 75%,
40% 75%,
40% 65%,
0 65%,
0 75%
);
clip-path:
polygon(
0 50%,
100% 50%,
100% 75%,
90% 75%,
90% 54%,
75% 54%,
75% 75%,
40% 75%,
40% 65%,
0 65%,
0 75%
);
position: absolute;
top: 0;
left: 5px;
transform: translateY(-72px);
overflow: hidden;
z-index: 10;
}
.robotnik-container .ship-container .chassis-container .chassis-medium .group-container {
height: 64px;
transform: translateY(118px);
width: 100%;
}
.robotnik-container .ship-container .chassis-container .chassis-medium .group-container .danger-bar {
width: 60%;
height: 18px;
background: repeating-linear-gradient(45deg, #0b2c40 0 20px, #f4c72c 20px 40px);
position: relative;
top: 10px;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
}
.robotnik-container .ship-container .chassis-container .chassis-medium .group-container .slots {
width: 60px;
height: 20px;
display: flex;
flex-direction: column;
gap: 4px;
margin: auto;
transform: translate(20px, 16px);
}
.robotnik-container .ship-container .chassis-container .chassis-medium .group-container .slots .slot {
height: 5px;
border-radius: 4px;
background: #3f5863;
}
.robotnik-container .ship-container .chassis-container .gold-ball {
background: #f4c62d;
width: 20px;
height: 40px;
border-radius: 50%;
position: absolute;
z-index: 1;
right: 0;
transform: translate(-37px, 62px) rotate(10deg);
background-image: radial-gradient(circle at 0 0, #fff0, #fff7);
background-image: linear-gradient(100deg, #0004, #0000);
-webkit-animation: blink 0.5s alternate infinite;
animation: blink 0.5s alternate infinite;
overflow: hidden;
}
.robotnik-container .ship-container .chassis-container .gold-ball::after {
content: "";
display: block;
background: #fff7d6;
width: 12px;
height: 28px;
border-radius: 50%;
position: absolute;
top: 6px;
left: -6px;
}
.robotnik-container .ship-container .chassis-container .tube-container {
width: 160px;
height: 50px;
position: absolute;
bottom: 0;
z-index: 5;
display: flex;
align-items: center;
-webkit-animation: shake 0.1s infinite;
animation: shake 0.1s infinite;
}
.robotnik-container .ship-container .chassis-container .tube-container .tube {
width: 20px;
height: 15px;
background: #0d2e46;
border-radius: 5px;
-webkit-clip-path: polyg.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0