动画阴影css3？

Question

我想创建一个css动画： http://line25.com/wp-content/uploads/2010/text-shadow/demo/index.html#boardgame 但阴影从屏幕顶部下降并落入位置......这可能吗？如果不是，那是实现这种效果的最佳方式。

#boardgame h1 {
    text-align: center;
    margin: 200px auto;
    font-family: "League-Gothic", Courier;
    font-size: 200px; text-transform: uppercase;
    color: #fff;
    text-shadow: 10px 10px 0 #ffd217, 20px 20px 0 #5ac7ff, 30px 30px 0 #ffd217, 40px 40px 0 #5ac7ff;
}

Answer 1

您可以在伪元素上设置文本阴影，并为其设置动画：

body {
    background-color: lightblue;
}
h1#boardgame {
    text-align: center;
    margin: 100px auto;
    font-family: "League-Gothic", Courier;
    font-size: 200px; text-transform: uppercase;
    color: #fff;
    position: relative;
}

h1:after {
    position: absolute;
    content: "My header";
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    color: transparent;
    text-shadow: 10px 10px 0 #ffd217, 20px 20px 0 #5ac7ff, 30px 30px 0 #ffd217, 40px 40px 0 #5ac7ff;
    z-index: -1;
    -webkit-animation: slide 5s;
    animation: slide 5s;
}

@-webkit-keyframes slide {
    0% {-webkit-transform: translateY(-100%);}
    100% {-webkit-transform: translateY(0%);}
}
@keyframes slide {
    0% {transform: translateY(-100%);}
    100% {transform: translateY(0%);}
}

fiddle

alternate fiddle

Answer 2

根据这个答案，有可能：https://stackoverflow.com/a/9540707/451962

#box {
    width: 50px;
    height: 200px;
    -webkit-transition: all 1s linear;
    -o-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -kthtml-transition: all 1s linear;
    transition: all 1s linear;
}

.shadow {
    -webkit-box-shadow: 0px 0px 4px 2px #D50E0E;
    -moz-box-shadow: 0px 0px 4px 2px #D50E0E;
    box-shadow: 0px 0px 4px 2px #D50E0E;
    -webkit-transition: all 1s linear;
    -o-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -kthtml-transition: all 1s linear;
    transition: all 1s linear;
}

JS小提琴demo。