php 实验一

gnn40036 2022-03-15 20:38 原文

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人首页</title>
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
    <link rel="icon" href="./favicon.ico" type="image/x-icon">
</head>
<style>
    * {
        margin: 0;
        padding: 0
    }

    .home {
        height: 100%;
        overflow: hidden;
    }

    .content {
        perspective: 340px;
        width: 100%;
        position: relative;
    }

    h1 {
        color: white;
        text-align: center;
    }

    span {
        display: block;
        text-align: center;
    }

    .stars {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 2px;
        height: 2px;
        z-index: 999;
        border-radius: 50%;
      
        animation: fly 15s linear infinite;
        transform-style: preserve-3d;
    }

    .stars:before,
    .stars:after {
        content: "";
        position: absolute;
        width: inherit;
        height: inherit;
        box-shadow: inherit;
    }

    .stars:before {
        transform: translateZ(-300px);
        opacity: .6;
    }

    .stars:after {
        transform: translateZ(-600px);
        opacity: .4;
    }

    @keyframes fly {
        from {
            transform: translateZ(0px);
            opacity: .6;
        }
        to {
            transform: translateZ(200px);
            opacity: .8;
        }
    }

    .title {
        position: absolute;
        display: flex;
        justify-content: left;
        left: 100px;
        right: 0;
        top: 300px;
        margin: auto;
        bottom: 0;
        color: #fff;
        font-size: 24px;
        font-weight: 500;
    }

    .titles {
        position: absolute;
        display: flex;
        justify-content: left;
        left: 100px;
        right: 0;
        top: 380px;
        margin: auto;
        bottom: 0;
        color: #fff;
        font-size: 20px;
        font-weight: 500;
    }

    .icon {
        width: 15px;
        height: 15px;
        padding: 5px;
        border: 2px solid #fff;
        border-radius: 100%;
        position: absolute;
        left: 49%;
        bottom: 50px;
        animation: downs 2s linear infinite;
    }

    @keyframes downs {
        from {
            transform: translatey(0px);
            opacity: .6;
        }
        to {
            transform: translatey(30px);
            opacity: .8;
        }
    }

    .ribbon {
        display: flex;
        justify-content: center;
        position: absolute;
        right: 300px;
        top: 50px;
        margin: auto;
    }

    .ribbon:after,
    .ribbon:before {
        margin-top: 0.5em;
        content: "";
        display: flex;
    ;
        border: 1.5em solid #fff;
    }

    .ribbon:after {
        border-right-color: transparent;
    }

    .ribbon:before {
        border-left-color: transparent;
    }

    .ribbon a:link,
    .ribbon a:visited {
        color: #000;
        text-decoration: none;
        height: 3.5em;
        overflow: hidden;
    }

    .ribbon span {
        background: #fff;
        display: inline-block;
        line-height: 3em;
        padding: 0 1.5em;
        margin-top: 0.5em;
        position: relative;
        -webkit-transition: background-color 0.2s, margin-top 0.2s;
        /* Saf3.2+, Chrome */
        -moz-transition: background-color 0.2s, margin-top 0.2s;
        /* FF4+ */
        -ms-transition: background-color 0.2s, margin-top 0.2s;
        /* IE10 */
        -o-transition: background-color 0.2s, margin-top 0.2s;
        /* Opera 10.5+ */
        transition: background-color 0.2s, margin-top 0.2s;
    }

    .ribbon a:hover span {
        background: #FFD204;
        margin-top: 0;
    }

    .ribbon span:before {
        content: "";
        position: absolute;
        top: 3em;
        left: 0;
        border-right: 0.5em solid #9B8651;
        border-bottom: 0.5em solid #fff;
    }

    .ribbon span:after {
        content: "";
        position: absolute;
        top: 3em;
        right: 0;
        border-left: 0.5em solid #9B8651;
        border-bottom: 0.5em solid #fff;
    }

    .introduce {
        display: flex;
        flex-direction: column;
    }

    .introduce_item {
        display: flex;
        justify-content: center;
        margin-top: 60px;
    }

    .introduce_item_img {
        width: 800px;
        height: 500px;
    }

    .introduce_item_title {
        width: 300px;
        font-size: 18px;
        line-height: 36px;
        align-self: center;
        padding-left: 100px;
    }

    .introduce_item_titles {
        width: 300px;
        font-size: 18px;
        line-height: 36px;
        align-self: center;
        padding-right: 100px;
    }

    audio {
        position: fixed;
        bottom: 50px;
        right: 0;
    }

    .music_img {
        position: fixed;
        bottom: 50px;
        right: 50px;
        width: 40px;
        height: 30px;
        animation: muscis 5s linear infinite;
    }

    @keyframes muscis {
        from {
            transform: rotate (0deg);
            opacity: .6;
        }
        to {
            transform: rotate(360deg);
            opacity: .8;
        }
    }

    .icons {
        display: flex;
        justify-content: space-between;
        padding: 0 400px;
        box-sizing: border-box;
        overflow: hidden;
    }

    .icons_items {
        display: flex;
        flex-direction: column;
        font-size: 20px;
        margin-top: 80px;
        width: 200px;
    }

    .icons_items_imgs {
        width: 200px;
        margin-bottom: 30px;
    }

