《Dreamland》（学习黑黑跳舞字和《逃离》代码）
<style>#tz {
margin: 60px 0px 30px calc(50% - 721px);
width: 1280px;
height: 700px;
background: blue url('https://pic.imgdb.cn/item/670a922dd29ded1a8c0b7ac7.jpg') no-repeat center/cover;
box-shadow: 3px 3px 6px rgba(0,0,0,.6);
position:relative;
overflow: hidden;
}
#player {
position: absolute;
bottom: 20px;
left: calc(50% - 70px);
width: 140px;
height: 140px;
animation: rot 8s linear infinite var(--state);
}
#pic {
position: absolute;
top: 0px;
mix-blend-mode: screen;
animation: rot1 3s linear alternate infinite var(--state);
}
.waves {
position: absolute;
bottom: 0;
width: 100%;
height: 50%;
}
.wavegroup > use {
animation: waving 25s cubic-bezier(.55,.5,.45,.5) infinite var(--state);
}
.wavegroup > use:nth-child(1) {
animation-delay: -2s;
animation-duration: 7s;
}
.wavegroup > use:nth-child(2) {
animation-delay: -3s;
animation-duration: 10s;
}
.wavegroup > use:nth-child(3) {
animation-delay: -4s;
animation-duration: 13s;
}
.wavegroup > use:nth-child(4) {
animation-delay: -5s;
animation-duration: 30s;
}
#wenzi {
position: absolute;
top: -80px;
left: 160px;
}
@keyframes waving {
0% { transform: translate3d(-90px,0,0); }
100% { transform: translate3d(85px,0,0); }
}
@keyframes rot {
to { transform: rotate(-360deg); filter: hue-rotate(360deg); }
}
@keyframes rot1 {
to { transform: skew(10deg); filter: hue-rotate(40deg); }
}
</style>
<div id="tz">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2008948919" autoplay loop></audio>
<svg class="waves" viewBox="0 24 150 28" xmlns="http://www.w3.org/2000/svg">
<defs>
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
</defs>
<g class="wavegroup">
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(31,242,249,0.4" />
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(31,242,249,0.3)" />
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(31,242,249,0.2)" />
<use xlink:href="#gentle-wave" x="48" y="7" fill="rgba(31,242,249,0.1" />
</g>
</svg>
<svg id="wenzi" width="1000" height="400">
<defs>
<path id="tpath" d="M20 200 Q240 100,500 200 T980 200">
<animate attributeName="d" values="M20 200 Q240 100,500 200 T980 200;M20 200 Q240 300,500 200 T980 200;M20 200 Q240 100,500 200 T980 200" begin="-2s" dur="6s" repeatCount="indefinite"></animate>
</path>
</defs>
<text font-size="30" font-family="LiSu" fill="blue" stroke="BlueViolet" stroke-width="1" dominant-baseline="middle">
<textPath id="txtpath" href="#tpath">梦境朦胧而神秘，如雾般萦绕，仿佛置身于幻妙的世界，有难以言喻的美</textPath>
</text>
</svg>
<img id="player" src="https://pic.imgdb.cn/item/670a96b0d29ded1a8c0f6248.png" atl="" title="play" />
<img id="pic" src="https://pic.imgdb.cn/item/670a9aebd29ded1a8c136b57.jpg" />
</div>
<script>
mState = () => {
tz.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.paused ? (wenzi.pauseAnimations()) : (wenzi.unpauseAnimations());
player.title = aud.paused ? '点击播放' : '点击暂停';
};
aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script> 哇，美女伸手向河里抓鱼，播放器也是由鱼的形状组成，还有上面波浪形的文字，下面也波浪在，太棒了！{:4_187:} 做这个还挺累，为了让跳舞字和波浪频谱差不多，使劲调时间也不行，后来才想起可以begin=""去设定跳舞字开始时间的，设了个正值，发现字儿先是定住的，然后知道可以设负值去匹配两者的互动。
临发帖前才发现没设置跳舞字的暂停，再去找黑黑教过的pauseAnimations()和unpauseAnimations()，还好对这两句还是有印象的，因为我上次输错一个字母的缘故，印象还挺深刻。错了也是好事呢，惭愧让人印象深刻{:4_173:}
好创意！{:4_199:} 那个pauseAnimations()里我留着视频控制的内容了，虽然这个帖子里没使用视频，是为了防止下次使用视频时忘了怎么加。反正留着也没影响的吧@马黑黑 {:4_173:} 跳舞字还是不能和波形完全匹配，先这样吧，主要是为了学点东西的{:4_173:}
好像就在6和7之间，可以设置6.5秒么？
梦江南 发表于 2024-10-13 10:20
哇，美女伸手向河里抓鱼，播放器也是由鱼的形状组成，还有上面波浪形的文字，下面也波浪在，太棒了！{:4_18 ...
你看，美女可以漂浮在水面，这就是个梦，她在打捞梦境中的美好{:4_173:} 梦江南 发表于 2024-10-13 10:22
好创意！
其实看到跳舞字的时候，觉得和波浪有相似的地方，就忍不住把它们并在一起了{:4_173:} 红影 发表于 2024-10-13 10:23
那个pauseAnimations()里我留着视频控制的内容了，虽然这个帖子里没使用视频，是为了防止下次使用视频时忘 ...
可能会出错。一般的做法是，有就有，没有就没有，多余的一是占位置又碍眼，二是可能会出错 马黑黑 发表于 2024-10-13 10:31
可能会出错。一般的做法是，有就有，没有就没有，多余的一是占位置又碍眼，二是可能会出错
嗯嗯，我已经拿掉了，等以后想加视频时再加就是了{:4_173:} 红影 发表于 2024-10-13 10:37
嗯嗯，我已经拿掉了，等以后想加视频时再加就是了
都是些简单的语句 哪里是《梦幻之地》到处是水{:5_106:} 马黑黑 发表于 2024-10-13 10:37
都是些简单的语句
主要经常想不起来啊。还好让视频暂停这个还能记得{:4_173:} 起个网名好难 发表于 2024-10-13 10:46
哪里是《梦幻之地》到处是水
你看，美女可以水上漂，手却能伸进水里，而且水是立体的，这不是梦幻么{:4_189:} 红影 发表于 2024-10-13 10:30
其实看到跳舞字的时候，觉得和波浪有相似的地方，就忍不住把它们并在一起了
羡慕！{:4_204:} 红影 发表于 2024-10-13 11:01
你看，美女可以水上漂，手却能伸进水里，而且水是立体的，这不是梦幻么
梦幻倒是梦幻了，可 land不是水啊{:5_106:} 红影 发表于 2024-10-13 10:21
做这个还挺累，为了让跳舞字和波浪频谱差不多，使劲调时间也不行，后来才想起可以begin=""去设定跳舞字开始 ...
代码就是这么神奇，静止的东西可以让它活起来。{:4_190:} 红影 发表于 2024-10-13 11:00
主要经常想不起来啊。还好让视频暂停这个还能记得
用 . 来操作元素，叫链式操作，点之前指元素，点之后指方法。
例如，假设有一个视频元素的操作句柄 vid（其实就是 video 标签的 id， id="vid" 中的 vid），而 play() 是 video 的播放方法、pause() 是 video 的暂停方法，那么：
vid.play() 就是视频播放；vid.pause() 就是视频暂停。