css布局实现公路飞机飞行动画效果代码
代码语言：html
所属分类：动画
代码描述：css布局实现公路飞机飞行动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
overflow: hidden;
margin: 0;
height: 100vh;
width: 100vw;
perspective: 1400px;
background: #EBF5FB;
}
body div {
transform-style: preserve-3d;
position: absolute;
}
.camera {
height: 100%;
width: 100%;
transform-origin: center;
transform: translateY(10vmin) rotateX(75deg) rotateZ(10deg) translateZ(-5vmin) translateY(-60vmin);
}
.pseudo {
content: '';
position: absolute;
}
.cessna {
offset-path: path('M 0 0 L 0 -900 A 9 9 90 0 1 900 -900 a 450 450 90 0 1 -450 450 L -450 -450 A 9 9 90 0 0 -450 450 a 450 450 90 0 0 450 -450');
top: 50%;
left: 50%;
transform: rotateX(-90deg);
animation: move 8s infinite linear;
}
@keyframes move {
0% {
offset-distance: 0%;
transform: rotateX(-90deg);
}
5% {
offset-distance: 5%;
transform: rotateX(-90deg);
}
10% {
offset-distance: 10%;
transform: rotateX(-90deg);
}
15% {
offset-distance: 15%;
transform: rotateX(-90deg);
}
20% {
offset-distance: 20%;
transform: rotateX(-135deg);
}
25% {
offset-distance: 25%;
transform: rotateX(-160deg);
}
30% {
offset-distance: 30%;
transform: rotateX(-160deg);
}
35% {
offset-distance: 35%;
transform: rotateX(-160deg);
}
40% {
offset-distance: 40%;
transform: rotateX(-160deg);
}
45% {
offset-distance: 45%;
transform: rotateX(-135deg);
}
50% {
offset-distance: 50%;
transform: rotateX(-90deg) translateY(-15vmin) rotateZ(-10deg);
}
55% {
offset-distance: 55%;
transform: rotateX(-90deg) translateY(-15vmin) rotateZ(-10deg);
}
60% {
offset-distance: 60%;
transform: rotateX(-90deg) translateY(-15vmin);
}
65% {
offset-distance: 65%;
transform: rotateX(-45deg) translateY(-15vmin);
}
70% {
offset-distance: 70%;
transform: rotateX(-20deg) translateY(-15vmin);
}
75% {
offset-distance: 75%;
transform: rotateX(-20deg) translateY(-15vmin);
}
80% {
offset-distance: 80%;
transform: rotateX(-20deg) translateY(-15vmin);
}
85% {
offset-distance: 85%;
transform: rotateX(-20deg) translateY(-15vmin);
}
90% {
offset-distance: 90%;
transform: rotateX(-20deg) translateY(-10vmin);
}
95% {
offset-distance: 95%;
transform: rotateX(-45deg) translateY(-5vmin);
}
100% {
offset-distance: 100%;
transform: rotateX(-90deg);
}
}
@media (min-width: 992px) {
.cessna {
offset-path: path('M 0 0 L 0 -1200 A 12 12 90 0 1 1200 -1200 a 600 600 90 0 1 -600 600 L -600 -600 A 12 12 90 0 0 -600 600 a 600 600 90 0 0 600 -600');
}
}
@keyframes left-flap-inner {
0% {
transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(0);
}
5% {
transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(0);
}
10% {
transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(0);
}
15% {
transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(0);
}
20% {
transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(45deg);
}
25% {
transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(60deg);
}
30% {
transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(60deg);
}
35% {
transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(60deg);
}
40% {
transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(60deg);
}
45% {
transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(45deg);
}
50% {
transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(60deg);
}
55% {
transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(60deg);
}
60% {
transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(0);
}
65% {
transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(-45deg);
}
70% {
transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(-60deg);
}
75% {
transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(-60deg);
}
80% {
transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(-60deg);
}
85% {
transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(-60deg);
}
90% {
transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(-60deg);
}
95% {
transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(-45deg);
}
100% {
transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(0);
}
}
@keyframes left-flap-outer {
0% {
transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(0);
}
5% {
transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(0);
}
10% {
transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(0);
}
15% {
transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(0);
}
20% {
transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(20deg);
}
25% {
transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(45deg);
}
30% {
transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(45deg);
}
35% {
transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(45deg);
}
40% {
transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(45deg);
}
45% {
transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(20deg);
}
50% {
transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(45deg);
}
55% {
transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(45deg);
}
60% {
transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(0);
}
65% {
transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(-20deg);
}
70% {
transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(-45deg);
}
75% {
transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(-45deg);
}
80% {
transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(-45deg);
}
85% {
transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(-45deg);
}
90% {
transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(-45deg);
}
95% {
transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(-20deg);
}
100% {
transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(0);
}
}
@keyframes right-flap-inner {
0% {
transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(0);
}
5% {
transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(0);
}
10% {
transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(0);
}
15% {
transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(0);
}
20% {
transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(-45deg);
}
25% {
transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(-60deg);
}
30% {
transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(-60deg);
}
35% {
transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(-60deg);
}
40% {
transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(-60deg);
}
45% {
transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(-45deg);
}
50% {
transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(60deg);
}
55% {
transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(60deg);
}
60% {
transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(0);
}
65% {
transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(45deg);
}
70% {
transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(60deg);
}
75% {
transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(60deg);
}
80% {
transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(60deg);
}
85% {
transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(60deg);
}
90% {
transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(60deg);
}
95% {
transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(45deg);
}
100% {
transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(0);
}
}
@keyframes right-flap-out.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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