请注意,当您加载squareup.com时,左侧的表单会产生动画效果。您如何制作这样的 css3 动画?是否需要 javascript 添加一些类卸载?
谢谢
请注意,当您加载squareup.com时,左侧的表单会产生动画效果。您如何制作这样的 css3 动画?是否需要 javascript 添加一些类卸载?
谢谢
纯 CSS 3 动画将是最好的方法——因为它干净、简单且容易。
但是,较旧的浏览器不支持纯 CSS 3 动画,因此您现在可能最好使用 jQuery(直到更多人支持 CSS 3 动画)。
<script>
$(function(){
// make a basic fadeIn animation
$("#divId").fadeIn();
});
</script>
将 #divId 替换为您的 div id 属性。不要忘记显示:无;分区。
对于 jQuery 动画,只需访问http://api.jquery.com/animate/
实际上,在查看源代码之后,这种效果似乎主要是(如果不是全部)CSS3。这是CSS的一个片段:
.square-signup-form h1, .square-signup-form .pricing-prop, .square-signup-form p, .square-signup-form .instructions, .square-signup-form .cards-accepted, .cardcase-signup-form h1, .cardcase-signup-form .pricing-prop, .cardcase-signup-form p, .cardcase-signup-form .instructions, .cardcase-signup-form .cards-accepted {
color: #fff;
-moz-transition: all 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98);
-webkit-transition: all 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98);
-o-transition: all 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98);
transition: all 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98);
}
.square-scene .square-signup-form {
-moz-transform: translate(0pt, 0pt);
opacity: 1;
z-index: 3;
}
.ie8 .square-scene .square-signup-form {
display: block;
}
您可以在https://d1g145x70srn7h.cloudfront.net/static/db447699c3d01e60cd9b8e1e1c721ce8837f22bd/stylesheets/home.css查看完整的 CSS
这是一个更容易阅读的副本:http: //pastebin.com/gHTn1YuA