我在我的网站上试过文字滑动动画www.vaatasmart.com
它在平板电脑和桌面浏览器中播放良好。但它会在移动浏览器的左上角。我无法从移动浏览器观看动画。
HTML:
<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
<div class="content">
<div class="visible">
<p>
SM
</p>
<ul>
<li>ART</li>
<li>allART</li>
</ul>
</div>
</div>
CSS:
#collection-54800bb4e4b0ff750b0f782c{
body {
width:50%;
height:50%;
position:fixed;
background-color:#F2F2F2;
}
.content {
width:537px;
font-size:62px;
line-height:80px;
font-family:'Muli';
color:#FE642E;
height:100px;
position:absolute;
top:50%;
left:50%;
margin-top:-40px;
margin-left:130px;
}
.visible {
float:left;
font-weight:800;
overflow:hidden;
height:80px;
}
p {
display:inline;
float:left;
margin:0;
}
ul {
margin-top:0;
padding-left:101px;
text-align:left;
list-style:none;
animation:6s linear 0s normal none infinite change;
-webkit-animation:6s linear 0s normal none infinite change;
-moz-animation:6s linear 0s normal none infinite change;
-o-animation:6s linear 0s normal none infinite change;
}
ul li {
line-height:80px;
margin:0;
}
@-webkit-keyframes opacity {
0% {opacity:0;}
50% {opacity:1;}
100% {opacity:0;}
}
@keyframes opacity {
0% {opacity:0;}
50% {opacity:1;}
100% {opacity:0;}
}
@-webkit-keyframes change {
0% {margin-top:0;}
15% {margin-top:0;}
25% {margin-top:-40px;}
35% {margin-top:-60px;}
45% {margin-top:-80px;}
55% {margin-top:-80px;}
65% {margin-top:-80px;}
75% {margin-top:-60px;}
85% {margin-top:-40px;}
100% {margin-top:0;}
}
@keyframes change {
0% {margin-top:0;}
15% {margin-top:0;}
25% {margin-top:-40px;}
35% {margin-top:-60px;}
45% {margin-top:-80px;}
55% {margin-top:-80px;}
65% {margin-top:-80px;}
75% {margin-top:-60px;}
85% {margin-top:-40px;}
100% {margin-top:0;}
}
}
最佳答案
我已经检查了你的代码，你可以使用Media Queries来解决这个问题，在CSS下面应用，并让它正常显示；
@media all and (max-width: 658px) {
.content { margin-left: -150px; }
}
尝试将它应用于您在移动设备上可能拥有的其他错位元素。 希望对您有所帮助。
关于html - 移动浏览器的文本动画营养问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31956005/