文字闪烁变换

2018-02-27 11:08:09来源:http://570109268.iteye.com作者:青春..荒唐人点击

分享

文字闪烁特效

<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 >    <div >        <h4 >游戏控</h4>        <h1 >程序猿</h1>        <h4 >程序猿</h4>    </div>    <div >        <h4 >书虫</h4>        <h1 >极限极致</h1>        <h4 >程序猿</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>

 

 

 

 

 

 

 

 

 

.

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台