html – CSS车辆动画_html-js-css

概述我试图让拖拉机在屏幕上移动.我已经在屏幕上完美运行了,但是我希望它可以在不同的平台上工作(仅包括-webkit-).当我重新调整尺寸时,拖拉机是流动的,但轮子不是.我怎样才能让它们一起调整？ <body><div class="container"> <div class="tractor"> <img src="img/tractor-700px.png" alt="t 我试图让拖拉机在屏幕上移动.我已经在屏幕上完美运行了,但是我希望它可以在不同的平台上工作(仅包括-webkit-).当我重新调整尺寸时,拖拉机是流动的,但轮子不是.我怎样才能让它们一起调整？

<body><div >    <div >        <img src="img/tractor-700px.png" alt="tractor">    </div>    <div >        <div >            <img src="img/b_wheel.png">        </div>        <div >            <img src="img/f_wheel.png">        </div>    </div></div>

这是我的主要CSS：

.tractor {   wIDth: 380px;   position: absolute;   top: 40%;   left: -5%;}.tractor img {    wIDth: 100%;}.tractor::after {    content: "";    display: block;    wIDth: 120px;    height: 120px;    background: url('img/steam.png') no-repeat;    background-size: 120px;    position: absolute;    top: -37%;    left: 56%;    opacity: 0;}.f_wheel {;    wIDth: 125px;    position: absolute;    top: 66.5%;    left: 13%;}.f_wheel img {    wIDth: 100%;}.b_wheel {    wIDth: 190px;    position: absolute;    top: 58.8%;    left: -7%;}.b_wheel img {    wIDth: 100%;}

和动画的CSS：

.tractor {    -webkit-animation: tractor-bounce 3s ease-in-out infinite,tractor-go 10s ease-in-out forwards;}.tractor::after {    -webkit-animation: steam 4s 2s infinite;}.f_wheel,.b_wheel {    -webkit-animation: wheel-spin 10s ease-in-out forwards;}.f_wheel {    -webkit-animation: front-wheel-go 10s ease-in-out forwards,wheel-spin 10s ease-in-out forwards;}.b_wheel {    -webkit-animation: back-wheel-go 10s ease-in-out forwards,wheel-spin 10s ease-in-out forwards;}/*  Keyframes - WebKit only------------------------------------------ */@-webkit-keyframes tractor-bounce {    50%  { -webkit-transform: rotate(-5deg) translateY(-3px); }}@-webkit-keyframes tractor-go {    100% { left: 70%; }}@-webkit-keyframes steam {    40%  { opacity: .8; }    60%  { opacity: 1; }    100% { -webkit-transform: translate(-15%,-35%) rotateZ(20deg); }}@-webkit-keyframes wheel-spin {    0% { -webkit-transform: translateX(0px) rotate(50deg); }    100%   { -webkit-transform: translateX(0px) rotate(480deg); }}@-webkit-keyframes front-wheel-go {    100%   { left: 88%; }}@-webkit-keyframes back-wheel-go {    100%   { left: 68.5%; }}

Jsfiddle将其展示在行动中：http://jsfiddle.net/0j5L92vh/1/

[PS – 这是我在这里发表的第一篇文章,非常感谢！如果我需要包含其他任何内容,请告诉我.]

解决方法我找到了解决问题的方法.

我利用你提供的.container div来保持一切相对的位置
你的拖拉机图像.您可以看到所做的CSS代码中的更改
它适用于非webkit浏览器.它不适用于9号之前的Internet Explorer版本.

我所做的改变只针对你的CSS.

Jsfiddle：http://jsfiddle.net/larryjoelane/h324j6u6/113/

CSS：

.container{    wIDth: 380px;        position: relative;    /*bind the animation and set its propertIEs*/    -webkit-animation: tractor 10s linear 0s; /* Chrome,Safari,Opera */    animation: tractor 10s linear 0s;}/*bind the wheel-spin animation*/.f_wheel,.b_wheel {    -webkit-animation: wheel-spin 10s ease-in-out forwards;    animation: wheel-spin 10s ease-in-out forwards;}/*bind the tractor bounce-animation*/.tractor {    -webkit-animation: tractor-bounce 3s ease-in-out infinite,tractor-go 10s ease-in-out forwards;    animation: tractor-bounce 3s ease-in-out infinite,tractor-go 10s ease-in-out forwards;}.tractor img{    wIDth:100%;}.b_wheel {    wIDth: 190px;    position: relative;    top: -120px;    left: -7%;}.b_wheel img {    wIDth: 100%;}.f_wheel{    wIDth: 125px;    position:relative;    top: -258px;    left: 65%;}.f_wheel img {    wIDth: 100%;}/* Chrome,Opera */@-webkit-keyframes tractor {    0%   { left:0px; top:0px;}    25%  {left:200px; top:0px;}    50%  {left:400px; top:0px;}    75%  {left:600px; top:0px;}    100% {left:800px; top:0px;}}/* Standard Syntax */@keyframes tractor {     0%   { left:0px; top:0px;}    25%  {left:200px; top:0px;}    50%  {left:400px; top:0px;}    75%  {left:600px; top:0px;}    100% {left:800px; top:0px;}}/*standard browser animation*/@keyframes wheel-spin{    0% { transform: translateX(0px) rotate(50deg); }    100%   { transform: translateX(0px) rotate(480deg); }    }/*webkit browser animation*/@-webkit-keyframes wheel-spin{    0% { -webkit-transform: translateX(0px) rotate(50deg); }    100%   { -webkit-transform: translateX(0px) rotate(480deg); }}/*webkit tractor-bounce animation*/@-webkit-keyframes tractor-bounce {    50%  { -webkit-transform: rotate(-5deg) translateY(-3px); }}/*standard tractor-bounce web browser animation*/@keyframes tractor-bounce {    50%  { transform: rotate(-5deg) translateY(-3px); }}

总结

以上是内存溢出为你收集整理的html – CSS车辆动画全部内容，希望文章能够帮你解决html – CSS车辆动画所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/web/1055546.html