master

分支 (1)

管理

管理

master

yanzhengma
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>随机字符、公式计算、顺序点选、空间点选、面积、图片对象识别、文字识别、阅读理解、滑块、拼图、图片旋转角度集合</title>
    <style>
        body {
            background: #000;
        }

        .header {
            width: 1000px;
            margin: 0 auto;
        }
        .header p.p1 {
            width: 60px;
            height: 60px;
            margin: 0 auto;
            margin-top: 110px;
        }
        .header p.p2 {
            height: 40px;
            margin: 0 auto;
            text-align: center;
            line-height: 40px;
            margin-top: 10px;
            font-size: 20px;
            color: #fec468;
        }
        .header p.p3 {
            margin: 0 auto;
            text-align: center;
            line-height: 40px;
            font-size: 28px;
            color: #bddde6;
        }

        .contain {
            /*width: 1210px;*/
            margin: 0 auto;
            margin-top: 80px;
            height: 400px;
        }

        .border {
            width: 400px;
            height: 370px;
            background-color: red;
            float: left;
            margin: 40px;
            transform: translate(0%, 0%);
            border: 1px solid #0E273D;
            /*background: #444;*/
        }

        .border > div {
            position: absolute;
            width: 100%;
            height: 100%;
            transition: .5s;
        }

        .border:hover > .border-top-bottom {
            transform: rotateY(0);
        }

        .border:hover > .border-left-right {
            transform: rotateX(0);
        }

        .border-top-bottom {
            border: 1px solid transparent;
            border-top: 1px solid #57daff;
            border-bottom: 1px solid #57daff;
            transform: rotateY(90deg);
        }

        .border-left-right {
            border: 1px solid transparent;
            border-left: 1px solid #57daff;
            border-right: 1px solid #57daff;
            transform: rotateX(90deg);
        }

        .border_div {
            width: 400px;
            height: 370px;
        }
        .border_div_top {
            width: 400px;
            height: 300px;
            background-color: #fff;
        }
        .img {
            width: 100%;
            height: 100%;
        }
        .border_div_bottom {
            width: 400px;
            height: 70px;
            color: #57daff;
            background-color: #0E273D;
            line-height: 70px;
            text-align: center;
            font-weight: 600;
        }

    </style>

