0

我想要一个创建这个的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;
}
4

2 回答 2

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%);}
}

小提琴

备用小提琴

于 2013-10-24T19:14:08.103 回答
0

根据这个答案，有可能：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 小提琴演示。

于 2013-10-24T19:03:04.810 回答