js实现ascii字符画轮换效果代码

代码语言:html

所属分类:布局界面

代码描述:js实现ascii字符画轮换效果代码

代码标签: 字符 轮换 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<html>
<head>
    <style>
        body {
            background: #222222;
        }

        .morph-section {
            width: 400px;
            height: 400px;

            position: absolute;
            left: 50%;
            top: 50%;
            margin-top: -200px;
            margin-left: -200px;
            font-family: monospace;
            color: #fff;
        }

        .info {
            font-family: monospace;
            position: absolute;
            line-height: 20px;
            font-size: 14px;
            left: 20px;
            bottom: 20px;
            color: #fff;
        }

        a {
            color: #f9f9f9;
        }
    </style>

</head>
<body>
    <pre class="morph-section">




        ____
        o8%8888,
        o88%8888888.
        8'-    -:8888b
        8'         8888
        d8.-=. ,==-.:888b
        &gt;8 `~` :`~' d8888
        88         ,88888
        88b. `-~  ':88888
        888b ~==~ .:88888
        88888o--:':::8888
        `88888| :::' 8888b
        8888^^'       8888b
        d888           ,%888b.
        d88%            %%%8--'-.
        /88:.__ ,       _%-' ---  -
        '''::===..-'   =  --.  `





    </pre><script>
        /**
        * Ascii Morph
        */

        var AsciiMorph = (function() {

            'use strict';

            var element = null;
            var canvasDimensions = {};

            var renderedData = [];
            var framesToAnimate = [];
            var myTimeout = null;

            /**
            * Utils
            */

            function extend(t.........完整代码请登录后点击上方下载按钮下载查看

网友评论0