Question

对于短信感到抱歉，但我需要一些帮助来创建本网站上显示的效果：

基本上我知道你可以在jQuery中做一个“fadeIn”但我不知道如何在网站上看到它登陆页面的3D效果，我试图深入研究代码和观点，但很困惑。任何帮助或建议将不胜感激。感谢。

Answer 1

没有必要为此使用javascript，它可以在CSS中单独完成，如此处所示。

@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);

body {padding: 0; margin: 0; background-color: #333;}

.container {position: fixed; top: 25%; left: 25%;}

/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
  opacity:0;  /* make things invisible upon start */
  -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}

.fade-in.one {
  -webkit-animation-delay: 0.7s;
  -moz-animation-delay: 0.7s;
  animation-delay: 0.7s;
}

.fade-in.two {
  -webkit-animation-delay: 1.2s;
  -moz-animation-delay:1.2s;
  animation-delay: 1.2s;
}

.fade-in.three {
  -webkit-animation-delay: 1.6s;
  -moz-animation-delay: 1.6s;
  animation-delay: 1.6s;
}

/*---make a basic box ---*/
.box{
  width: 200px;
  height: 200px;
  position: relative;
  margin: 10px;
  float: left;
  border: 1px solid #333;
  background: #999;

}

<div class="container">
  <div class="box fade-in one">
    look at me fade in
  </div>

  <div class="box fade-in two">
    Oh hi! i can fade too!
  </div>

  <div class="box fade-in three">
    Oh hi! i can fade three!
  </div>
</div>

或者您可以使用javascript来激活CSS动画。您可以在此处查看类似的示例http://www.virginholidays.co.uk/wonderlist

Answer 2

您可以使用wow effects这是一个完整的库来创建CSS动画

你可以使用数据 - 哇 - 持续时间数据 - 哇 - 延迟下载css和js文件，你马上就可以了。

为文本创建淡入效果（包括示例）

2 个答案: