樵歌 发表于 2023-7-16 11:28

给芊芊转个轱辘

<style>
#papa { left: -252px;top:120px; width: 1100px; height: 618px; background: gray url('https://pic.imgdb.cn/item/64b360c81ddac507cc4d556f.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=2029453939.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-7-16 11:28

@芊芊

樵歌 发表于 2023-7-16 11:28

读法：
三言：镜。照芊芊，丽若前，归叶落，月儿圆。
四言：镜照芊芊，芊丽若前，前归叶落。落月儿圆。
五绝：圆镜照芊芊，芊芊丽若前。若前归叶落，叶落月儿圆。
七绝：月儿圆镜照芊芊，镜照芊芊丽若前。芊丽若前归叶落。前归叶落月儿圆。

红影 发表于 2023-7-16 12:07

这首轱辘诗好，还能将芊芊两字连着用呢。很不容易。{:4_199:}
欣赏师兄好诗，芊芊收礼开心{:4_187:}

红影 发表于 2023-7-16 12:09

这首诗好，选的图图也好，给师兄点赞{:4_187:}

芊芊 发表于 2023-7-16 12:21

谢谢

马黑黑 发表于 2023-7-16 12:57

意境极美

醉美水芙蓉 发表于 2023-7-16 17:42

樵歌 发表于 2023-7-16 19:21

红影 发表于 2023-7-16 12:07
这首轱辘诗好，还能将芊芊两字连着用呢。很不容易。
欣赏师兄好诗，芊芊收礼开心

都是人家芉芉名字取得美，正如芉和圆一个韵部{:4_173:}

樵歌 发表于 2023-7-16 19:22

红影 发表于 2023-7-16 12:09
这首诗好，选的图图也好，给师兄点赞

沒黑师和师妹的代码加持，效果一般呢。

樵歌 发表于 2023-7-16 19:23

芊芊 发表于 2023-7-16 12:21
谢谢

在大锅前就不必客气了{:4_173:}

樵歌 发表于 2023-7-16 19:24

马黑黑 发表于 2023-7-16 12:57
意境极美

谢谢你的代码加持！

樵歌 发表于 2023-7-16 19:25

醉美水芙蓉 发表于 2023-7-16 17:42
欣赏樵歌美贴！

谢谢啦{:4_204:}

红影 发表于 2023-7-16 20:33

樵歌 发表于 2023-7-16 19:21
都是人家芉芉名字取得美，正如芉和圆一个韵部

一般两个相同的字放在轱辘里，还是很不容易的，这首这么好，师兄厉害{:4_187:}

红影 发表于 2023-7-16 20:34

樵歌 发表于 2023-7-16 19:22
沒黑师和师妹的代码加持，效果一般呢。

师兄现在选图越来越美了{:4_187:}

马黑黑 发表于 2023-7-16 20:46

樵歌 发表于 2023-7-16 19:24
谢谢你的代码加持！

{:4_190:}

樵歌 发表于 2023-7-17 10:48

红影 发表于 2023-7-16 20:33
一般两个相同的字放在轱辘里，还是很不容易的，这首这么好，师兄厉害

是名字，放一起最自然的，师妹真是变着法来夸了{:4_173:}

樵歌 发表于 2023-7-17 10:50

红影 发表于 2023-7-16 20:34
师兄现在选图越来越美了

师妹以后可把你写的认为比较有意境的句子输入找图试试{:4_173:}

红影 发表于 2023-7-17 14:19

樵歌 发表于 2023-7-17 10:48
是名字，放一起最自然的，师妹真是变着法来夸了

名字也很多是拆开来嵌字的啊，不是师妹夸，这个是真的好呢{:4_199:}

红影 发表于 2023-7-17 14:19

樵歌 发表于 2023-7-17 10:50
师妹以后可把你写的认为比较有意境的句子输入找图试试

原来师兄是这样的找图图的，这法子还真不错。
页: [1] 2
查看完整版本: 给芊芊转个轱辘