论坛 › 欢乐水吧 › 学习套用亚伦老师代码 向老师致谢！

老谟深虑 发表于 2025-2-8 10:45

学习套用亚伦老师代码 向老师致谢！

<br /><br /><style>
#papa { margin: 10px 0 20px calc(50% - 721px); background:#800000 url('https://cccimg.com/view.php/d89238bd404a065f2a92011c49859db5.jpg') no-repeat 80% 40%/50%;width: 1286px; height: 720px;   box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center;--state: running; }
.turntable{
    position: absolute;
display: block;
top:30%;
   left: 10%;
background:#660000;
width: 310px;
height:280px;
border-radius: 5%;
box-shadow: inset 0 0 8px #000;
}

.record {
position: absolute;
left: 35px;
top: 35px;
width: 200px;
height: 200px;
background: black;
border-radius: 50%;
animation: spin 2s infinite linear var(--state);
}
@keyframes spin {
0% {transform: none;
}
100% {transform: rotate(360deg);
}
}

.record::before {
content: '';
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
position: absolute;
width: 180px;
height: 180px;
background:**(black, black 5px, #1C1C1C 6px, #1C1C1C 7px);
border-radius: 50%;
}

.overlay {
content: '';
left: 35px;
top: 35px;
position: absolute;
width: 200px;
height: 200px;
background: **(45deg, transparent, 40%, rgba(255,255,255,0.25), 60%, transparent);
border-radius: 50%;
}

.inner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 55px;
height: 55px;
background: -webkit-gradient(linear, left top, left bottom, from(white), color-stop(50%, white), color-stop(50%, #F796A8), to(#F796A8));
background: linear-gradient(white, white 50%, #F796A8 50%, #F796A8);
border-radius: 50%;
}


.inner::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 10px;
height: 10px;
background: #333;
border-radius: 50%;
}

.inner::after {
content: '亚伦影音 yinyue changdie';
width: 55px;
text-align: center;
font-family: sans-serif;
font-size: 8px;
position: absolute;
left: 50%;
top: 10px;
transform: translateX(-50%);
}

#arm-holder {
position: absolute;
width: 40px;
height: 40px;
background: #111;
border-radius: 50%;
right: 20px;
top: 40px;
}

#arm-holder::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
background: #999;
border-radius: 50%;
}

#arm {
position: absolute;
right: 13px;
width: 50px;
top: 10px;
height: 110px;
border: 10px solid #999;
transform: skew(-20deg, -20deg);
transform-origin: top right;
border-left-color: transparent;
border-top-color: transparent;
border-radius: 0 0 30% 0;
animation: armTwitch 1s infinite var(--state);
animation-direction: alternate-reverse;
}
@keyframes armTwitch {
0% {transform: skew(-20deg, -20deg);
}
100% {transform: skew(-20deg, -20deg) rotate(1deg);
}
}

#arm::before {
content: '';
position: absolute;
width: 20px;
height: 30px;
background: gray;
transform: skew(20deg, 20deg) rotate(75deg);
top: 98px;
left: -10px;
border-radius: 20%;
clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
}
#armm {
position: absolute;
right: 16px;
width: 38px;
top: 20px;
height: 150px;
border: 8px solid #999;
transform: skew(-20deg, -20deg)rotate(-20deg);
transform-origin: top right;
border-left-color: transparent;
border-top-color: transparent;
border-radius: 0 0 45% 0%;
opacity:0;
animation-direction: alternate-reverse;
}


#armm::before {
content: '';
position: absolute;
width: 25px;
height: 22px;
background: gray;
transform: skew(10deg, 20deg) rotate(80deg);
top: 142px;
left: -16px;
border-radius: 20%;
clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
}

.dial {
position: absolute;
bottom: 20px;
right: 20px;
width: 25px;
height: 25px;
background: #333;
border-radius: 50%;
}

.dial::before {
content: '';
left: 50%;
transform: translateX(-50%);
top: 2px;
position: absolute;
width: 2px;
height: 5px;
background: white;
border-radius: 50%;
}

    #bnt{left: 20px;bottom: 20px;position:absolute; z-index: 40;border: 0px solid #ff3300; width:50px;overflow: hidden;
      height: 50px;
             border-radius: 0%;cursor: pointer;}

