背景

封楼期间难得空闲，也静不下心学习，空闲之余萌生了重做引导页的想法。因为之前都是扒站(某大公司游戏官网)+小改，一来虽然很炫酷，但本人水平有限，仍有很大一部分JS无从下手，甚至是看不懂|-_-|；二来对方毕竟没有开源，无论道德还是法律都说不过去，所以……先从简单处写起，后续慢慢迭代吧！

大致布局:Flex、定位

部分代码重构了几次，Flex与定位皆有，目前定位为主，flex只剩下两处地方还有老代码，我没有测试它是否还在发挥做哟
参见 阮一峰Flex布局教程

头像部分

手残党，因为之前做动态头像留着底图，所以偷个懒，暂时没有用CSS或者JS绘制特效。
CSS：鼠标指针指向头像切换gif，移开切换png/播放时gif，暂停时png。
JS：音乐播放切换gif，暂停切换png。

背景音乐部分

audio接口参见 HTML audio基础API完全使用指南
我只循环播放了一首歌，所以隐藏audio主体美观一些，然后进度条和控制按钮都交给头像部分(环形进度条，参考bilibili若干教程)。有需要多首歌的，可以看一下开源的APlayer

遇到的问题:JS加载阻塞,获取不到元素id

在实现头像处鼠标事件时，一直获取不到头像的id，但是控制台调试发现代码无误。原来由于JS的机制是单线程，所以先运行JS代码，再构建相关DOM，所以需要尽可能在body尾部引用JS时加上属性async,等构建完DOM再获取。

<script src="./js/reashal.js" async="async"></script>

代码部分

HTML部分

<!DOCTYPE html>
<html lang="chn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>你听|睿屿青衫</title>
    <meta name="author" content="reashal">
    <meta name="description" content="不惦来路,轻装且行">
    <link rel="stylesheet" href="css/style.css">
    <link rel="shortcut icon" href="images/reashal.png">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_3327564_iotb9j7et2.css">
</head>

<body>
    <div class="box">
        <div class="about">
            <div class="imgbox">
                <div class="left">
                    <div class="leftCircle" id="lleft"></div>
                </div>
                <div class="right">
                    <div class="rightCircle" id="rright"></div>
                </div>
                <div class="bgAva">
                    <img src="images/reashal.png" id="ava" title="头像/音乐控件" alt="头像/音乐控件">
                    <i class="iconfont icon-play" id="btn" title="音乐按钮" alt="音乐按钮"></i>
                </div>

            </div>

            <div id="reashal">
                <h2>睿屿青衫</h2>
                <p>不惦来路,轻装且行</p>
            </div>
            <div id="aboutme">
                <h2>关于我</h2>
                <p>一名正在焦虑未来的大学生</p>
                <p>近期不想多做折腾 正着手准备一些事情</p>
                <p>服务器有些大材小用 后续可能全部托管</p>
                <p>本页面置于 Github Page 服务</p>
            </div>
            <div class="fgx"></div>
            <div class="icon" id="ctr">
                <ul>
                    <li><a href="https://www.reashal.com/" title="Home" target="blank"><i
                                class="iconfont icon-planet"></i></a></li>
                    <li><i class="iconfont icon-pencil" id="abo" title="About"></i></li>
                    <li><a href="https://github.com/reashal" title="Github" target="blank"><i
                                class="iconfont icon-github"></i></a></li>
                    <li><a href="mailto:88811@88.com" title="Mail" target="blank"><i class="iconfont icon-mail"></i></a>
                    </li>

                </ul>
            </div>
        </div>
    </div>
    <div class="footer">
        <p><strong>Copyright &copy 2022 ruiyuqingshan</strong></p>
        <!--         
        <a target="_blank" href="https://beian.miit.gov.cn/">
            <p>鲁ICP备********号</p>
        </a>
         -->
    </div>
    <div>
        <!--鼠标点击泡泡特效-->
        <canvas class="fireworks" style="position:fixed;left:0;top:0;z-index:99999999;pointer-events:none;"></canvas>
        <script type="text/javascript" src="js/djtx.js"></script>
    </div>
    <div>
        <audio controls id="music" loop>
            <source src="music/LettingGo.mp3" type="audio/mpeg">
        </audio>
    </div>
    <script src="js/about.js" async="async"></script>
    <script src="js/avator.js" async="async"></script>
</body>

</html>

CSS部分

* {
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
    width: 100%;
    position: relative;
    /* 子绝父相 */
    overflow: hidden;
    /* 防止撑开盒子 */
}

