Question

我在网站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;}
}  
 }

Answer 1

我已检查过您的代码，您可以使用Media Queries修复该代码，在 CSS 下方应用，并使其显示良好;

@media all and (max-width: 658px) {
    .content { margin-left: -150px; }
}

尝试将其应用于移动设备上可能存在的其他错位元素。希望它有所帮助。

移动浏览器的文本动画食物问题

1 个答案: