尝试使用CSS3动画，过滤器和关键帧获得平滑的动画循环

时间：2013-03-11 17:05:10

标签： jquery html5 css3 css-transitions css-animations

我希望模仿此处显示的效果：http://www.yabupushelberg.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>
    &nbsp;
    <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;
}

1 个答案:

答案 0 :(得分：2)

尝试更改

  text-shadow: 0px 0px 15em white;

到

  text-shadow: 0px 0px 5px #000;

获得更好的模糊效果

相关问题
最新问题