#pic{position:absolute;top:25px; left:28px;background:#ccc;
transform: translate(-50%, -50%);
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 0, 50% 0, 50% 100%, 75% 100%, 75% 0);
      width:25px;
      height: 25px;}
#picc{opacity:0;position:absolute;top:25px; left:30px;background:#ccc; transform: translate(-50%, -50%);
   clip-path: polygon(75% 50%, 0 0, 0 100%);
      width:25px;
      height: 25px;}
.progress {display: flex;align-items: center;
      justify-content: space-between;width: 100%;
      position:absolute;bottom: 10px;
   left: 0px;height:30px;
    }

    .progress-bar {bottom: 0px;
      position:relative;
      width: 100%;
      height: 3px;
      background-color: #eee;
   left: 0px;border-radius: 20px;
      cursor: pointer;
    }

    .now {
      position: absolute;
      left: 0%;
      display: inline-block;
      height: 3px;border-radius: 20px;
      width: 94%;
      background: #ff0000;
    }

    .now::after {
      content: '';
      position: absolute;
      left: 100%;
      width: 8px;margin: -2px -2px;
      height: 8px;border-radius: 50px;
      background-color: #ff0000;
    }
.start{color: #fff; font: 400 12px sans-serif; margin: 0 10px;}
.end{color: #fff; font: 400 12px sans-serif;margin: 0 10px;}
.lrc{
    width: 100%;
    height: 120px;
    overflow: hidden;bottom: 0px;
    display: block; position:absolute;z-index: 5;
    margin: 0px auto;}
.lrc #ullrc{
width: 100%;
padding: 0;list-style: none;transition: 0.3s all ease;
    margin: 0;}
/*歌词普通样式*/
.lrc #ullrc li{
    height: 70px;
    line-height: 60px;
font-family:华文隶书;
    font-size: 0px;
    color: #000078;
    font-weight: normal;
    transition: .3s all ease;
    list-style-type: none;
    text-align: center;display: block;
    width: 100%;
    margin: 0 auto;}
/*动态歌词样式*/
.lrc #ullrc li.active{
    font-size: 40px;
    color: #ff0000;
text-align: center;text-align: center;color: transparent; background: repeating-linear-gradient(to right, gold, lightgreen, snow, lightgreen, orange) 50%/200px 60px; -webkit-background-clip: text;filter:drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px0); }
#fullscreen { opacity:1;position: absolute; width: 25px; height: 25px;   bottom: 50px; cursor: pointer;right: 25px;z-index: 40;}
#papa:hover #fullscreen { opacity:1;}
#全屏{ width: 25px; height: 25px; position: absolute;background:url(https://pic1.imgdb.cn/item/6774df83d0e0a243d4ed4fd7.png)no-repeat center/cover;}
#退出{ width: 25px; height: 25px; position: absolute;opacity:0;background:url(https://pic1.imgdb.cn/item/6774df8bd0e0a243d4ed4fd9.png)no-repeat center/cover; }
</style>
<div id="papa">


<div class="turntable">
    <div class="record">
      <div class="inner"></div>
    </div>
    <div class="overlay"></div>
    <div id="arm-holder">
      <div id="arm"></div>

      <div id="armm"></div>
    </div>

    <div class="dial"></div>

<div id="bnt"title="暂停/播放" >
<div id="pic"></div>
<div id="picc"></div>
</div>
</div>


<div class="progress">
      <span class="end">00:00</span>

      <div class="progress-bar">
      <div class="now"></div>
      </div>
   <span class="start">00:00</span>
</div>

<div class="lrc">
      <ul id="ullrc">
         </ul>
      </div>

<div id="fullscreen" title="全屏展示/退出全屏">
<div id="全屏"></div>
<div id="退出" ></div>
</div>
   </div>
<audio id="aud"autoplay>
            <source src="https://cccimg.com/view.php/151ba97f0e356e1f540ac354c434db8f.mp3" type="audio/mpeg">
         </audio>

<script>


bnt.onclick = () => aud.paused ?(aud.play(),armm.style.opacity= '0',arm.style.opacity = '1',picc.style.opacity= '0',pic.style.opacity = '1') : (aud.pause(),armm.style.opacity = '1',arm.style.opacity = '0',picc.style.opacity= '1',pic.style.opacity = '0');
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mState = () => {papa.style.setProperty('--state', aud.paused ? 'paused' : 'running')};
aud.onplaying = aud.onpause = () => mState();

