我希望模仿此处显示的这种效果：http ://www.yabuushelberg.com/
仅使用 CSS3 和/或 HTML5 效果。如果可能，宁愿不使用 javascript。
到目前为止，我已经得到了这个： http: //www.bigideaadv.com/kevin/
任何人都有任何建议。
这是当前的 HTML 标记：
<div id="logo_fadein">
<span>K</span>
<span>e</span>
<span>v</span>
<span>i</span>
<span>n</span>
<span>O</span>
<span>'</span>
<span>S</span>
<span>u</span>
<span>l</span>
<span>l</span>
<span>i</span>
<span>v</span>
<span>a</span>
<span>n</span>
</div>
和CSS：
#logo_fadein {
margin: 25% auto 0 auto;
padding: 0;
width: 320px;
color: #000000;
background: transparent;
font-family: "helvetica neue ultra light", "helvetica neue";
font-size: 1.65em;
font-weight: 100;
text-align: center;
text-transform: uppercase;
}
@-moz-keyframes blackblur {
from { text-shadow: 0px 0px 15em white; color: transparent; }
to { text-shadow: 0px 0px 15em white; color: white; }
}
@-ms-keyframes blackblur {
from { text-shadow: 0px 0px 15em white; color: transparent; }
to { text-shadow: 0px 0px 15em white; color: white; }
}
@-moz-keyframes blackblur {
from { text-shadow: 0px 0px 15em white; color: transparent; }
to { text-shadow: 0px 0px 15em white; color: white; }
}
@-o-keyframes blackblur {
from { text-shadow: 0px 0px 15em white; color: transparent; }
to { text-shadow: 0px 0px 15em white; color: white; }
}
@-webkit-keyframes blackblur {
from { text-shadow: 0px 0px 15em white; -webkit-filter: blur(2px); color: transparent; }
to { text-shadow: 0px 0px 15em white; -webkit-filter: blur(0px); color: white; }
}
@keyframes blackblur {
from { text-shadow: 0px 0px 15em white; -webkit-filter: blur(2px); color: transparent; }
to { text-shadow: 0px 0px 15em white; -webkit-filter: blur(0px); color: white; }
}
#logo_fadein span:nth-of-type(1) {
-moz-animation: blackblur 2s ease-in 1.5s 2 alternate;
-ms-animation: blackblur 2s ease-in 1.5s 2 alternate;
-o-animation: blackblur 2s ease-in 1.5s 2 alternate;
-webkit-animation: blackblur 2s ease-in 1.5s 2 alternate;
animation: blackblur 2s ease-in 1.5s 2 alternate;
}
#logo_fadein span:nth-of-type(2) {
-moz-animation: blackblur 2s ease-in 1.9s 2 alternate;
-ms-animation: blackblur 2s ease-in 1.9s 2 alternate;
-o-animation: blackblur 2s ease-in 1.9s 2 alternate;
-webkit-animation: blackblur 2s ease-in 1.9s 2 alternate;
animation: blackblur 2s ease-in 1.9s 2 alternate;
}
#logo_fadein span:nth-of-type(3) {
-moz-animation: blackblur 2s ease-in 1.75s 2 alternate;
-ms-animation: blackblur 2s ease-in 1.75s 2 alternate;
-o-animation: blackblur 2s ease-in 1.75s 2 alternate;
-webkit-animation: blackblur 2s ease-in 1.75s 2 alternate;
animation: blackblur 2s ease-in 1.75s 2 alternate;
}
#logo_fadein span:nth-of-type(4) {
-moz-animation: blackblur 2s ease-in 1.5s 2 alternate;
-ms-animation: blackblur 2s ease-in 1.5s 2 alternate;
-o-animation: blackblur 2s ease-in 1.5s 2 alternate;
-webkit-animation: blackblur 2s ease-in 1.5s 2 alternate;
animation: blackblur 2s ease-in 1.5s 2 alternate;
}
#logo_fadein span:nth-of-type(5) {
-moz-animation: blackblur 2s ease-in 2s 2 alternate;
-ms-animation: blackblur 2s ease-in 2s 2 alternate;
-o-animation: blackblur 2s ease-in 2s 2 alternate;
-webkit-animation: blackblur 2s ease-in 2s 2 alternate;
animation: blackblur 2s ease-in 2s 2 alternate;
}
#logo_fadein span:nth-of-type(6) {
-moz-animation: blackblur 2s ease-in 1.45s 2 alternate;
-ms-animation: blackblur 2s ease-in 1.45s 2 alternate;
-o-animation: blackblur 2s ease-in 1.45s 2 alternate;
-webkit-animation: blackblur 2s ease-in 1.45s 2 alternate;
animation: blackblur 2s ease-in 1.45s 2 alternate;
}
#logo_fadein span:nth-of-type(7) {
-moz-animation: blackblur 2s ease-in 1.65s 2 alternate;
-ms-animation: blackblur 2s ease-in 1.65s 2 alternate;
-o-animation: blackblur 2s ease-in 1.65s 2 alternate;
-webkit-animation: blackblur 2s ease-in 1.65s 2 alternate;
animation: blackblur 2s ease-in 1.65s 2 alternate;
}
#logo_fadein span:nth-of-type(8) {
-webkit-animation: blackblur 2s ease-in 1.8s 2 alternate;
}
#logo_fadein span:nth-of-type(9) {
-moz-animation: blackblur 2s ease-in 1.45s 2 alternate;
-ms-animation: blackblur 2s ease-in 1.45s 2 alternate;
-o-animation: blackblur 2s ease-in 1.45s 2 alternate;
-webkit-animation: blackblur 2s ease-in 1.45s 2 alternate;
animation: blackblur 2s ease-in 1.45s 2 alternate;
}
#logo_fadein span:nth-of-type(10) {
-moz-animation: blackblur 2s ease-in 1.9s 2 alternate;
-ms-animation: blackblur 2s ease-in 1.9s 2 alternate;
-o-animation: blackblur 2s ease-in 1.9s 2 alternate;
-webkit-animation: blackblur 2s ease-in 1.9s 2 alternate;
animation: blackblur 2s ease-in 1.9s 2 alternate;
}
#logo_fadein span:nth-of-type(11) {
-moz-animation: blackblur 2s ease-in 2s 2 alternate;
-ms-animation: blackblur 2s ease-in 2s 2 alternate;
-o-animation: blackblur 2s ease-in 2s 2 alternate;
-webkit-animation: blackblur 2s ease-in 2s 2 alternate;
animation: blackblur 2s ease-in 2s 2 alternate;
}
#logo_fadein span:nth-of-type(12) {
-moz-animation: blackblur 2s ease-in 1.6s 2 alternate;
-ms-animation: blackblur 2s ease-in 1.6s 2 alternate;
-o-animation: blackblur 2s ease-in 1.6s 2 alternate;
-webkit-animation: blackblur 2s ease-in 1.6s 2 alternate;
animation: blackblur 2s ease-in 1.6s 2 alternate;
}
#logo_fadein span:nth-of-type(13) {
-moz-animation: blackblur 2s ease-in 1.7s 2 alternate;
-ms-animation: blackblur 2s ease-in 1.7s 2 alternate;
-o-animation: blackblur 2s ease-in 1.7s 2 alternate;
-webkit-animation: blackblur 2s ease-in 1.7s 2 alternate;
animation: blackblur 2s ease-in 1.7s 2 alternate;
}
#logo_fadein span:nth-of-type(14) {
-moz-animation: blackblur 2s ease-in 1.8s 2 alternate;
-ms-animation: blackblur 2s ease-in 1.8s 2 alternate;
-o-animation: blackblur 2s ease-in 1.8s 2 alternate;
-webkit-animation: blackblur 2s ease-in 1.8s 2 alternate;
animation: blackblur 2s ease-in 1.8s 2 alternate;
}
#logo_fadein span:nth-of-type(15) {
-moz-animation: blackblur 2s ease-in 1.75s 2 alternate;
-ms-animation: blackblur 2s ease-in 1.75s 2 alternate;
-o-animation: blackblur 2s ease-in 1.75s 2 alternate;
-webkit-animation: blackblur 2s ease-in 1.75s 2 alternate;
animation: blackblur 2s ease-in 1.75s 2 alternate;
}