css+svg实现漂浮的机器人效果代码
代码语言：html
所属分类：布局界面
代码描述：css+svg实现漂浮的机器人效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
html, body {
height: 100%;
}
body {
background: #2a88c5;
position: relative;
}
#robot {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
max-width: 50vw;
max-height: 80vh;
margin: 0 auto;
}
#body {
-webkit-animation: hover 1.1s ease-in-out 0s infinite alternate;
animation: hover 1.1s ease-in-out 0s infinite alternate;
}
#head {
-webkit-animation: hover 1.1s ease-in-out 0.05s infinite alternate;
animation: hover 1.1s ease-in-out 0.05s infinite alternate;
}
#arms {
-webkit-animation: hover 1.1s ease-in-out 0.1s infinite alternate;
animation: hover 1.1s ease-in-out 0.1s infinite alternate;
}
#left_arm {
transform-origin: center right;
-webkit-animation: arms_bounce_left 1.1s ease-in-out 0s infinite alternate;
animation: arms_bounce_left 1.1s ease-in-out 0s infinite alternate;
}
#right_arm {
transform-origin: center left;
-webkit-animation: arms_bounce_right 1.1s ease-in-out 0s infinite alternate;
animation: arms_bounce_right 1.1s ease-in-out 0s infinite alternate;
}
#eyes ellipse {
transform-origin: center center;
-webkit-animation: eyes_blink 2s ease-out 0s infinite alternate;
animation: eyes_blink 2s ease-out 0s infinite alternate;
}
#shadow {
transform-origin: center center;
-webkit-animation: shadow 1.1s ease-in-out 0s infinite alternate;
animation: shadow 1.1s ease-in-out 0s infinite alternate;
}
@-webkit-keyframes hover {
0% {
transform: translate3d(0, 80px, 0);
}
100% {
transform: translate3d(0, 30px, 0);
}
}
@keyframes hover {
0% {
transform: translate3d(0, 80px, 0);
}
100% {
transform: translate3d(0, 30px, 0);
}
}
@-webkit-keyframes shadow {
0% {
transform: translate3d(0, 0, 0) scale(1.5, 1.2);
opacity: 0.4;
}
100% {
transform: translate3d(0, 0, 0) scale(1, 1);
opacity: 0.2;
}
}
@keyframes shadow {
0% {
transform: translate3d(0, 0, 0) scale(1.5, 1.2);
opacity: 0.4;
}
100% {
transform: translate3d(0, 0, 0) scale(1, 1);
opacity: 0.2;
}
}
@-webkit-keyframes arms_bounce_left {
0% {
transform: translate3d(0, 80px, 0) rotate(0deg);
}
100% {
transform: translate3d(0, 30px, 0) rotate(-10deg);
}
}
@keyframes arms_bounce_left {
0% {
transform: translate3d(0, 80px, 0) rotate(0deg);
}
100% {
transform: translate3d(0, 30px, 0) rotate(-10deg);
}
}
@-webkit-keyframes arms_bounce_right {
0% {
transform: translate3d(0, 80px, 0) rotate(0deg);
}
100% {
transform: translate3d(0, 30px, 0) rotate(10deg);
}
}
@keyframes arms_bounce_right {
0% {
transform: translate3d(0, 80px, 0) rotate(0deg);
}
100% {
transform: translate3d(0, 30px, 0) rotate(10deg);
}
}
@-webkit-keyframes eyes_blink {
0% {
transform: scale(1, 1);
}
90% {
transform: scale(1, 1);
}
95% {
transform: scale(0.8, 0);
}
100% {
transform: scale(1, 1);
}
}
@keyframes eyes_blink {
0% {
transform: scale(1, 1);
}
90% {
transform: scale(1, 1);
}
95% {
transform: scale(0.8, 0);
}
100% {
transform: scale(1, 1);
}
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="robot" x="0" y="0" viewBox="0 0 600 800" enable-background="new 0 0 600 800" xml:space="preserve">
<ellipse id="shadow" opacity="0.4" fill="#2C3332" cx="300" cy="703.4" rx="89" ry="30.6" />
<g id="left_arm">
<path fill="#BABEB7" d="M184 430.9c-44-18.9-84.8 18-94.2 44.1 -10.9-3.3-22.1-1.3-28.8 5.5 -1 1-1.8 2-2.6 3.2 -1.9 2.1-4.5 5.2-6.2 8.3 -5.8 10-2.3 23.1 7.7 32.4l3.8-3.7 5.7-7.1 -3.8 3.8c-6.8-6.4-10.6-14.6-10.5-22.3 -0.1 7.7 3.7 15.9 10.5 22.2l3.8-3.7c-4.8-5.1-6.7-11.7-4.8-17.3 5.6-3.5 13.8-3.4 21 0.8 8.7 5 13 14.3 10.5 21.7 -2.4 1.5-5.3 2.4-8.4 2.5l-5.7 7.1 0.1 6c8.5 0.8 16.5-1.6 21.7-6.8 1.2-1.2 6.3-7.3 7.2-8.8 0 0 0 0 0-0.1 0.6-0.8 1.1-1.5 1.6-2.4 5.5-9.5 2.6-22.1-6.4-31.2 13.2-12.9 33.1-25.2 48.8-9.1C156.5 477.4 189.1 433.1 184 430.9z" />
<path fill="#DCE0DA" d="M106.3 485c-2.4-2.4-5.2-4.6-8.4-6.5 -2.6-1.5-5.3-2.7-8.1-3.5 -10.9-3.3-22.1-1.3-28.8 5.5 -1.2 1.2-2.3 2.6-3.2 4.1 -5.8 10-2.3 23.3 7.7 32.5l3.8-3.7c-4.8-5.1-6.7-11.7-4.8-17.3 0.3-0.8 0.6-1.6 1.1-2.4 4.1-7.1 14.2-9.2 23.3-5.1 0.8 0.3 1.5 0.7 2.3 1.2 1.9 1.1 3.6 2.4 5.1 3.9 5.9 5.9 7.9 14 4.3 20.2 -1.1 2-2.7 3.5-4.6 4.7 -2.4 1.5-5.3 2.4-8.4 2.5l0.1 6c9.4 0.9 18.2-2.1 23.3-8.7 0.6-0.8 1.1-1.5 1.6-2.4C118.1 506.6 115.2 494.1 106.3 485z" />
</g>
<g id="right_arm">
<path fill="#DCE0DA" d="M547.7 492c-1.8-3-4.3-6.1-6.2-8.3 -0.8-1.2-1.6-2.2-2.6-3.2 -6.7-6.8-17.8-8.8-28.8-5.5 -9.3-26.1-50.2-63-94.1-44.1 -5.1 2.2 27.5 46.5 28.9 45 15.6-16.1 35.6-3.8 48.8 9.1 -8.9 9.1-11.9 21.6-6.4 31.2 0.5 0.8 1 1.6 1.6 2.4 0 0 0 0 0 0.1 0.9 1.6 6 7.6 7.2 8.8 5.2 5.3 13.2 7.7 21.7 6.8l0.1-6 -5.7-7.1c-3.1-0.1-6-1-8.4-2.5 -2.5-7.5 1.8-16.7 10.5-21.7 7.2-4.2 15.5-4.2 21-0.8 1.9 5.6-0.1 12.2-4.8 17.3l3.8 3.7c6.8-6.3 10.6-14.5 10.5-22.2 0.2 7.8-3.6 16-10.5 22.3l-3.8-3.7 5.7 7 3.8 3.8C550 515.1 553.5 502 547.7 492z" />
<path fill="#BABEB7" d="M547.7 492c-3.1-5.4-8.8-11-8.8-11s0 0 0 0c1.2 1 2.3 2.4 3.2 3.9 5.8 10 2.3 23.1-7.7 32.4l-3.8-3.7 5.7 7 3.8 3.8C550 515.1 553.5 502 547.7 492z" />
<path fill="#BABEB7" d="M489 518.6C489 518.6 489 518.6 489 518.6c0.9 1.6 6 7.7 7.2 8.9 5.2 5.3 13.2 7.7 21.7 6.8l0.1-6 -5.7-7.1 -0.1 6C502.9 528.2 494.1 525.1 489 518.6z" />
<path fill="#BABEB7" d="M534.4 493.8c-4.1-7.1-14.2-9.2-23.3-5.1 -0.8 0.3-1.5 0.7-2.3 1.2 -1.9 1.1-3.6 2.4-5.1 3.9 -5.9 5.9-7.9 14-4.3 20.2 1.1 2 2.7 3.5 4.6 4.7 -2.5-7.5 1.8-16.7 10.5-21.7 7.2-4.2 15.5-4.2 21-0.8C535.2 495.4 534.8 494.6 534.4 493.8z" />
</g>
<g id="robot_main">
<g id="body">
<path id="SVGID_3_" fill="#BABEB7" d="M137.4 525.6c0-47.9 60.7-219.3 162.6-219.3 101.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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