先放效果图

20191231201033577.jpg

开源地址
https://github.com/a1475775412/INDEX

代码

<!DOCTYPE HTML>
<html>

<head>
    <title>烧饼公会|寒船计算机|寒船工作室 - 2019 与Steam签约!</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Start Icons -->
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link rel="apple-touch-icon" sizes="180x180" href="https://res.cloudinary.com/jimmycai/image/upload/v1503432959/icons/apple-touch-icon.png">
    <link rel="icon" type="image/png" href="https://res.cloudinary.com/jimmycai/image/upload/v1503432959/icons/favicon-16x16.png"
        sizes="16x16">
    <link rel="shortcut icon" href="https://res.cloudinary.com/jimmycai/image/upload/v1503432959/icons/favicon.ico">
    <!--End Icons-->

    <meta name="theme-color" content="#ffffff">

    <!-- Start Opengraph -->
    <meta property='og:title' content='寒船计算机 - 2019'>
    <meta property='og:description' content='Lights HaCan You Home.'>
    <meta property='og:url' content='https://formeuss.com/'>
    <meta property='og:site_name' content='Jimmy Cai'>
    <meta property='og:type' content='website'>
    <meta property='og:image' content='http://q1.qlogo.cn/g?b=qq&nk=1475775412&s=640'>
    <!-- End Opengraph -->
<style type="text/css" id="diytitleStyle">
@import url('https://fonts.googleapis.com/css?family=Cairo:300');
.dbtop {
    position: fixed;
    bottom: 5px;
    right: 15px;
    margin-bottom: 0px;
    text-align: right;
    z-index: 4;
    color: #795548;
    font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;word-break:break-word}.icon{display:inline-block;width:1em;height:1em;stroke-width:0;stroke:currentColor;fill:currentColor}
