论坛 › 祝福礼堂 › 给有声有色转个轱辘

樵歌 发表于 2023-6-17 20:09

给有声有色转个轱辘

<style>
#papa { left: -252px;top:120px; width: 1100px; height: 618px; background: gray url('https://pic.imgdb.cn/item/648da1791ddac507cc25be0c.jpg')
no-repeat center/cover; box-shadow: 4px 4px 24px #000; position: relative; }
#mama { position: absolute; left: 100px; top: calc(50% - 140px); display: grid; place-items: center; width: 360px; height: 360px; cursor: pointer; }
#tit { position: absolute; left: 26px; top: 46px; font: bold 26px / 26px sans-serif; color: #4D0CAF; text-shadow: 1px 1px 2px rgba(0,0,0,.8); }
.txt { position: absolute; width: 60px; height: 60px; font: bold 40px / 60px sans-serif; text-align: center; text-shadow: 2px 2px 4px rgba(0,0,0,.4); border-radius: 50%; color: snow; }
</style>

<div id="papa">
        <span id="tit">给有声有色转个轱辘</span>
        <div id="mama"><span id="sMsg" class="txt">1</span></div>
      <div style="position: absolute; left:560px; top: 250px; width:451px;">
                <img alt="" src="https://pic.imgdb.cn/item/62479cbe27f86abb2adbb9bd.gif"/></div>
</div><br><br><br><br><br><br>

<script>
let idx = 0, step = 0;
let strAr = '有赞评弹润色有琴声诉剧幽情'.split(''), spans = [],
        sentences = [
                ,
                ,
                ,
                ,
                ,
                ,
                ,
                ,
                ,
                ,
                ,
                ,
                ,
                ,
                ,
                ,
        ];
let aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=1492632487.mp3';
aud.loop = true;
aud.autoplay = true;

let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;

for(let x in strAr) {
        let ele = document.createElement('span');
        ele.className = 'txt';
        ele.innerText = strAr;
        ele.style.transform = `rotate(${x*27.6}deg) translateY(180px) rotate(${-x*27.6}deg)`;
        mama.appendChild(ele);
        spans.push(ele);
}

txtColor()
txtCircle();

mama.onclick = () => aud.paused ? aud.play() : aud.pause();

function txtColor() {
        for(let y of spans) {
                y.style.color = 'snow';
                y.style.border = 'none';
        }
        for(let x of sentences) spans.style.color = `rgb(${num(0,255)},${num(0,255)},${num(0,255)})`;
        sMsg.innerText = idx + 1;
}

function txtCircle() {
        let x = sentences;
        spans.style.border = '1px solid purple';
        step ++;
        if(step > sentences.length - 1) {
                step = 0;
                idx ++;
                if(idx > sentences.length - 1) idx = 0;
                txtColor();
        }
        setTimeout(txtCircle, 1500);
}
</script>

樵歌 发表于 2023-6-17 20:09

读法：
三言：诉，剧幽情，有赞评。弹润色，有琴声。
四言：诉剧幽情，情有赞评，评弹润色，色有琴声。
五绝：声诉剧幽情，幽情有赞评。赞评弹润色。润色有琴声。
七绝：有琴声诉剧幽情，诉剧幽情有赞评。情有赞评弹润色，评弹润色有琴声。

樵歌 发表于 2023-6-17 20:10

@有声有色

樵歌 发表于 2023-6-17 20:11

本来打算把先生的视频加进轱辘里，可弄了一下午，都没成功{:4_201:}

马黑黑 发表于 2023-6-17 20:24

{:4_199:}

红影 发表于 2023-6-17 20:26

这个厉害了，有声有色老师的ID里两个有字，被师兄嵌入无痕，而且嵌入评弹两字，这个太不容易了{:4_199:}

红影 发表于 2023-6-17 20:27

樵歌 发表于 2023-6-17 20:11
本来打算把先生的视频加进轱辘里，可弄了一下午，都没成功

师兄这个背景图已经选得非常好了呢，很赞的{:4_199:}

红影 发表于 2023-6-17 20:28

师兄发在这个版里，高亮色都不知道用什么好了，只加精不高亮了吧{:4_173:}

小文 发表于 2023-6-17 20:30

欣赏师叔大作佳构！{:4_191:}{:4_190:}

梦油 发表于 2023-6-17 20:54

制作精巧、拍案叫绝！

千羽 发表于 2023-6-17 21:01

樵歌老师这个背景图太精彩了，意境满满啊。音乐也配的正好，画面上的轱辘转的有声有色，真可谓是{:4_187:}{:4_199:}{:4_178:}美轮美奂！

千羽 发表于 2023-6-17 21:03

再次和那古人儿一起欣赏美丽的山光水色{:4_173:}

醉美水芙蓉 发表于 2023-6-17 21:13

樵歌 发表于 2023-6-17 21:52

醉美水芙蓉 发表于 2023-6-17 21:13
欣赏樵歌佳作！

算不得佳作，老一套哈{:4_173:}

樵歌 发表于 2023-6-17 21:58

红影 发表于 2023-6-17 20:27
师兄这个背景图已经选得非常好了呢，很赞的

我把你那代码合到那视频上，弄不起来连改连删弄了两个多小时，弄不起来{:4_173:}

樵歌 发表于 2023-6-17 22:00

红影 发表于 2023-6-17 20:26
这个厉害了，有声有色老师的ID里两个有字，被师兄嵌入无痕，而且嵌入评弹两字，这个太不容易了

这不都根据他发帖特点凑的{:4_173:}

樵歌 发表于 2023-6-17 22:01

红影 发表于 2023-6-17 20:28
师兄发在这个版里，高亮色都不知道用什么好了，只加精不高亮了吧

等收礼人来收了，取消精华吧。这一库也太多了。汗

樵歌 发表于 2023-6-17 22:02

小文 发表于 2023-6-17 20:30
欣赏师叔大作佳构！

谢谢小文谬赞了{:4_190:}

樵歌 发表于 2023-6-17 22:03

梦油 发表于 2023-6-17 20:54
制作精巧、拍案叫绝！

老哥又谬赞了{:4_190:}

樵歌 发表于 2023-6-17 22:05

千羽 发表于 2023-6-17 21:01
樵歌老师这个背景图太精彩了，意境满满啊。音乐也配的正好，画面上的轱辘转的有声有色，真可谓是{ ...

哈哈，千羽真不吝夸奖之词！只能说根据有声老师特点凑的{:4_173:}

查看完整版本: 给有声有色转个轱辘