</head>
<body>
    <div class="header">
        <p class="p2"></p>
        <p class="p3">随机字符、滑块、拼图、图片旋转角度、文字顺序点选、公式计算、图片对象识别合集</p>
        <p class="p2">——by XiongZe 演示</p>
    </div>

    <div class="contain" style="width:1600px;">
        <a href="data/12verify/index.html" target="_blank">
            <div class="border">
                <div class="border_div">
                    <div class="border_div_top">
                        <img class="img" src="images/12.png" />
                    </div>
                    <div class="border_div_bottom">jQuery文字点选验证码</div>
                </div>
                <div class="border-top-bottom"></div>
                <div class="border-left-right"></div>
            </div>
        </a>

        <a href="data/12verify/index.html" target="_blank">
            <div class="border">
                <div class="border_div">
                    <div class="border_div_top">
                        <img class="img" src="images/13.png" />
                    </div>
                    <div class="border_div_bottom">jQuery数字运算验证</div>
                </div>
                <div class="border-top-bottom"></div>
                <div class="border-left-right"></div>
            </div>
        </a>

        <a href="http://demo.deanhan.cn/12306/" target="_blank">
            <div class="border">
                <div class="border_div">
                    <div class="border_div_top">
                        <img class="img" src="images/14.png" />
                    </div>
                    <div class="border_div_bottom">仿12306图片验证(理论效果，暂无demo)</div>
                </div>
                <div class="border-top-bottom"></div>
                <div class="border-left-right"></div>
            </div>
        </a>

        <a href="data/1jqueryCode/index.html" target="_blank">
            <div class="border">
                <div class="border_div">
                    <div class="border_div_top">
                        <img class="img" src="images/1.png" />
                    </div>
                    <div class="border_div_bottom">jQuery canvas验证码</div>
                </div>
                <div class="border-top-bottom"></div>
                <div class="border-left-right"></div>
            </div>
        </a>

        <a href="data/2jquery-gesturepw/index.html" target="_blank">
            <div class="border">
                <div class="border_div">
                    <div class="border_div_top">
                        <img class="img" src="images/2.png" />
                    </div>
                    <div class="border_div_bottom">jQuery手势密码验证</div>
                </div>
                <div class="border-top-bottom"></div>
                <div class="border-left-right"></div>
            </div>
        </a>

        <a href="data/3jqRotateVerify/index.html" target="_blank">
            <div class="border">
                <div class="border_div">
                    <div class="border_div_top">
                        <img class="img" src="images/3.png" />
                    </div>
                    <div class="border_div_bottom">jQuery滑动图片角度（canvas仿baidu）</div>
                </div>
                <div class="border-top-bottom"></div>
                <div class="border-left-right"></div>
            </div>
        </a>

        <a href="data/4jqueryyanzheng/index.html" target="_blank">
            <div class="border">
                <div class="border_div">
                    <div class="border_div_top">
                        <img class="img" src="images/4.png" />
                    </div>
                    <div class="border_div_bottom">jQuery实现文字点击验证</div>
                </div>
                <div class="border-top-bottom"></div>
                <div class="border-left-right"></div>
            </div>
        </a>

        <a href="data/5jigsaw/index.html" target="_blank">
            <div class="border">
                <div class="border_div">
                    <div class="border_div_top">
                        <img class="img" src="images/5.png" />
                    </div>
                    <div class="border_div_bottom">jQuery(canvas)滑动拼图验证</div>
                </div>
                <div class="border-top-bottom"></div>
                <div class="border-left-right"></div>
            </div>
        </a>

        <a href="data/6jqslideImage/index.html" target="_blank">
            <div class="border">
                <div class="border_div">
                    <div class="border_div_top">
                        <img class="img" src="images/6.png" />
                    </div>
                    <div class="border_div_bottom">jQuery滑动拼图验证，支持移动、PC</div>
                </div>
                <div class="border-top-bottom"></div>
                <div class="border-left-right"></div>
            </div>
        </a>

        <a href="data/7jquerydragverify/index.html" target="_blank">
            <div class="border">
                <div class="border_div">
                    <div class="border_div_top">
                        <img class="img" src="images/7.png" />
                    </div>
                    <div class="border_div_bottom">jQuery滑块验证dragverify</div>
                </div>
                <div class="border-top-bottom"></div>
                <div class="border-left-right"></div>
            </div>
        </a>

        <a href="data/8jqueryHkyz/index.html" target="_blank">
            <div class="border">
                <div class="border_div">
                    <div class="border_div_top">
                        <img class="img" src="images/8.png" />
                    </div>
                    <div class="border_div_bottom">jQuery滑动验证</div>
                </div>
                <div class="border-top-bottom"></div>
                <div class="border-left-right"></div>
            </div>
        </a>

        <a href="data/9slideVerify/index.html" target="_blank">
            <div class="border">
                <div class="border_div">
                    <div class="border_div_top">
                        <img class="img" src="images/9.png" />
                    </div>
                    <div class="border_div_bottom">jQuery滑动验证</div>
                </div>
                <div class="border-top-bottom"></div>
                <div class="border-left-right"></div>
            </div>
        </a>

        <a href="data/10jqueryHdyz/index.html" target="_blank">
            <div class="border">
                <div class="border_div">
                    <div class="border_div_top">
                        <img class="img" src="images/10.png" />
                    </div>
                    <div class="border_div_bottom">鼠标拖动滑块通过验证</div>
                </div>
                <div class="border-top-bottom"></div>
                <div class="border-left-right"></div>
            </div>
        </a>

        <a href="data/11jquery_digital_verification/index.html" target="_blank">
            <div class="border">
                <div class="border_div">
                    <div class="border_div_top">
                        <img class="img" src="images/11.png" />
                    </div>
                    <div class="border_div_bottom">jQuery随机数字运算验证</div>
                </div>
                <div class="border-top-bottom"></div>
                <div class="border-left-right"></div>
            </div>
        </a>


</div>

</body>
</html>