const audio = document.getElementById('aud')
const start = document.querySelector('.start')
const end = document.querySelector('.end')
const progressBar = document.querySelector('.progress-bar')
const now = document.querySelector('.now')

function conversion (value) {
    let minute = Math.floor(value / 60)
    minute = minute.toString().length === 1 ? ('0' + minute) : minute
    let second = Math.round(value % 60)
    second = second.toString().length === 1 ? ('0' + second) : second
    return `${minute}:${second}`
}

aud.onloadedmetadata = function () {
    end.innerHTML = conversion(aud.duration)
    start.innerHTML = conversion(aud.currentTime)
}

progressBar.addEventListener('click', function (event) {
    let coordStart = this.getBoundingClientRect().left
    let coordEnd = event.pageX
    let p = (coordEnd - coordStart) / this.offsetWidth
    now.style.width = p.toFixed(3) * 100 + '%'

    aud.currentTime = p * aud.duration
    aud.play()
})

setInterval(() => {
    start.innerHTML = conversion(aud.currentTime)
    now.style.width = aud.currentTime / aud.duration.toFixed(3) * 100 + '%'
}, 1000)
let fs= true;
fullscreen.onclick = () => {
      fs ? (papa.requestFullscreen(),全屏.style.opacity= '0',退出.style.opacity = '1') : ( document.exitFullscreen(),全屏.style.opacity = '1',退出.style.opacity = '0');
      fs = !fs;
}

</script>
<script >
var lrc = `搀扶（DJ 版）
演唱：魏佳艺
词曲：马健涛
编曲：马健涛
笛子：刘志敏
混音：马健涛
母带：马健涛
出品：星光灿烂
搀扶管它天不长地不久
别哭因为有我把你守
有一天我们走不动了
另外一个时空再相守
多年前我牵了你的手
从此后我们风雨同路走
下雨了我为你撑伞
衣服破了你帮我缝上
一转眼就过许多年
我的脸布满了沧桑
你的眼被皱纹写满
你的美依然在我心田
搀扶你的手到永久
相约今生会一起走
今生我们还没爱够
死后也要葬在一个山头
搀扶管它天不长地不久
别哭因为有我把你守
有一天我们走不动了
另外一个时空再相守
一转眼就过许多年
我的脸布满了沧桑
你的眼被皱纹写满
你的美依然在我心田
搀扶你的手到永久
相约今生会一起走
今生我们还没爱够
死后也要葬在一个山头
搀扶管它天不长地不久
别哭因为有我把你守
有一天我们走不动了
另外一个时空再相守
搀扶你的手到永久
相约今生会一起走
今生我们还没爱够
死后也要葬在一个山头
搀扶管它天不长地不久
别哭因为有我把你守
有一天我们走不动了
另外一个时空再相守
另外一个时空再相守
`;
function $(id) {
    return document.getElementById(id);
}//这样写以后getid方便
function getLrcArray() {
    var parts = lrc.split("\n");
    for (let index = 0; index < parts.length; index++) {
      parts = getLrcObj(parts);
    }
    return parts;

    function getLrcObj(content) {
      var twoParts = content.split("]");
      var time = twoParts.substr(1);
      var timeParts = time.split(":");
      var seconds = +timeParts;
      var min = +timeParts;
      seconds = min * 60 + seconds;
      var words = twoParts;
      return{
            seconds: seconds,
            words: words,
      };
    }
}
var lrcArray = getLrcArray();
function inputLrc() {
    for (let index = 0; index < lrcArray.length; index++) {
      var li = document.createElement("li");
      li.innerText = lrcArray.words;
      $("ullrc").appendChild(li);
    }
}
inputLrc();
function setPosition() {
    var index = getLrcIndex();
    if (index == -1) {
      return;
    }
   var lrc_li_height = 70, lrc_ul_height = 60;/*动态歌词显示的位置：250：第三行变色增大。160：在第二行变化。50：在第一行变化 */
    var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
    if (top < 0) {
      top = 0;
    }
    $("ullrc").style.marginTop = -top + "px";
    var activeLi = $("ullrc").querySelector(".active");
    if(activeLi){
      activeLi.classList.remove("active");
    }
    $("ullrc").children.classList.add("active");
}
var turn = 0;
function getLrcIndex(){
    var time = $("aud").currentTime + turn;
    for (var index = 0; index < lrcArray.length; index++) {
      if (lrcArray.seconds > time) {
            return index - 1;
      }
    }
}
$("aud").ontimeupdate = setPosition;
</script >

