Question

我正在为客户建立目标网页。他们的标志以公司口号为中心，目前口号在页面加载时淡出。

他们现在在问这个标语是否可以被动画看起来好像是在写出来而不是渐渐消失。有没有人知道如何实现这种效果？我很难过。

非常感谢任何帮助。

HTML：

<div class="image-wrapper">
 <a href="home.html">
  <img src="images/landing_logo2.png" />
 </a>
 <div id="test">
  <p>enter the sunshine state</p>
 </div>
</div>

CSS：

div.image-wrapper {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}

.image-wrapper img {
display: block;
}

#test {
position: absolute;
top: 100%;
width: 100%;
}

#test p {
width: 100%;
font-family: segoe;
font-size: 18px;
text-align: center;
color: #fff;
margin-top: -40px;
-webkit-animation: fadein 8s; /* Safari, Chrome and Opera > 12.1 */
   -moz-animation: fadein 8s; /* Firefox < 16 */
    -ms-animation: fadein 8s; /* Internet Explorer */
     -o-animation: fadein 8s; /* Opera < 12.1 */
        animation: fadein 8s;
}

@keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}

我附上了一个JSFiddle：

https://jsfiddle.net/1r3fuk27/

Answer 1

不使用外部库，您只需使用此方法即可。

var slogan = "enter the sunshine state";
for (var i = 0; i < slogan.length; i++) {
  (function(i) {
    setTimeout(function() {
      $('#test > p').text(slogan.substring(0, i + 1));
    }, 100 * i);
  }(i));
}

@font-face {
  font-family: segoe;
  src: url(fonts/segoesc.ttf);
}
div.image-wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
.image-wrapper img {
  display: block;
}
#test {
  position: absolute;
  top: 100%;
  width: 100%;
  text-align: center;
}
#test p {
  width: 100%;
  font-family: segoe;
  font-size: 18px;
  text-align: center;
  color: #000;
  margin-top: -40px;
  -webkit-animation: fadein 8s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 8s;
  /* Firefox < 16 */
  -ms-animation: fadein 8s;
  /* Internet Explorer */
  -o-animation: fadein 8s;
  /* Opera < 12.1 */
  animation: fadein 8s;
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Firefox < 16 */

@-moz-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Safari, Chrome and Opera > 12.1 */

@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Internet Explorer */

@-ms-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Opera < 12.1 */

@-o-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="image-wrapper">
  <a href="home.html">
    <img src="http://japesfawcett.com/testsh/images/landing_logo2.png" />
  </a>

  <div id="test">
    <p>enter the sunshine state</p>
  </div>
</div>

如果文字在代码段中不可见here则是小提琴

Answer 2

您可以使用纯JavaScript执行此操作，如下所示 -

public ActionResult ValidateAndSignUp(company newCompany)
{
    if (ModelState.IsValid)
    {
        newCompany.CDTO.File = Request.Files["Logo"];
        if(new CompanyActions().AddCompany(newCompany))
        {
            ViewBag.message = newCompany.CDTO.Message;
            return View(newCompany.CDTO.RedirectTo);
        }
        else
        {
            if (newCompany.CDTO.HasFileError)
            {
                ModelState.AddModelError("Logo", "Invalid File"); 
                return View(newCompany.CDTO.RedirectTo, newCompany);
            }
            else
            {
                ViewBag.error = newCompany.CDTO.Error;
                return View(newCompany.CDTO.RedirectTo);
            }
        }
    }
    else
    {
        newCompany.CDTO.Countries = new DropDownLists().GetAllCountries();
        return View("signUp", newCompany);
    }
}

JSFiddle

CSS Text写出动画

2 个答案: