樵歌 发表于 2023-6-3 07:47

给梦缘转个轱辘

<style>
#papa { left: -252px;top:120px; width: 1100px; height: 618px; background: gray url('https://pic.imgdb.cn/item/64796a3ff024cca173386eed.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=1947785810.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-3 07:47

读法三言：梦。醒无痕。影不存，缘久忆，远人魂。四言：梦醒无痕，痕影不存。存缘久忆，忆远人魂。五绝：魂梦醒无痕，无痕影不存。不存缘久忆，久忆远人魂。七绝：远人魂梦醒无痕，梦醒无痕影不存。痕影不存缘久忆，存缘久忆远人魂。

樵歌 发表于 2023-6-3 07:47

奇怪了，最近艾特都是灰的{:4_203:}

樵歌 发表于 2023-6-3 07:50

@梦缘

红影 发表于 2023-6-3 10:35

樵歌 发表于 2023-6-3 07:47
读法三言：梦。醒无痕。影孤存，缘久忆，远人魂。四言：梦醒无痕，痕影孤存。存缘久忆，忆远人魂。五绝：魂 ...

师兄，“孤”字当用仄吧，否则出律了呢{:4_187:}

红影 发表于 2023-6-3 10:36

樵歌 发表于 2023-6-3 07:47
奇怪了，最近艾特都是灰的

没事，灰色的也能收到的呢。

一斛珠 发表于 2023-6-3 11:05

玩这个费脑细胞，樵歌好才情，给你点赞

一斛珠 发表于 2023-6-3 11:08

看景，抒情，听音乐，美哉。

一斛珠 发表于 2023-6-3 11:09

梦姑娘收礼快乐

樵歌 发表于 2023-6-3 13:14

红影 发表于 2023-6-3 10:35
师兄，“孤”字当用仄吧，否则出律了呢

哈，原来一直把孤当仄声呢，师妹这一说，不但这，怕是以前也有错了的{:4_201:}

樵歌 发表于 2023-6-3 13:14

红影 发表于 2023-6-3 10:36
没事，灰色的也能收到的呢。

灰色的收不到

樵歌 发表于 2023-6-3 13:16

一斛珠 发表于 2023-6-3 11:05
玩这个费脑细胞，樵歌好才情，给你点赞

玩这个跟填词差不多，套路熟悉了，好弄的。只是找适合意境的图图和音乐要花时间。{:4_173:}

樵歌 发表于 2023-6-3 13:17

一斛珠 发表于 2023-6-3 11:08
看景，抒情，听音乐，美哉。

觉得这个图景和音乐和文字还比较配{:4_174:}

红影 发表于 2023-6-3 16:41

樵歌 发表于 2023-6-3 13:14
哈，原来一直把孤当仄声呢，师妹这一说，不但这，怕是以前也有错了的

是师兄那边的地方发音造成的吧{:4_173:}

红影 发表于 2023-6-3 16:43

樵歌 发表于 2023-6-3 13:14
灰色的收不到

可能没清理后台缓存造成的，我去清理一下。。。

樵歌 发表于 2023-6-3 20:02

红影 发表于 2023-6-3 16:41
是师兄那边的地方发音造成的吧

好象有次在哪里用过，以后就凭感觉马虎了

樵歌 发表于 2023-6-3 20:05

红影 发表于 2023-6-3 16:43
可能没清理后台缓存造成的，我去清理一下。。。

应该不是，可能我电脑问题！特别回帖时跳不到当前页！有时干脆用平板回，立马就回到当前要回处了。也不知道啥原因

梦缘 发表于 2023-6-3 21:27

感谢老师的精彩分享，评分没了，明天补上。{:4_190:}

梦缘 发表于 2023-6-3 21:28

樵歌 发表于 2023-6-3 07:47
读法三言：梦。醒无痕。影不存，缘久忆，远人魂。四言：梦醒无痕，痕影不存。存缘久忆，忆远人魂。五绝：魂 ...

这写得深奥了，多谢老师。{:4_191:}

红影 发表于 2023-6-3 22:35

樵歌 发表于 2023-6-3 20:02
好象有次在哪里用过，以后就凭感觉马虎了

没事啊，下次就知道了{:4_173:}
页: [1] 2 3
查看完整版本: 给梦缘转个轱辘