body{
    font-size: 14px;
    font-family: "Cairo","Microsoft Jhenghei","PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","微软雅黑",sans-serif;
    color: #942a2a;
    margin: 0;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    min-height: 100vh;
    width: 100vw;
    background: #d1c3a6;
}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-button{width:8px;height:0}::-webkit-scrollbar-track{background:#fff}::-webkit-scrollbar-thumb{background:#d2d7d3}::-webkit-scrollbar-thumb:hover{background:#bdc3c7}.container{max-width:500px;padding:0 20px;margin:0 auto}#wrapper,.card-container{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;justify-content:center;align-items:center;flex-wrap:wrap;flex-direction:column;width:100%}#wrapper{min-height:100vh}.card-container{height:100vh}.card-container .section-title{font-weight:lighter;color:#95a5a6;width:100%;font-size:1.5em;display:block}.card{box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);background:#fff;text-align:center;width:100%;overflow:hidden;border-radius:4px;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);-webkit-transition:transform .5s cubic-bezier(.25, .46, .45, .94);-moz-transition:transform .5s cubic-bezier(.25, .46, .45, .94);-ms-transition:transform .5s cubic-bezier(.25, .46, .45, .94);-o-transition:transform .5s cubic-bezier(.25, .46, .45, .94);position:relative}#card--user header{position:relative;margin-bottom:50px}#card--user header #background{width:100%;height:250px;position:relative;overflow:hidden}@media only screen and (max-width: 600px) and (max-height: 815px){#card--user header #background{height:200px}}#card--user header #background--image{position:absolute;top:0;left:0;width:100%;height:150%;background-size:cover !important;background-position:top center !important;background-repeat:no-repeat !important}#card--user header .avatar{margin:0;position:absolute;bottom:-50px;left:calc(50% - (100px) / 2);display:block}#card--user header .avatar img{width:100px;height:100px;border-radius:100%;box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);-webkit-transition:transform .3s ease-in-out;-moz-transition:transform .3s ease-in-out;-ms-transition:transform .3s ease-in-out;-o-transition:transform .3s ease-in-out;-webkit-transition-delay:.1s;transition-delay:.1s;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);border:2px solid #fff}#card--user .info{padding:5px 0 15px 0;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-ms-transition:all .3s ease;-o-transition:all .3s ease;-webkit-transition-delay:.2s;transition-delay:.2s;-webkit-opacity:0;-moz-opacity:0;opacity:0}#card--user .info h1{font-size:2em;margin:0;font-weight:lighter}#card--user .info p{margin:0}#card--user .social-links{list-style:none;padding:0 15px 15px;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;justify-content:center;flex-wrap:wrap;-webkit-transform:translate3d(0, 100%, 0);-moz-transform:translate3d(0, 100%, 0);-ms-transform:translate3d(0, 100%, 0);-o-transform:translate3d(0, 100%, 0);-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;-webkit-transition-delay:.3s;transition-delay:.3s;-webkit-opacity:0;-moz-opacity:0;opacity:0}#card--user .social-links a{text-decoration:none;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;justify-content:center;align-items:center;flex-basis:30%;color:#fff;box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);padding:10px;flex-grow:1;margin:5px}@media only screen and (max-width: 600px) and (max-height: 815px){#card--user .social-links a{flex-basis:40%}}#card--user .social-links a.hide{display:none}#card--user .social-links a svg{margin-right:10px}#card--user .social-links a.twitter{background:#1da1f2}#card--user .social-links a.github{background:#333}#card--user .social-links a.flickr{background:#ff0084}#card--user .social-links a.blog{background:#16a085}#card--user .social-links a.telegram{background:#0088cc}#card--user .social-links a.medium{background:#00ab6c}div#loader{height:100vh;width:100vw;position:fixed;top:0;left:0;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;justify-content:center;align-items:center;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-ms-transition:all 1s ease;-o-transition:all 1s ease;-webkit-opacity:1;-moz-opacity:1;opacity:1}.loaded #loader{-webkit-opacity:0;-moz-opacity:0;opacity:0;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0)}.loaded .card{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1)}.loaded #card--user .avatar img{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1)}.loaded #card--user .info{-webkit-opacity:1;-moz-opacity:1;opacity:1}.loaded #card--user .social-links{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-opacity:1;-moz-opacity:1;opacity:1}.spinner{width:40px;height:40px;position:relative}.double-bounce1,.double-bounce2{width:100%;height:100%;border-radius:50%;background-color:#333;opacity:.6;position:absolute;top:0;left:0;-webkit-animation:sk-bounce 2s infinite ease-in-out;animation:sk-bounce 2s infinite ease-in-out}.double-bounce2{-webkit-animation-delay:-1s;animation-delay:-1s}@-webkit-keyframes sk-bounce{0%,100%{-webkit-transform:scale(0)}50%{-webkit-transform:scale(1)}}@keyframes sk-bounce{0%,100%{transform:scale(0);-webkit-transform:scale(0)}50%{transform:scale(1);-webkit-transform:scale(1)}} 
    </style>
</head>

<body>
    <div id="loader">
        <!-- Source: https://twitter.com/tobiasahlin -->
        <div class="spinner">
            <div class="double-bounce1"></div>
            <div class="double-bounce2"></div>
        </div>
    </div>

    <div id="wrapper" class="container">
        <div class="card-container">
            <section class="card" id="card--user">

                <header>
                    <div id="background">
                        <div id="background--image" style="background-image: url(http://q1.qlogo.cn/g?b=qq&nk=1475775412&s=640)"></div>
                    </div>
                    <figure class="avatar">
                        <img src="http://q1.qlogo.cn/g?b=qq&nk=1475775412&s=640" srcset="http://q1.qlogo.cn/g?b=qq&nk=1475775412&s=640"
                            alt="" />
                    </figure>
                </header>

                <section class="info">
                    <h1 class="name"><?php echo $post ?></h1>
                    <p class="bio">源于虚幻,精于寒船!</p>
                </section>

                <footer class="social-links is-hidden">
                    <a href="" class="blog">
                        <svg class="icon icon-box">
                            <use xlink:href="#icon-box"></use>
                        </svg>
                        <span>赞助列表</span>
                    </a>

                    <a href="" target="_blank" class="twitter">
                        <svg class="icon icon-twitter">
                            <use xlink:href="#icon-twitter"></use>
                        </svg>
                        <span>关于我们</span>
                    </a>

                    <a href="https://blog.xiaolin.mcxhz.cn/" target="_blank" class="telegram">
                        <svg class="icon icon-telegram">
                            <use xlink:href="#icon-telegram"></use>
                        </svg>
                        <span>开始探索!</span>
                    </a>

                

                    <!-- Add more links here -->
                </footer>

            </section>
        </div>
    </div>
    <p class="dbtop"> Copyright © 2019 HaCan All Rights Reserved.</p>
    <svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink">

        <symbol id="icon-github" viewBox="0 0 24 28">
            <title>github</title>
            <path d="M12 2c6.625 0 12 5.375 12 12 0 5.297-3.437 9.797-8.203 11.391-0.609 0.109-0.828-0.266-0.828-0.578 0-0.391 0.016-1.687 0.016-3.297 0-1.125-0.375-1.844-0.812-2.219 2.672-0.297 5.484-1.313 5.484-5.922 0-1.313-0.469-2.375-1.234-3.219 0.125-0.313 0.531-1.531-0.125-3.187-1-0.313-3.297 1.234-3.297 1.234-0.953-0.266-1.984-0.406-3-0.406s-2.047 0.141-3 0.406c0 0-2.297-1.547-3.297-1.234-0.656 1.656-0.25 2.875-0.125 3.187-0.766 0.844-1.234 1.906-1.234 3.219 0 4.594 2.797 5.625 5.469 5.922-0.344 0.313-0.656 0.844-0.766 1.609-0.688 0.313-2.438 0.844-3.484-1-0.656-1.141-1.844-1.234-1.844-1.234-1.172-0.016-0.078 0.734-0.078 0.734 0.781 0.359 1.328 1.75 1.328 1.75 0.703 2.141 4.047 1.422 4.047 1.422 0 1 0.016 1.937 0.016 2.234 0 0.313-0.219 0.688-0.828 0.578-4.766-1.594-8.203-6.094-8.203-11.391 0-6.625 5.375-12 12-12zM4.547 19.234c0.031-0.063-0.016-0.141-0.109-0.187-0.094-0.031-0.172-0.016-0.203 0.031-0.031 0.063 0.016 0.141 0.109 0.187 0.078 0.047 0.172 0.031 0.203-0.031zM5.031 19.766c0.063-0.047 0.047-0.156-0.031-0.25-0.078-0.078-0.187-0.109-0.25-0.047-0.063 0.047-0.047 0.156 0.031 0.25 0.078 0.078 0.187 0.109 0.25 0.047zM5.5 20.469c0.078-0.063 0.078-0.187 0-0.297-0.063-0.109-0.187-0.156-0.266-0.094-0.078 0.047-0.078 0.172 0 0.281s0.203 0.156 0.266 0.109zM6.156 21.125c0.063-0.063 0.031-0.203-0.063-0.297-0.109-0.109-0.25-0.125-0.313-0.047-0.078 0.063-0.047 0.203 0.063 0.297 0.109 0.109 0.25 0.125 0.313 0.047zM7.047 21.516c0.031-0.094-0.063-0.203-0.203-0.25-0.125-0.031-0.266 0.016-0.297 0.109s0.063 0.203 0.203 0.234c0.125 0.047 0.266 0 0.297-0.094zM8.031 21.594c0-0.109-0.125-0.187-0.266-0.172-0.141 0-0.25 0.078-0.25 0.172 0 0.109 0.109 0.187 0.266 0.172 0.141 0 0.25-0.078 0.25-0.172zM8.937 21.438c-0.016-0.094-0.141-0.156-0.281-0.141-0.141 0.031-0.234 0.125-0.219 0.234 0.016 0.094 0.141 0.156 0.281 0.125s0.234-0.125 0.219-0.219z"></path>
        </symbol>

        <symbol id="icon-telegram" viewBox="0 0 28 28">
            <title>telegram</title>
            <path d="M18.578 20.422l2.297-10.828c0.203-0.953-0.344-1.328-0.969-1.094l-13.5 5.203c-0.922 0.359-0.906 0.875-0.156 1.109l3.453 1.078 8.016-5.047c0.375-0.25 0.719-0.109 0.438 0.141l-6.484 5.859-0.25 3.563c0.359 0 0.516-0.156 0.703-0.344l1.687-1.625 3.5 2.578c0.641 0.359 1.094 0.172 1.266-0.594zM28 14c0 7.734-6.266 14-14 14s-14-6.266-14-14 6.266-14 14-14 14 6.266 14 14z"></path>
        </symbol>

        <symbol id="icon-box" viewBox="0 0 24 24">
            <title>box</title>
            <path d="M21.337 4.556l-7.962-3.981c-0.006-0.006-0.012-0.006-0.019-0.012-0.419-0.213-0.888-0.319-1.356-0.319s-0.931 0.112-1.338 0.312l-8.013 4.006c-1.019 0.513-1.65 1.537-1.65 2.675v9.531c0 1.131 0.631 2.156 1.644 2.675 0 0 0.006 0 0.006 0.006l7.988 3.994c0.419 0.213 0.888 0.325 1.356 0.325s0.938-0.113 1.344-0.319l8.013-4.006c1.013-0.513 1.644-1.538 1.65-2.675v-9.531c0-1.137-0.637-2.163-1.662-2.681zM11.562 2.344c0.087-0.044 0.237-0.1 0.438-0.1 0.15 0 0.294 0.031 0.425 0.094 0.006 0 0.012 0.006 0.019 0.006l7.313 3.656-7.756 3.881-7.756-3.881 7.319-3.656zM3.55 17.669c-0.344-0.175-0.55-0.519-0.55-0.894 0-0.006 0-0.006 0-0.012v-9.144l8 4v9.775l-7.45-3.725zM20.456 17.663l-7.456 3.725v-9.769l8-4v9.15c0 0.381-0.213 0.725-0.544 0.894z"></path>
        </symbol>
        <symbol id="icon-twitter" viewBox="0 0 26 28">
            <title>twitter</title>
            <path d="M25.312 6.375c-0.688 1-1.547 1.891-2.531 2.609 0.016 0.219 0.016 0.438 0.016 0.656 0 6.672-5.078 14.359-14.359 14.359-2.859 0-5.516-0.828-7.75-2.266 0.406 0.047 0.797 0.063 1.219 0.063 2.359 0 4.531-0.797 6.266-2.156-2.219-0.047-4.078-1.5-4.719-3.5 0.313 0.047 0.625 0.078 0.953 0.078 0.453 0 0.906-0.063 1.328-0.172-2.312-0.469-4.047-2.5-4.047-4.953v-0.063c0.672 0.375 1.453 0.609 2.281 0.641-1.359-0.906-2.25-2.453-2.25-4.203 0-0.938 0.25-1.797 0.688-2.547 2.484 3.062 6.219 5.063 10.406 5.281-0.078-0.375-0.125-0.766-0.125-1.156 0-2.781 2.25-5.047 5.047-5.047 1.453 0 2.766 0.609 3.687 1.594 1.141-0.219 2.234-0.641 3.203-1.219-0.375 1.172-1.172 2.156-2.219 2.781 1.016-0.109 2-0.391 2.906-0.781z"></path>
        </symbol>

        <symbol id="icon-pencil" viewBox="0 0 24 28">
            <title>pencil</title>
            <path d="M5.672 24l1.422-1.422-3.672-3.672-1.422 1.422v1.672h2v2h1.672zM13.844 9.5c0-0.203-0.141-0.344-0.344-0.344-0.094 0-0.187 0.031-0.266 0.109l-8.469 8.469c-0.078 0.078-0.109 0.172-0.109 0.266 0 0.203 0.141 0.344 0.344 0.344 0.094 0 0.187-0.031 0.266-0.109l8.469-8.469c0.078-0.078 0.109-0.172 0.109-0.266zM13 6.5l6.5 6.5-13 13h-6.5v-6.5zM23.672 8c0 0.531-0.219 1.047-0.578 1.406l-2.594 2.594-6.5-6.5 2.594-2.578c0.359-0.375 0.875-0.594 1.406-0.594s1.047 0.219 1.422 0.594l3.672 3.656c0.359 0.375 0.578 0.891 0.578 1.422z"></path>
        </symbol>

        <symbol id="icon-flickr" viewBox="0 0 24 28">
            <title>flickr</title>
            <path d="M19.5 2c2.484 0 4.5 2.016 4.5 4.5v15c0 2.484-2.016 4.5-4.5 4.5h-15c-2.484 0-4.5-2.016-4.5-4.5v-15c0-2.484 2.016-4.5 4.5-4.5h15zM10.906 14c0-1.828-1.484-3.313-3.313-3.313s-3.313 1.484-3.313 3.313 1.484 3.313 3.313 3.313 3.313-1.484 3.313-3.313zM19.719 14c0-1.828-1.484-3.313-3.313-3.313s-3.313 1.484-3.313 3.313 1.484 3.313 3.313 3.313 3.313-1.484 3.313-3.313z"></path>
        </symbol>

        <symbol id="icon-medium" viewBox="0 0 28 28">
            <title>medium</title>
            <path d="M9.328 6.578v18.328c0 0.484-0.234 0.938-0.766 0.938-0.187 0-0.359-0.047-0.516-0.125l-7.266-3.641c-0.438-0.219-0.781-0.781-0.781-1.25v-17.813c0-0.391 0.187-0.75 0.609-0.75 0.25 0 0.469 0.125 0.688 0.234l7.984 4c0.016 0.016 0.047 0.063 0.047 0.078zM10.328 8.156l8.344 13.531-8.344-4.156v-9.375zM28 8.437v16.469c0 0.516-0.297 0.875-0.812 0.875-0.266 0-0.516-0.078-0.734-0.203l-6.891-3.437zM27.953 6.563c0 0.063-8.078 13.172-8.703 14.172l-6.094-9.906 5.063-8.234c0.172-0.281 0.484-0.438 0.812-0.438 0.141 0 0.281 0.031 0.406 0.094l8.453 4.219c0.031 0.016 0.063 0.047 0.063 0.094z"></path>
        </symbol>

        <!-- Add more icons here -->
    </svg>

    <script type="text/javascript">
        if (top.location !== self.location) {
            top.location = self.location
        };
    </script>

    <script>
        if ('addEventListener' in window) {
            window.addEventListener('load', function () {
                document.body.classList.add('loaded');
            });
        };
    </script>
</body>

</html>

加一个php计数功能

<?php
 if (!@fp=fopen("coun.txt","r")){
     }
     @$num=fgets($fp,12);
     if($num=="")$num="0";
     $num++;
     @fclose($fp);
     $fp=fopen("coun.txt","w");
     fwrite($fp,$num);
     fclose($fp);
     $post=$num;
?>
Last modification:December 31st, 2019 at 08:18 pm
如果觉得我的文章对你有用,请随意赞赏