js实现canvas文字雨矩阵背景搜索框效果代码-html代码-BFW代码库

代码语言：html
所属分类：搜索
代码描述：js实现canvas文字雨矩阵背景搜索框效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            overflow: hidden;
        }
    </style>
    <style>
        /* cyrillic */
        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden;
            font-family: 'Rubik Mono One', sans-serif;
            background: #22292C;
        }

        svg {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 1;
        }
        #d {
            position: absolute;
            text-align: center;
            top: 20%;
            left: 50%;
            transform: translateX(-50%);
            width: 500px;

        }
        button {
            z-index: 2;
            height: 26px;
            width: 100px;
            box-shadow: 0px 0px 0px 1px #2868c8;
            color: #fff;
            font-size: 15px;
            letter-spacing: 1px;
            background: #3385ff;
            border-bottom: 1px solid #2d78f4;
            outline: medium;
            border: 1px solid #2868c8;
        }

        .input {
            z-index: 2;
            font-size: 20px;
            font-family: helvetica, sans-serif;
            background: none;
            border: 1px solid #ddd;
            color: #eee;
        }

        .text, .offscreen-text {
            width: 100%;
            top: 50%;
            transform: translateY(-50%);
            display: block;
            position: absolute;
            margin: 0;
        }

        .offscreen-text {
            text-align: center;
            top: -9999px;
        }

        .text span {
            position: absolute;
        }

        .webdesigntuts-workshop {

            height: 100%;
            width: 100%;
        }

        .webdesigntuts-workshop:before,
        .webdesigntuts-workshop:after {
            content: '';
            display: block;
            height: 0px;
            left: 50%;
            margin: 0 0 0 -400px;

            width: 800px;
        }

        .webdesigntuts-workshop:before {
            background: #444;
            background: -webkit-linear-gradient(left, #151515, #444, #151515);
            background: -moz-linear-gradient(left, #151515, #444, #151515);
            background: -o-linear-gradient(left, #151515, #444, #151515);
            background: -ms-linear-gradient(left, #151515, #444, #151515);
            background: linear-gradient(left, #151515, #444, #151515);
            top: 192px;
        }

        .webdesigntuts-workshop:after {
            background: #000;
            background: -webkit-linear-gradient(left, #151515, #000, #151515);
            background: -moz-linear-gradient(left, #151515, #000, #151515);
            background: -o-linear-gradient(left, #151515, #000, #151515);
            background: -ms-linear-gradient(left, #151515, #000, #151515);
            background: linear-gradient(left, #151515, #000, #151515);
            top: 191px;
        }

        .webdesigntuts-workshop span {
            background: #111;
            background: -webkit-linear-gradient(#1b1b1b, #111);
            background: -moz-linear-gradient(#1b1b1b, #111);
            background: -o-linear-gradient(#1b1b1b, #111);
            background: -ms-linear-gradient(#1b1b1b, #111);
            background: linear-gradient(#1b1b1b, #111);
            border: 1px solid #000;
            border-radius: 5px;
            box-shadow: inset 0 0 0 1px #272727;
            display: inline-block;
            font-size: 0px;
            margin: 50% auto 0;
            padding: 20px;

            z-index: 1;
        }

        .webdesigntuts-workshop input {
            background: #222;
            background: -webkit-linear-gradient(#333, #222);
            background: -moz-linear-gradient(#333, #222);
            background: -o-linear-gradient(#333, #222);
            background: -ms-linear-gradient(#333, #222);
            background: linear-gradient(#333, #222);
            border: 1px solid #444;
            border-radius: 5px 0 0 5px;
            box-shadow: 0 2px 0 #000;
            color: #888;
            display: block;
            float: left;
            font-family: 'Cabin', helvetica, arial, sans-serif;
            font-size: 13px;
            font-weight: 400;
            height: 40px;
            margin: 0;
            padding: 0 10px;
            text-shadow: 0 -1px 0 #000;
            width: 200px;
        }

        .ie .webdesigntuts-workshop input {
            line-height: 40px;
        }

        .webdesigntuts-workshop input::-webkit-input-placeholder {
            color: #888;
        }

        .webdesigntuts-workshop input:-moz-placeholder {
            color: #888;
        }

        .webdesigntuts-workshop input:focus {
            -webkit-animation: glow 800ms ease-out infinite alternate;
            -moz-animation: glow 800ms ease-out infinite alternate;
            -o-animation: glow 800ms ease-out infinite alternate;
            -ms-animation: glow 800ms ease-out infinite alternate;
            animation: glow 800ms ease-out infinite alternate;
            background: #222922;
            background: -webkit-linear-gradient(#333933, #222922);
            background: -moz-linear-gradient(#333933, #222922);
            background: -o-linear-gradient(#333933, #222922);
            background: -ms-linear-gradient(#333933, #222922);
            background: linear-gradient(#333933, #222922);
            border-color: #393;
            box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
            color: #efe;
            outline: none;
        }

        .webdesigntuts-workshop input:focus::-webkit-input-placeholder {
            color: #efe;
        }

        .webdesigntuts-workshop input:focus:-moz-placeholder {
            color: #efe;
        }

        .webdesigntuts-workshop button {
            background: #222;
            background: -webkit-linear-gradient(#333, #222);
            background: -moz-linear-gradient(#333, #222);
            background: -o-linear-gradient(#333, #222);
            background: -ms-linear-gradient(#333, #222);
            background: linear-gradient(#333, #222);
            -webkit-box-sizing: content-box;
            -moz-box-sizing: content-box;
            -o-box-sizing: content-box;
            -ms-box-sizing: content-box;
            box-sizing: content-box;
            border: 1px solid #444;
            border-left-color: #000;
            border-radius: 0 5px 5px 0;
            box-shadow: 0 2px 0 #000;
            color: #fff;
            display: block;
            float: left;
            font-family: 'Cabin', helvetica, arial, sans-serif;
            font-size: 13px;
            font-weight: 400;
            height: 38px;
            line-height: 38px;
            margin: 0;
            padding: 0;
            position: relative;
            text-shadow: 0 -1px 0 #000;
            width: 80px;
        }

        .webdesigntuts-workshop button:hover,
        .webdesigntuts-workshop button:focus {
            background: #292929;
            background: -webkit-linear-gradient(#393939, #292929);
            background: -moz-linear-gradient(#393939, #292929);
            background: -o-linear-gradient(#393939, #292929);
            background: -ms-linear-gradient(#393939, #292929);
            background: linear-gradient(#393939, #292929);
            color: #5f5;
            outline: none;
        }

        .webdesigntuts-workshop button:active {
            background: #292929;
            background: -webkit-linear-gradient(#393939, #292929);
            background: -moz-linear-gradient(#393939, #292929);
            background: -o-linear-gradient(#393939, #292929);
            background: -ms-linear-gradient(#393939, #292929);
            background: linear-gradient(#393939, #292929);
            box-shadow: 0 1px 0 #000, inset 1px 0 1px #222;
            top: 1px;
        }

@-webkit-keyframes glow {
            0% {
                border-color: #393;
                box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
            }
            100% {
                border-color: #6f6;
                box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
            }
        }

@-moz-keyframes glow {
            0% {
                border-color: #393;
                box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
            }
            100% {
                border-color: #6f6;
                box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
            }
        }

@-o-keyframes glow {
            0% {
                border-color: #393;
                box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
            }
            100% {
                border-color: #6f6;
                box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
            }
        }

@-ms-keyframes glow {
            0% {
                border-color: #393;
                box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
            }
            100% {
                border-color: #6f6;
                box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
            }
        }

@keyframes glow {
            0% {
                border-color: #393;
                box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
            }
            100% {
                border-color: #6f6;
                box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
            }
        }

    </style>
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script>
        function search() {
            window.open("http://www.baidu.com/s?wd="+$("#input").val());
        }
        document.onkeydown = function(event) {
            var e = event || window.event || arguments.callee.caller.arguments[0];
            if (e && e.keyCode == 13) {
                search();
            }
        };
    </script>
        <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
</head>

<body>
    <canvas id="canvas" width="1280" height="1024"> 您的浏览器不支持canvas标签，请您更换浏览器 </canvas>
    <script>

        var canvas = document.getElementById("canvas");
        var can = canvas.getContext("2d");
        var s = window.screen;
        var w = canvas.width = s.width;
        var h = canvas.height = s.height;

        can.fillStyle = color2();

        var words = Array(256).join("1").split("");

        setInterval(draw, 50);

        function draw() {
            can.fillStyle = 'rgba(0,0,0,0.05)';
            can.fillRect(0, 0, w, h);
            can.fillStyle = color2();
            words.map(function(y, n) {
                text = String.fromCharCode(Math.ceil(65+Math.random()*57));
                x = n*10;
                can.fillText(text, x, y)
                words[n] = (y > 758 + Math.random()*484 ? 0: y+10);
            });
        }

        function color1() {
            var colors = [0,
                1,
                2,
                3,
                4,
                5,
                6,
                7,
                8,
                9,
                'a',
                'b',
                'c',
                'd',
                'e',
                'f'];
            var color = "";
            for (var i = 0; i < 6; i++) {
                var n = Math.ceil(Math.random()*15);
                color += "" + colors[n];
            }
            return '#'+color;
        }

        function color2() {
            var color = Math.ceil(Math.random()*16777215).toString(16);
            while (color.length < 6) {
                color = '0'+color;
            }
            return '#'+color;
        }
        function color3() {
            return "#" + (function(color) {
                return new Array(7-color.length).join("0")+color;
            })((Math.random()*0x1000000 << 0).toString(16))
        }
        var _createClass = function () {
            function defineProperties(target, props) {
                for (var i = 0; i < props.length; i++) {
                    var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descrip.........完整代码请登录后点击上方下载按钮下载查看