将悬停效果转移到Tap for Mobile

时间:2014-03-23 03:32:49

标签: jquery css mobile responsive-design css-transitions

我知道此主题之前已经介绍过这个主题,我试图在来到这里之前从this question实现jQuery,并且它在某些情况下工作但不是全部。事实上,它适用于移动设备,但却停止在桌面上工作。因此,为了得到一些准确的帮助,我将一切都改回原来的状态。

我正在尝试将桌面上的主要悬停效果转换为触摸屏设备上的点击效果。我还不是很熟悉javascript,所以我想找到最简单的方法来解决它。我的效果是一个动作悬停的css动画。这是我的site,这是我现在的动画css代码。

非常感谢您的帮助。

.letter {
transition: -webkit-transform 500ms ease-in-out;
transition: -moz-transform 500ms ease-in-out;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;  

}

.letter div {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;

}

.side-b {   
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);

}

#letter_wrap {
-webkit-perspective:1000px; 
-moz-perspective:1000px;

}

#letter_wrap:hover div.letter {
-webkit-transform: rotateY(-.5turn);
-moz-transform: rotateY(-.5turn);

}

/ - 过渡延迟 - /

#letter_i , #letter_v , #letter_o2{
transition-delay: .1s ;
-moz-transition-delay: .1s ;
-webkit-transition-delay: .1s ;

}

#letter_space , #letter_e , #letter_o{
transition-delay: .2s ;
-moz-transition-delay: .2s ;
-webkit-transition-delay: .2s ;

}

#letter_l , #letter_y {
transition-delay: .3s ;
-moz-transition-delay: .3s ;
-webkit-transition-delay: .3s ;

}

0 个答案:

没有答案