</style>
<body>
<div class="home">
    <div class="content">
        <div class="stars"></div>
        <img class="bgc" src="https://images.cnblogs.com/cnblogs_com/blogs/690905/galleries/2128405/o_220320051230_%E7%81%AF%E5%85%89.%E5%89%AA%E5%BD%B1.jpg" width="100%" alt="">
        <h3 class="title">欢迎来到我的个人网站 <br> Welcome to my personal website</h3>
        <h3 class="titles">今天也要加油鸭</h3>
        <h3 class ="titles">泰兰德的夏天永不停歇，我爱的少年永远热恋</h3>
        <img class="icon" src="https://images.cnblogs.com/cnblogs_com/blogs/690905/galleries/2128405/o_220320050723_%E6%A0%91%E4%B8%8B.jpg" alt="">
        <div class='ribbon'>
          <a href="file:///E:/HTML/实验一 个人首页"><span>首页</span></a>
          <a href="https://www.cnblogs.com/gnn40036/"><span>博客园</span></a>
           <a href="https://www.cnblogs.com/gnn40036/gallery/2128405.html"><span>小世界</span></a>
            <a href="https://msg.cnblogs.com/send/%E6%B8%85%E6%A2%A6%E9%9F%B6%E5%8D%8E"><span>留言板</span></a>
        </div>
    </div>
    <div class="icons">
        <div class="icons_items">
            <img class="icons_items_imgs" src="https://images.cnblogs.com/cnblogs_com/blogs/690905/galleries/2128405/o_220320050634_%E9%A3%8E%E6%99%AF1.jpg" alt="此图片加载错误">
            <span>耿牛牛的摄影世界</span>
        </div>
        <div class="icons_items">
            <img class="icons_items_imgs" src="https://images.cnblogs.com/cnblogs_com/blogs/690905/galleries/2128405/o_220320050646_%E9%A3%8E%E6%99%AF2.jpg" alt="">
            <span>每天都要在食堂里面纠结到底吃什么</span>
        </div>
        <div class="icons_items">
            <img class="icons_items_imgs" src="https://images.cnblogs.com/cnblogs_com/blogs/690905/galleries/2128405/o_220320050654_%E9%A3%8E%E6%99%AF3.jpg" alt="">
            <span>午饭过后可以在基教前面的小操场吹风</span>
        </div>
        <div class="icons_items">
            <img class="icons_items_imgs" src="https://images.cnblogs.com/cnblogs_com/blogs/690905/galleries/2128405/o_220320050706_%E9%A3%8E%E6%99%AF4.jpg" alt="">
            <span>忙碌的一天结束啦爬上小床跟世界说晚安</span>
        </div>
    </div>
    <div class="introduce">
        <div class="introduce_item">
            <img class="introduce_item_img" src="https://images.cnblogs.com/cnblogs_com/blogs/690905/galleries/2128405/o_220320050614_%E5%A4%A7%E6%B5%B7.jpg" alt="">
            <span class="introduce_item_title">淡粉色的海边闪着点点星光世界变得宁静，带着少年的热情与纯洁。见证着青春的激情。粼粼波光，静谧宜人</span>

        </div>
        <div class="introduce_item">

            <span class="introduce_item_titles">当清晨的阳光洒进我们温馨的寝室，忙碌的一天又开始了，闹钟开始响起，每个人睡眼惺忪，从床上爬起，忙忙碌碌的穿梭在食堂与教室之间</span>
            <img class="introduce_item_img" src="https://images.cnblogs.com/cnblogs_com/blogs/690905/galleries/2128405/o_220320051523_%E9%BE%99%E5%B1%B1.jpg" alt="">
        </div>
        <div class="introduce_item">
            <img class="introduce_item_img" src="https://images.cnblogs.com/cnblogs_com/blogs/690905/galleries/2128405/o_220320050723_%E6%A0%91%E4%B8%8B.jpg" alt="">
            <span class="introduce_item_title">温暖的阳光照耀着大地，远处的小山都金灿灿的美轮美奂，它穿梭于微隙的气息。舒倘，漫长。紫檀的香味，弥漫在春日，把天地间一切空虚盈满，阳光下，是一道纤绝的尘陌，呢喃着天真，充盈着那抹曾经深不可测的孤清而飘逸的影。</span>
        </div>
        <div class="introduce_item">
            <span class="introduce_item_titles">晚上散步回宿舍的途中抬头望向天空，几颗大而亮的星星挂在夜空，仿佛是天上的人儿提着灯笼在巡视那浩瀚的太空。美丽极了，裹紧衣裳，在这优美的夜色中慢慢的走回寝室。</span>
            <img class="introduce_item_img"  src="https://images.cnblogs.com/cnblogs_com/blogs/690905/galleries/2128405/o_220320050535_%E7%AA%97%E8%BE%B9.jpg" alt="">
        </div>
        <div id="footer">
            <a href="http://beian.miit.gov.cn/" target="_blank">
        </div>
    </div>
    <audio autoplay="autoplay" id="audio" loop="loop">
        <source src="E:\实验一 信2005-1 耿晴20204010\Will Van De Crommert - Everlast(永恒).mp3" type="audio/MP3">

    </audio>
     <img class="music_img" src="E:\实验一 信2005-1 耿晴20204010\Will Van De Crommert - Everlast(永恒).mp3" alt="">
</div>

</body>
<script>
    let mucics = document.getElementById('audio')
    document.body.addEventListener('mousemove', function() {
        setTimeout(() => {
            mucics.play();
        }, 2000);
    }, false);
</script>

</html>

</html>