老谟深虑 发表于 2025-2-8 10:51

          这是套用亚伦老师的代码制作的，图片：AI制作   歌曲：搀扶演唱：魏佳艺。这么好的代码在离退休论坛就是不能发表，很遗憾。真希望亚伦老师能给它破解。谢谢！

起个网名好难 发表于 2025-2-8 11:50

https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif

起个网名好难 发表于 2025-2-8 11:53

老谟深虑 发表于 2025-2-8 10:51
这是套用亚伦老师的代码制作的，图片：AI制作   歌曲：搀扶演唱：魏佳艺。这么好的代码在离退 ...

这代码在哪过了一道吧被审核给加上**了{:5_102:}

红影 发表于 2025-2-8 13:29

这个帖子内容特别感人，真漂亮{:4_199:}

老谟深虑 发表于 2025-2-8 18:10

起个网名好难 发表于 2025-2-8 11:53
这代码在哪过了一道吧被审核给加上**了

         老师说的对，在离坛就是加上了**，无法发表。老师有办法吗？

老谟深虑 发表于 2025-2-8 18:11

红影 发表于 2025-2-8 13:29
这个帖子内容特别感人，真漂亮

          谢谢老师的支持，问好！

起个网名好难 发表于 2025-2-8 19:03

老谟深虑 发表于 2025-2-8 18:10
老师说的对，在离坛就是加上了**，无法发表。老师有办法吗？

发空间帖

红影 发表于 2025-2-8 22:09

老谟深虑 发表于 2025-2-8 18:11
谢谢老师的支持，问好！

不客气啊，问好老谟深虑，晚上好{:4_187:}

老谟深虑 发表于 2025-2-9 07:52

起个网名好难 发表于 2025-2-8 19:03
发空间帖

         发空间贴是啥意思？我没懂。

梦江南 发表于 2025-2-9 08:33

欣赏漂亮的音画制作。新春快乐！

起个网名好难 发表于 2025-2-9 12:40

老谟深虑 发表于 2025-2-9 07:52
发空间贴是啥意思？我没懂。

1. 把完整的帖子代码保存为 html 文件；
2. 把这 html文件上传到一个可以允许上传html文件并能获得外链的网站；
3. 用 iframe 在离网发布。

老谟深虑 发表于 2025-2-9 16:01

起个网名好难 发表于 2025-2-9 12:40
1. 把完整的帖子代码保存为 html 文件；
2. 把这 html文件上传到一个可以允许上传html文件并能获得外链 ...

         谢谢老师，我明白了，可以试试。但在我的印象里，html文件离坛好像不行。

老谟深虑 发表于 2025-2-9 16:03

梦江南 发表于 2025-2-9 08:33
欣赏漂亮的音画制作。新春快乐！

         谢谢老师的支持，新春快乐！

起个网名好难 发表于 2025-2-9 18:00

老谟深虑 发表于 2025-2-9 16:01
谢谢老师，我明白了，可以试试。但在我的印象里，html文件离坛好像不行。

我的帖子《重庆轻轨》就是这样发的。

老谟深虑 发表于 2025-2-10 15:08

起个网名好难 发表于 2025-2-9 18:00
我的帖子《重庆轻轨》就是这样发的。

          难难老师，按着你的办法，我试验成功了，已经在离坛发表了。非常高兴，再次向你致以崇高的敬礼！谢谢！

起个网名好难 发表于 2025-2-10 16:57

老谟深虑 发表于 2025-2-10 15:08
难难老师，按着你的办法，我试验成功了，已经在离坛发表了。非常高兴，再次向你致以崇高的敬礼 ...

{:5_116:}

小辣椒 发表于 2025-2-13 16:56

老谟太棒了，制作的漂亮，套用亚纶的代码制作配上动感音乐，特别相配{:4_178:}

老谟深虑 发表于 2025-2-14 12:19

小辣椒 发表于 2025-2-13 16:56
老谟太棒了，制作的漂亮，套用亚纶的代码制作配上动感音乐，特别相配

         谢谢你的支持和鼓励，祝你新春快乐！

查看完整版本: 学习套用亚伦老师代码 向老师致谢！