0
데스크탑 PC를 사용할 때 css3 애니메이션 문자가 다른 위치에 있고 가로 방향으로 iphone을 사용할 때 전화가 destop과 같은 풍경이 아닌 이유는 무엇입니까? 여기Css 애니메이션이 모바일 및 PC 바탕 화면에서 다른 위치에 있음
은 그래서 당신의 절대 위치 항목이 결코하여 될 예정되지 않은, 거의 같은 애니메이션
<!DOCTYPE html>
<head>
<title>Basket Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
* {
box-sizing: border-box;
-webkit-box-sizing
-moz-box-sizing: border-box;
}
html, body{
height: 100%;
width:100%;
overflow: hidden;
margin: 0;
}
.grass, .sky, .road{
position: relative;
}
.sky{
height: 40%;
background: skyblue;
}
.grass{
height: 30%;
background: seagreen;
}
.road{
height: 30%;
background: dimgrey;
box-sizing: border-box;
border-top: 10px solid grey;
border-bottom: 10px solid grey;
width: 100%;
}
.lines{
box-sizing: border-box;
border: 5px dashed #fff;
height: 0px;
width: 100%;
position: absolute;
top: 45%;
}
.horror2 {
position: absolute;
top: -90px;
left: 0px;
animation: drive 3s both 2s infinite linear,
jump 0.3s 4s ease;
}
.bike2{
position:absolute;
top: -7px;
left:0px;
animation: drive 5s;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-timing-function:linear;
}
.cloud{
position: absolute;
}
.cloud:nth-child(1){
width: 200px;
top: 120px;
opacity: 0.5;
animation: wind 80s linear infinite reverse;
}
.cloud:nth-child(2){
width: 300px;
top: 0px;
animation: wind 50s linear infinite reverse;
}
@keyframes drive{
from{ transform: translateX(-200px)}
to{ transform: translateX(1600px)}
}
@keyframes wind{
from{left: -300px}
to{left: 100%}
}
@keyframes jump{
0% { top: -40px}
50% { top: -100px}
100%{ top: -40px}
}
@media only screen and (orientation: landscape) {
html, body{
height: 100%;
width:100%;
overflow: hidden;
margin: 0;
}
.grass, .sky, .road{
position: relative;
}
.sky{
height: 40%;
background: skyblue;
}
.grass{
height: 30%;
background: seagreen;
}
.road{
height: 30%;
background: dimgrey;
box-sizing: border-box;
border-top: 10px solid grey;
border-bottom: 10px solid grey;
width: 100%;
}
.lines{
box-sizing: border-box;
border: 5px dashed #fff;
height: 0px;
width: 100%;
position: absolute;
top: 45%;
}
.horror2 {
position: absolute;
top: -40px;
left: 0px;
animation: drive 3s both 2s infinite linear,
jump 0.3s 4s ease;
}
.bike2{
position:absolute;
top: 80px;
left:0px;
animation: drive 5s;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-timing-function:linear;
}
.cloud{
position: absolute;
}
.cloud:nth-child(1){
width: 200px;
top: 120px;
opacity: 0.5;
animation: wind 80s linear infinite reverse;
}
.cloud:nth-child(2){
width: 300px;
top: 0px;
animation: wind 50s linear infinite reverse;
}
@keyframes drive{
from{ transform: translateX(-200px)}
to{ transform: translateX(1600px)}
}
@keyframes wind{
from{left: -300px}
to{left: 100%}
}
@keyframes jump{
0% { top: -40px}
50% { top: -100px}
100%{ top: -40px}
}}
</style>
<body>
<div class="sky">
<img class="cloud" src="http://www.cc.puv.fi/~e1401168/css3animation/img/cloud.png">
<img class="cloud" src="http://www.cc.puv.fi/~e1401168/css3animation/img/cloud.png">
</div>
<div class="grass"></div>
<div class="road">
<div class="lines"></div>
\t <img class="horror2" src="http://www.cc.puv.fi/~e1401168/css3animation/img/horror2.png">
\t <img class="bike2" src="http://www.cc.puv.fi/~e1401168/css3animation/img/bike2.png">
</div>
</body>
</html>
고정 값과 백분율 값을 사용하므로 이유가 될 수 있습니다. –