body {
    background-image: linear-gradient(to right, #ec6fa3, #2f4af2);
}

.box {
    position: absolute;
    height: 100%;
    width: 100%;
    /* box铺满屏幕,需要html和body取消边距 */
    display: flex;
    align-items: center;
    justify-content: center;
    /* 盒子内部水平垂直居中对齐 */
    /* margin: auto; */
}

.box .about {
    position: relative;
    width: 70%;
    max-width: 750px;
    background-color: rgba(219, 245, 245, 0.1);
    padding: 1%;
    overflow: hidden;
}

/* 调整动画的分割线1 */
.box .imgbox {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: rgb(236, 111, 163, .6);
    border-radius: 50%;
    margin: auto;
    margin-top: 5px;
}

.left,
.right {
    position: absolute;
    z-index: 1;
    width: 50px;
    height: 100px;
    overflow: hidden;
}

.right {
    right: 0;
}

.left .leftCircle,
.right .rightCircle {
    width: 50px;
    height: 100px;
    background-color: rgb(255, 255, 255, .4);
}

.left .leftCircle {
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
    transform-origin: right center;
}

.right .rightCircle {
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
    transform-origin: left center;
}

.imgbox .bgAva {
    position: absolute;
    left: 5px;
    top: 5px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    z-index: 2;
    display: flex;
}

/* 调整动画的分割线2 */

.box #ava {
    position: absolute;
    z-index: 5;
    width: 100px;
    height: 100px;
    margin: auto;
    border-radius: 100px;
}

#ava:hover {
    cursor: pointer;
    content: url("../images/reashal.gif");
}

#btn {
    position: absolute;
    display: none;
    margin: auto;
    z-index: 3;
    left: 38px;
    bottom: -4px;
    font-size: 16px !important;
    color: rgb(39, 244, 220);
}

#reashal,
#aboutme,
#ctr {
    color: rgb(255, 255, 255);
    text-align: center;
    line-height: 33px;
    padding: 10px;
    font-weight: bold;
}

#aboutme {
    display: none;
}

.fgx {
    height: 2px;
    background-color: rgb(255, 255, 255, .7);
}

.icon {
    margin-bottom: -12px;
}

#abo {
    cursor: pointer;
}

.icon li {
    display: inline-block;
    list-style-type: none;
    padding: 5px;
}

.iconfont {
    font-size: 22px !important;
}

i:hover {
    color: #ec6fa3;
}

.footer {
    bottom: 0;
    width: 100%;
    position: absolute;
    text-align: center;
    background-color: #e1e5eb;
    opacity: 0.4;
    padding: 6px;

}

.footer p {
    color: #000000;
    font-size: 22px;
    font-weight: bold;
}

ul a,
.footer a {
    color: white;
    text-decoration: none;
}

#music {
    display: none;
}

JS部分

头像音乐部分

var ava = document.getElementById('ava');
var music = document.getElementById('music');
var now;
var left = document.getElementById('lleft');
var right = document.getElementById('rright');
var dep = 0;
var btn = document.getElementById('btn');
function getTime() {
    now = music.currentTime;
    dep = Number(((now / 263.0) * 360)).toFixed(0);
    if (dep <= 180) {
        right.style.transform = `rotate(${dep}deg)`;
        left.style.transform = `rotate(0)`;
    }
    else {
        left.style.transform = `rotate(${dep - 180}deg)`;
        right.style.transform = `rotate(180px)`;
    }
}
btn.onclick = music.onclick;
if (music != null) {
    btn.style.display = "block";
    ava.onclick = function () {
        if (music.paused) {
            music.play();
            btn.className = "iconfont icon-pause";
            ava.src = "../images/reashal.gif";
            setInterval(function () { getTime() }, 500);
        }
        else {
            music.pause();
            btn.className = "iconfont icon-play";
            ava.src = "../images/reashal.png";
        }
    }
}

关于部分

var abo=document.getElementById("abo")
var reashal=document.getElementById("reashal")
var aboutme=document.getElementById("aboutme")
abo.onclick=function(){
    if(abo.className==="iconfont icon-pencil"){
        abo.className="iconfont icon-homefill"
        abo.title='Home'
        reashal.style.display='none'
        aboutme.style.display='block'
    }
    else{
        abo.className="iconfont icon-pencil"
        abo.title='About'
        aboutme.style.display='none'
        reashal.style.display='block'
    }
}

点击特效部分

不贴了，想要的自己从我这里下载，别人写的我也看不懂……

暂时完工

已经是2.0版本，目前能想到且有能力实现的功能已经完善的差不多了，所以此后大概推进缓慢
成品展示 以后慢慢 更新 吧

最后修改：2022 年 04 月 26 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