Question

我在css中找到了这些响应设备的一个很棒的代码笔，它随着屏幕大小而变化，对于我的课程，我试图操纵它们来改变计时器。

这就是我所说的 - http://codepen.io/hariawan/pen/mjbwy。

我基本上是想让它在不改变屏幕大小的情况下通过不同的设备动画进行旋转，我想知道我是否可以用纯粹的CSS进行此操作。

我的第一个想法是用javascript交换类，使用setTimeout控制交换。我想知道这样的事情是否可以纯粹用css完成？也许某种非常慢的关键帧会遍历所有这些关键帧？

我的第一个想法是这样的：

setTimeout(function() {
  // change 1
     setTimeout(function() {
       // change 2
     }, 5000);
  }, 5000);

等等，然后不可避免地链接回第一个设备。我不认为这种方法是最好的方法而且我认为如果我能完全用css完成它会是最容易的。任何见解都会非常有帮助。谢谢你的阅读！

Answer 1

缩短版本 - http://jsfiddle.net/n0L3eouq/

timeout(0);
function timeout(ind) {
  var classes = ['desk', 'laptop', 'tablet', 'phone'];
  $('#device').removeClass(classes.join(' '))
              .addClass(classes[ind % classes.length]);
  setTimeout(function () { timeout(ind + 1); }, 4000);
}

Answer 2

如果有人有兴趣，根据@ gion_13的回答，我做了一个javascript解决方案 -

在这里看到：http://codepen.io/ajmajma/pen/JBrtw

将媒体查询样式交换到自己的类并添加循环javascript超时，如此

   timeout();
function timeout() {

setTimeout(function () {

  if($("#device").hasClass("desk")){
       $("#device").removeClass("desk");
       $("#device").addClass("laptop");
     }else if($("#device").hasClass("laptop")){
       $("#device").removeClass("laptop");
       $("#device").addClass("tablet");
    }else if($("#device").hasClass("tablet")){
       $("#device").removeClass("tablet");
       $("#device").addClass("phone");
     }else if($("#device").hasClass("phone")){
       $("#device").removeClass("phone");
      $("#device").addClass("desk");
     }

    timeout();
}, 4000);
}

css通过不同的动画旋转（循环？）

2 个答案: