404 marquee

by rulokc

HTML

<div class="container">
    <div class="marquee marquee-1">
        <div class="text">
            404
        </div>
    </div>
    <div class="marquee marquee-2">
        <div class="text">
            404
        </div>
    </div>
    <div class="marquee marquee-3">
        <div class="text">
            404
        </div>
    </div>
    <div class="marquee marquee-4">
        <div class="text">
            404
        </div>
    </div>
</div>

CSS

.container {
    width: 100%;
    height: 100px;
}
.marquee {
    width: 100%;
    height: 20px;
    overflow: hidden;
    position: relative:
    border-bottom: 1px solid #fee;
    box-shadow: 0 5px 5px rgba(0,0,0,0.1);
}
.text {
    font-family: monospace;
    font-size: 100px;
    text-align: center;
    position: relative;
}
.marquee-1 .text {
    color: #fcc;
    -webkit-animation: anime1 1s linear;
}
.marquee-2 .text {
    top: -20px;
    color: #f88;
    -webkit-animation: anime1 2s linear;
}
.marquee-3 .text {
    top: -40px;
    color: #f44;
    -webkit-animation: anime1 3s linear;
}
.marquee-4 .text {
    top: -60px;
    color: #f00;
    -webkit-animation: anime1 4s linear;
}
@-webkit-keyframes anime1 {
    from {
        margin-left: -100%;
    }
    to {
        margin-left: 0;
    }
}