文字闪烁变换

文字闪烁特效
<html>
<head>
    <meta charset="UTF-8">
    <style>* {
        padding: 0;
        margin: 0;
    }

    html {
        background: #000;
    }

    body {
        background: #053d4e;
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom right, rgba(6, 0, 255, 0.3), rgba(255, 0, 0, 0.3));
    }

    .container {
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        width: 100%;
    }

    .right {
        float: left;
        color: #FFF;
        width: 50%;
        text-align: right;
    }

    .left {
        float: left;
        color: #7a7a7a;
        width: 50%;
        text-align: right;
        -moz-transform: scale(-1, 1);
        -webkit-transform: scale(-1, 1);
        -o-transform: scale(-1, 1);
        -ms-transform: scale(-1, 1);
        transform: scale(-1, 1);
        margin-top: 40px;
    }

    h1,
    h4 {
        -webkit-transition: opacity .25s;
        -moz-transition: opacity .25s;
        -o-transition: opacity .25s;
        -ms-transition: opacity .25s;
        transition: opacity .25s;
        font-family: "FARCRY", Verdana, Tahoma;
    }

    h1 {
        font-size: 8vw;
    }

    h4 {
        font-size: 4vw;
    }

    h4:first-child {
        margin-bottom: -2vw;
    }

    h4:last-child {
        margin-top: -1.7vw;
    }</style>
</head>
<body>
<div class="container">
    <div class="right">
        <h4 class="randoms" style="opacity: 1;">游戏控</h4>
        <h1 class="randoms" style="opacity: 0.1;">程序猿</h1>
        <h4 class="randoms" style="opacity: 1;">程序猿</h4>
    </div>
    <div class="left">
        <h4 class="randoms" style="opacity: 0.1;">书虫</h4>
        <h1 class="randoms" style="opacity: 0.1;">极限极致</h1>
        <h4 class="randoms" style="opacity: 1;">程序猿</h4>
    </div>
</div>
<script type="text/javascript">var words = [, "科技控", "书虫", "街舞", "嘻哈", "果粉", "游戏控",
    "音乐控", "程序猿", "Geek", "标签",, "就是我", "星战迷", "码农",];

window.addEventListener("load", function () {
    var randoms = window.document.getElementsByClassName("randoms");
    for (i = 0; i < randoms.length; i++)
        changeWord(randoms[i]);
}, false);

function changeWord(a) {
    a.style.opacity = '0.1';
    a.innerHTML = words[getRandomInt(0, words.length - 1)];
    setTimeout(function () {
        a.style.opacity = '1';
    }, 425);
    setTimeout(function () {
        changeWord(a);
    }, getRandomInt(500, 1000));
}


function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}</script>
</body>
</html>
猜你喜欢
