Question

我正在尝试制作一个欢迎页面，一旦你点击它，就会陷入CSS转换。我无法弄清楚如何使页面掉落，我只能在页面加载时使按钮掉落。

这就是我所拥有的：

<style>
pt-page-rotateFall {
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-animation: rotateFall 1s both ease-in;
     animation: rotateFall 1s both ease-in;} 
a {
    color:black;
      text-align:center;
      -moz-transition:all 1s ease; -webkit-transition:all 1s ease;        transition:all 1s ease;
    -o-transition:all 1s ease; -ms-transition:all 1s ease;
}
a:focus {
0% { -webkit-transform: rotateZ(0deg); }
20% { -webkit-transform: rotateZ(10deg); -webkit-animation-timing-function: ease-out; }
40% { -webkit-transform: rotateZ(17deg); }
60% { -webkit-transform: rotateZ(16deg); }
100% { -webkit-transform: translateY(100%) rotateZ(17deg); }

0% { -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg); }
20% { -webkit-transform: rotateZ(10deg); transform: rotateZ(10deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
40% { -webkit-transform: rotateZ(17deg); transform: rotateZ(17deg); }
60% { -webkit-transform: rotateZ(16deg); transform: rotateZ(16deg); }
100% { -webkit-transform: translateY(100%) rotateZ(17deg); transform: translateY(100%) rotateZ(17deg); }

}

欢迎

Answer 1

你需要Javascript来做到这一点。你可以在Javascript中完全处理动画本身，或者添加一个click事件监听器，并在处理程序中为元素提供类pt-pate-rotateFall。

CSS3动画适用于点击

1 个答案: