加林森 发表于 2022-3-21 21:45

《千年の祈り》 - 姫神

本帖最后由 加林森 于 2022-3-21 21:55 编辑 <br /><br /><style type="text/css">
/* 背景图 */
#xq { position: relative; left:-204px; top:120px; width: 1024px; height: 520px; background-image: url('https://pic.imgdb.cn/item/6238836627f86abb2ab0a06a.jpg'); box-shadow: 4px 4px 5px #888; border-radius:12px;
}
/* 转动时钟 */
#outer {
      left:460px; top: 60px;
      display: flex;
      justify-content: center;
      width: 200px;
      height: 200px;
      border: 10px solid rgba(47, 79, 79, .7);
      border-radius: 50%;
      background: rgba(240, 248, 255, 0.6);
      font: 12px/13px Arial;
      position: relative;
}

#outer::before {
      color: #2f4f4f;
      content: '花 潮 水 区';
      position: absolute;
      width: 50%;
      height: 20px;
      text-align: center;
      top: 75%;
}

#outer div { position: absolute; }

#nyrx {
      color: #2f4f4f;
      top: 25%;
      text-align: center;
}

.kedu {
      width: 3px;
      height: 4px;
      background: #2f4f4f;
      transform-origin: 50% 100px;
}

#sec-hand, #min-hand, #hr-hand {
      background: #2f4f4f;
      bottom: 50%;
      transform-origin: 50% 100%;
}

#sec-hand {
      width: 2px;
      height: 48%;
      background: #d00;
      z-index: 10;
}

#sec-hand::before {
      content:'';
      position: absolute;
      background: #2f4f4f;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      bottom: -4px;
      left: -5px;
}

#min-hand {
      width: 4px;
      height: 45%;
      z-index: 9;
}

#hr-hand {
      width: 6px;
      height: 40%;
      z-index: 8 ;
}
/* 播放按钮 */
.picBtn {
      width: 100px;
      height: 100px;
      border: none;
      outline: none;
      border-radius: 8px;
      background: transparent url('http://image.hnol.net/c/2022-02/23/01/2022022301050291-5087368.gif ') no-repeat;
      cursor: pointer;
}
</style>

<div id="xq" >
    <div id="outer">
      <div id="nyrx"></div>
      <div id="sec-hand"></div>
      <div id="min-hand"></div>
      <div id="hr-hand"></div>
    </div>
<div style="position: absolute; left:450px; top: 300px; width:200px; opacity: .95;">
               <p ><font color="#F5F5F5" size="5" >
               <marqueescrollamount="3" direction="left" >千年の祈り-姫神 纯音乐</marquee></p>
      </div>
      <!-- 控制按钮应是父盒子的第一代子元素 -->
      <div style="position:absolute; width:144px; left: 120px; top:calc(100% - 240px); text-align:center;">
                <button id="picBtn" class="picBtn"></button>
      </div>
</div>
<!-- 因为播放器不要界面，无需放在帖子父盒子内 -->
<audio id="music" autoplay="autoplay" loop="loop" src="http://www.kumeiwp.com/sub/filestores/2022/03/21/a70a72c70cef164b3d75bbbabc6f48f3.mp3" ></audio>


<script language="javascript">
var mu = document.getElementById('music');
var btn = document.getElementById('picBtn');
btn.onclick = function(){
      mu.paused ? (mu.play(), btn.style.background="url('http://image.hnol.net/c/2022-02/23/01/2022022301050291-5087368.gif ')") : (mu.pause(), btn.style.background="url('http://image.hnol.net/c/2022-02/23/01/202202230106029651-5087368.gif')");
}
mu.addEventListener("ended", function(){
      btn.style.background="url('http://image.hnol.net/c/2022-02/23/01/202202230106029651-5087368.gif')";
});


document.getElementById("outer").innerHTML += setKedu();
godPush();

function godPush() {
/*   上帝之手 : 时钟的第一推动力→无尽永动
      ① 确定初始角度并旋转指针         ② 调用创建keyframes函数
      ③ 现实年月日星期信息
*/
      let dayStr = "日一二三四五六";
      let now = new Date();
      let      hr = now.getHours() > 12 ? now.getHours() - 12 : now.getHours(),
                min = now.getMinutes(),
                sec = now.getSeconds(),
                msec = now.getMilliseconds(),
                yy = now.getFullYear() + "年",
               mm = (now.getMonth() + 1) + "月",
                dt = now.getDate() + "日",
                dd = "<br>星期" + dayStr.charAt(now.getDay());
      let      hDeg = hr * 30 + (min * 6 / 12),
                mDeg = min * 6 + (sec * 6 / 60),
                sDeg = sec * 6 + (msec * 0.36 / 1000);
      document.getElementById("nyrx").innerHTML = yy + mm + dt + dd;
      document.getElementById("hr-hand").style.transform = "rotate(" + hDeg + "deg)";
      document.getElementById("min-hand").style.transform = "rotate(" + mDeg + "deg)";
      document.getElementById("sec-hand").style.transform = "rotate(" + sDeg + "deg)";
      createkeyFrames("sec-hand", "secRoll", 60,sDeg);
      createkeyFrames("min-hand", "minRoll", 3600,mDeg);
      createkeyFrames("hr-hand", "hrRoll", 43200,hDeg);
}

function setKedu() {
/*   绘制60个刻度 被5整除为整点刻度      */
      let str = "", bigKedu = "";
      for(i = 0;i < 60;i ++) {
                bigKedu = i % 5 == 0? "background: #2f4f4f; width: 5px; height: 7px;" : "";
                str += "<div class='kedu' style='transform: rotate(" + (i * 6) + "deg);" + bigKedu +

"'></div>";
      }
      return str;
}

function createkeyFrames(el,name,dur,angle) {
/*      创建keyframes动画
      el : 元素id名称
      name : keyframes名称
      dur : duration 动画运行周期
      angle : 初始角度
*/
      let kStr = '@keyframes ' + name + '{to { transform: rotate(' + (360 + angle) + 'deg) } }';
      let style = document.createElement('style');
      style.type = 'text/css';
      style.innerHTML = kStr;
      document.getElementById(el).appendChild(style);
      document.getElementById(el).style.animation = name + " " + dur + "s linear infinite";
}

</script>
<br><br><br><br><br><br><br><br>

红影 发表于 2022-3-21 21:57

队长又做一个啊，好听{:4_187:}

加林森 发表于 2022-3-21 22:01

红影 发表于 2022-3-21 21:57
队长又做一个啊，好听

巩固一下。{:4_189:}

朵拉 发表于 2022-3-21 23:06

好像2分35秒开始另一段美妙{:4_173:}

加林森 发表于 2022-3-21 23:13

朵拉 发表于 2022-3-21 23:06
好像2分35秒开始另一段美妙

朵拉来啦，是的是的。{:4_187:}{:4_190:}

马黑黑 发表于 2022-3-22 19:38

帖子干净清爽，音乐合适这样的景象。好作品。

加林森 发表于 2022-3-22 19:40

马黑黑 发表于 2022-3-22 19:38
帖子干净清爽，音乐合适这样的景象。好作品。

嗯嗯，谢谢老黑指点。{:4_190:}

马黑黑 发表于 2022-3-22 19:55

加林森 发表于 2022-3-22 19:40
嗯嗯，谢谢老黑指点。

说谢谢言重了

加林森 发表于 2022-3-22 21:00

马黑黑 发表于 2022-3-22 19:55
说谢谢言重了

嗯嗯，干杯{:4_191:}
页: [1]
查看完整版本: 《千年の祈り》 - 姫神