本帖最后由 南无月 于 2023-7-17 22:19 编辑 <br /><br /> <style>
#mydiv { margin: 0 0 0 calc(50% - 740px); width: 1300px; height: 700px;
background: url('https://s1.ax1x.com/2023/07/17/pCocmZV.jpg') no-repeat center/cover;
box-shadow: 0 0 8px 0 #000; opacity: .95; overflow: hidden; z-index: 1; position: relative; --state: paused; }
#lrc { position: absolute; top: 20px; left: 50%; transform: translate(-50%); font: bold 2.4em sans-serif; color: hsl(0,10%,90%); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0,0%,0%,.95)); --motion: cover2; --tt: 5s; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap; background: linear-gradient(180deg,hsla(60,100%,50%,.45),hsla(0,100%,50%,.75)); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards var(--state); }
pinpu-wrapper { position: absolute; bottom: 0; left: 75%; transform: translate(-50%); cursor: pointer; z-index: 99;}
pin-pu { position: absolute; bottom: 0; animation: pinpuMotion var(--du) var(--delay) infinite alternate linear var(--state);}
.mybox { position: absolute; bottom: -100px; left: calc(70% - 25px); font-size: 50px; animation: up 8s var(--delay) infinite linear var(--state); --delay: 0s; --deg: -45deg; opacity: .60;}
.mybox:nth-of-type(2) { --delay: -2s; --deg: -45deg; }
.mybox:nth-of-type(3) { --delay: -4s; --deg: -45deg; }
.mybox:nth-of-type(4) { --delay: -6s; --deg: -45deg; }
@keyframes pinpuMotion { from { height: 0px; } to { height: var(--height); } }
@keyframes up { to { transform: rotate(var(--deg)) translateY(-650px); } }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
</style>
<div id="mydiv">
<span class="mybox"><img src=https://www.emojiall.com/images/240/telegram/2728.gif></span>
<span class="mybox"><img src=https://www.emojiall.com/images/240/telegram/2728.gif></span>
<span class="mybox"><img src=https://www.emojiall.com/images/240/telegram/2728.gif></span>
<span class="mybox"><img src=https://www.emojiall.com/images/240/telegram/2728.gif></span>
<pinpu-wrapper></pinpu-wrapper>
<div id="lrc"data-lrc="花潮lrc在线">花潮lrc在线</div>
<css-doodle>:doodle { @grid: 8x8 / 1300px 768px; } :container {perspective: 1000px;transform-style: preserve-3d;}@place-cell: center;left:370px;top:300px;@random {width: @rand(1, 60)vmin;height: @rand(1, 30)vmin;border-radius: 50%;border: 2px dashed Tomato;transform-style: preserve-3d;will-change: transform, opacity;animation: rotate 10s infinite -@rand(30)s linear alternate var(--state);transform-origin: center center;}
@keyframes rotate {0% {transform: translate3d(0, 0, 0) rotate(0);opacity: 0;}5% {opacity: 1;}70% {transform:translate3d(0, 0, 20vmin)rotateX(calc(@p(-2, 2) * @r(15deg, 165deg)))rotateY(calc(@p(-2, 2) * @r(15deg, 165deg)))rotateZ(calc(@p(-2, 2) * @r(15deg, 165deg)))}100% {transform: translate3d(1, 0, 1) rotate(0);opacity: 0;}}
</css-doodle>
</div>
<audio id="aud"src="https://music.163.com/song/media/outer/url?id=1939754622" autoplay loop></audio>
<script>
~function() {
let script = document.createElement('script');
script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js'; //’’'http://mahei.freeee.ml/api/css-doodle.js';
document.head.appendChild(script);
let pinpuNum = 60, pinpuWidth = 4, pinpuHeight = 160, mKey = 0, mFlag = true, slip = 0.2;
let ppwrap = document.querySelector('pinpu-wrapper');
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
let mState = () => aud.paused ? (mydiv.style.setProperty('--state','paused'), lrc.style.setProperty('--state','paused')) : (mydiv.style.setProperty('--state','running'), lrc.style.setProperty('--state','running'));
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrc.dataset.lrc = lrcAr;lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
let calcKey = () => {for(j = 0; j < lrcAr.length; j ++) {if(aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if(mKey <0) mKey = 0;if(mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
let msort = (ar) => {let newAr = [];ar.forEach((v,k) => k % 2 === 0 ? newAr.unshift(v) : newAr.push(v));return newAr;}
~function() {let ar = Array.from(Array(pinpuNum), (v,k) => pinpuNum - k -1);Array.from({length: pinpuNum}).forEach((item,key) => {item = document.createElement('pin-pu');item.style.cssText += `width: ${pinpuWidth}px;left: ${(pinpuWidth + 2) * key}px;background: #${Math.random().toString(16).substr(-6)};--height: ${15 + (pinpuHeight - 15) / pinpuNum * msort(ar)}px;--du: ${Math.random() * .3 + .3}s;--delay: -${Math.random()}s;`;ppwrap.appendChild(item);});ppwrap.style.height = `${pinpuHeight}px`;ppwrap.style.width = `${(pinpuWidth + 2) * pinpuNum}px`;}();
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('seeked', calcKey, false);
aud.addEventListener('timeupdate', () => {
for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr + slip) {cKey = j;if (mKey === j) showLrc(lrcAr);else continue;}}});
ppwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
}();
</script>
马黑黑 发表于 2023-7-2 19:50
找找原因
找啊找啊找到了{:4_173:}
千羽 发表于 2023-7-2 21:21
排排队的小乌龟和各色漂亮的鱼儿同框，海底世界景色是美美哒
千羽早啊{:4_187:}。。。这个海底整了个视频，相中它的动态美景
千羽 发表于 2023-7-2 21:23
那艘沉船残骸是它们的家吧月儿的创意真好，想得周到呢
这个吧是凑巧，有点玄学的意思{:4_170:}
南无月 发表于 2023-7-3 08:44
找啊找啊找到了
腻害
南无月 发表于 2023-7-3 08:43
先晕着，听说晕晕更健康
我再后院发了个帖，可以帮助理解这个问题
南无月 发表于 2023-7-3 08:42
真会给自家打广告
{:4_172:}
南无月 发表于 2023-7-3 08:42
我就即见即点，看到图标点下去没错吧。。
我要这个图标就点这个图标，它就只有复制。。。点几次复制几个 ...
每一个 Emoji 图标都有自己的各进制编码，这个容易找的
马黑黑 发表于 2023-7-3 08:46
腻害
我小站里的那个鱼嘴巴太尖吐泡泡不方便，想改成 content: '\1F40B';你给我提供的这个鲸鱼，去了斜杠又不行，所以就又卡住了一次……
马黑黑 发表于 2023-7-3 08:46
我再后院发了个帖，可以帮助理解这个问题
看到你发新贴了上来瞧瞧，马上去
马黑黑 发表于 2023-7-3 08:48
每一个 Emoji 图标都有自己的各进制编码，这个容易找的
{:4_170:}难者不会会者不难，自从你说可以找编码我就四处找。。。。。。
马黑黑 发表于 2023-7-3 08:47
第三次更改，改了吐泡泡的旋转角度。。。。
南无月 发表于 2023-7-3 09:51
第三次更改，改了吐泡泡的旋转角度。。。。
辛苦哈，从中可以慢慢领悟一些道理来
南无月 发表于 2023-7-3 09:12
难者不会会者不难，自从你说可以找编码我就四处找。。。。。。
这个问题已经恢复，请认真查阅就好
南无月 发表于 2023-7-3 09:11
看到你发新贴了上来瞧瞧，马上去
{:4_190:}
南无月 发表于 2023-7-3 09:11
我小站里的那个鱼嘴巴太尖吐泡泡不方便，想改成 content: '\1F40B';你给我提供的这个鲸鱼，去了斜杠又不 ...
需要明白发帖的小技巧小技能小窍门小功夫小妙招……{:4_170:}
南无月 发表于 2023-7-3 09:51
第三次更改，改了吐泡泡的旋转角度。。。。
这个帖子太不容易了，月儿修改了那么多次{:4_199:}
单位的电脑上都能看到。那个小鲸鱼真有趣，好像有露出8颗牙齿的标准笑容。
这个泡泡转动后很有趣，好像边往外吐边往回收呢{:4_173:}
马黑黑 发表于 2023-7-3 11:48
辛苦哈，从中可以慢慢领悟一些道理来
改来改去，每改一次都学到点东西，这叫做磨贴。{:4_170:}
马黑黑 发表于 2023-7-3 11:53
这个问题已经恢复，请认真查阅就好
很认真的阅读并执行{:4_189:}