CSS based Intro

Description

<style>
body {
    background: #000;

}
.magnetic-stage {
    position:relative;
    height:100%;
    background:#050505;
    overflow:hidden;
    display:flex;
    justify-content:center;
    align-items:center;
}


.code-field span {

    position:absolute;

    color:#5ee7ff;

    font-family:monospace;

    opacity:.8;

    animation:
        magnetic 4s infinite;

}

.code-field span:nth-child(1) {
    animation-delay: .3s;
}

.code-field span:nth-child(2) {
    animation-delay: 2.1s;
}

.code-field span:nth-child(3) {
    animation-delay: 1.4s;
}

.code-field span:nth-child(4) {
    animation-delay: 3s;
}

.code-field span:nth-child(1){
    left:10%;
    top:20%;
}

.code-field span:nth-child(2){
    left:80%;
    top:25%;
}

.code-field span:nth-child(3){
    left:15%;
    top:70%;
}

.code-field span:nth-child(4){
    left:75%;
    top:65%;
}

.code-field span:nth-child(5){
    left:50%;
    top:10%;
}

.code-field span:nth-child(6){
    left:30%;
    top:35%;
}

.code-field span:nth-child(7){
    left:85%;
    top:50%;
}

.code-field span:nth-child(8){
    left:20%;
    top:50%;
}


@keyframes magnetic {

    0% {
        opacity:0;
        transform:scale(.5);
    }

    30% {
        opacity:1;
    }

    70% {
        transform:
        translate(0,0)
        scale(1);
    }

    100% {
        opacity:0;
        transform:
        translate(
        0,
        0
        )
        scale(0);
    }
}


.unlimitedscripts-title {

    text-align:center;
    font-family:'arial black';
    opacity:0;

    animation:
    reveal 1.5s 6s forwards;

}


.unlimitedscripts-title h1 {

    color:white;

    font-size:70px;
    font-family: 'arial' !important;
    letter-spacing:14px;

    text-shadow:
    0 0 15px #5ee7ff,
    0 0 40px #008cff;

}


.unlimitedscripts-title p {

    color:#5ee7ff;

    letter-spacing:8px;

}


@keyframes reveal {

    from {
        opacity:0;
        transform:scale(.8);
        filter:blur(15px);
    }

    to {
        opacity:1;
        transform:scale(1);
        filter:blur(0);
    }

}
</style>

<div class="magnetic-stage">

    <div class="code-field">
        <span>01001</span>
        <span>CSS</span>
        <span>&lt;div&gt;</span>
        <span>PHP</span>
        <span>API</span>
        <span>{ }</span>
        <span>0xFF</span>
        <span>&lt;/&gt;</span>
    </div>


    <div class="unlimitedscripts-title">
        <h1>UNLIMITEDSCRIPTS.COM</h1>
        <p>CODE | CREATE | SHARE</p>
    </div>

</div>

Log in to save this script to your favorites.