fireworks
/
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/8jQuery/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">HTML5 Canvas庆祝春节过年放烟花动画代码</div>
                </div>
                <div class="border-top-bottom"></div>
                <div class="border-left-right"></div>
            </div>
        </a>


        <a href="data/5jQuery/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">HTML5烟花绽放场景动画</div>
                </div>
                <div class="border-top-bottom"></div>
                <div class="border-left-right"></div>
            </div>
        </a>

		 <a href="data/6jQuery/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">HTML5炫酷喜庆全屏烟花动画特效</div>
                </div>
                <div class="border-top-bottom"></div>
                <div class="border-left-right"></div>
            </div>
        </a>

        <a href="data/1jQuery/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">HTML5点击燃放烟花</div>
                </div>
                <div class="border-top-bottom"></div>
                <div class="border-left-right"></div>
            </div>
        </a>

        <a href="data/2jQuery/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">HTML5漂亮的3D烟花动画</div>
                </div>
                <div class="border-top-bottom"></div>
                <div class="border-left-right"></div>
            </div>
        </a>

        <a href="data/3jQuery/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">HTML5烟花粒子特效</div>
                </div>
                <div class="border-top-bottom"></div>
                <div class="border-left-right"></div>
            </div>
        </a>

		 <a href="data/7jQuery/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随机点名中奖后放烟花动画特效</div>
                </div>
                <div class="border-top-bottom"></div>
                <div class="border-left-right"></div>
            </div>
        </a>


		 <a href="data/9jQuery/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">css3烟花和霓虹灯文字动画效果</div>
                </div>
                <div class="border-top-bottom"></div>
                <div class="border-left-right"></div>
            </div>
        </a>

		 <a href="data/10jQuery/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">HTML5 Canvas彩色烟花动画特效</div>
                </div>
                <div class="border-top-bottom"></div>
                <div class="border-left-right"></div>
            </div>
        </a>

		 <a href="data/11jQuery/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+css3实现鼠标点击烟花播放效果</div>
                </div>
                <div class="border-top-bottom"></div>
                <div class="border-left-right"></div>
            </div>
        </a>

       <a href="data/4jQuery/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">HTML5 Canvas烟花喷泉动画特效</div>
                </div>
                <div class="border-top-bottom"></div>
                <div class="border-left-right"></div>
            </div>
        </a>

</div>

</body>
</html>