宋婷婷·知音

马黑黑

马黑黑

代码

<style>     #mydiv { margin: 30px 0 30px calc(50% - 721px); width: 1280px; height:720px; background: url('https://638183.freep.cn/638183/t24/2/viyb.jpg') no-repeat 0/cover; border: thick groove lightpink; overflow: hidden; transition: 1s; z-index: 1; user-select: none; position: relative; }     #mydiv:hover { background-size: 120%; background-position: center; }     .txtbox { position: absolute; display: grid; place-items: center; left: var(--x1); top: 20px; width: 50px; height: 50px; font: normal 30px sans-serif; text-align: center; color: white; box-sizing: border-box; cursor: pointer; }     .txtbox::after { position: absolute; content: ''; inset: -2px; border: 2px dashed gray; border-color: green lightgreen yellow orange; border-radius: 50%; box-shadow: inset 0 0 20px plum; transition: 1s; animation: rot 8s linear var(--delay) infinite var(--state); }     .txtbox:hover::after { box-shadow: inset 0 0 30px green, 0 0 60px white; }     #vid { position: absolute; bottom: 0; width: 100%; height: calc(100% + 60px); object-fit: cover; mix-blend-mode: screen; pointer-events: none; }     @keyframes move1 { to { left: var(--x2); } }     @keyframes move2 { to { left: var(--x1); } }     @keyframes rot { to { transform: rotate(var(--deg)); } } </style>   <div id="mydiv">     <audio id="aud" src="https://music.163.com/song/media/outer/url?id=406737036" autoplay></audio>     <video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/66/5e5a2c53955d7.mp4" loop muted></video> </div>   <script> (function() {     const ar = '高山流水覓知音'.split('');     const ww = 1280, duTime = 16, deTime = 0.5;     const total = duTime + ar.length * deTime + deTime;     let sAr = [], step = 0;//, aniName = 'move1';       ar.forEach((t,k) => {         let span = document.createElement('span');         span.className = 'txtbox';         span.textContent = t;         span.style.cssText += `             --x1: ${ww + k * 60 - ar.length * 60 - 20}px;             --x2: ${k * 60 + 10}px;             --deg: -1turn;             --delay: -${Math.random() * k}s;         `;         sAr.push(span);         mydiv.appendChild(span);     });       let playAni = () => {         let aniName = ['move1','move2'][step % 2];         let deg = ['-1turn','1turn'][step % 2];         sAr.forEach((item,key) => {             item.style.left = ['var(--x1)','var(--x2)'][step % 2];             item.style.setProperty('--deg', deg);             let delay = step % 2 > 0 ? deTime * (sAr.length - key - 1) : deTime * key;             item.style.animation = `${aniName} ${duTime}s ${delay}s linear forwards var(--state)`;         });         step ++;     };       let mState = () => {         mydiv.style.setProperty('--state', ['running','paused'][+aud.paused]);         sAr.forEach(item => item.title = ['暂停','播放'][+aud.paused]);         aud.paused ? vid.pause() : vid.play();     };       aud.loop = false;     aud.onplaying = aud.onpause = () => mState();     aud.onended = () => { step = 0; aud.play(); }     aud.ontimeupdate = () => { if(aud.currentTime >= total * step) playAni(); };       sAr.forEach(item => item.onclick = () =>aud.paused ? aud.play(): aud.pause()); })(); </script>

马黑黑

本帖主要特点：

利用文本生成若干个 span 标签，这些标签可以装饰帖子，同时充当音频的播放控制按钮。

span 标签绝对定位，先排列在帖子的靠右区域，音乐播放时交替运行两套CSS关键帧动画从而左右逐个移动。动画机制算法上似乎不太理想，不过又不是不可以动，将就着用。

span 标签的伪元素 ::after 运行自己的关键帧动画，它可以根据行进方向改变旋转方向。

另，设备指针移入帖子时，:hover 触发的是 background-size 和 background-position 两个属性，前者不响应 transition 时间设定，指针移入移出的动画显得有些突兀，完美的解决方案应该是用伪元素放图、伪元素宽高尺寸变更。

南无月

原来这些字也是小播按纽，功能扩展啦。。
刚才只顾点上去看内光晕和外光晕的变化。。

南无月

背景触碰可以放大缩小，从右往左移动位置~~
user-select: none;这句没见过，不知道干 啥用的。

马黑黑

南无月 发表于 2024-6-4 12:47
背景触碰可以放大缩小，从右往左移动位置~~
user-select: none;这句没见过，不知道干 啥用的。

禁止选择

马黑黑

南无月 发表于 2024-6-4 12:42
原来这些字也是小播按纽，功能扩展啦。。
刚才只顾点上去看内光晕和外光晕的变化。。

齿轮形状挺好看的，全网木有

南无月

马黑黑 发表于 2024-6-4 12:05
本帖主要特点：

利用文本生成若干个 span 标签，这些标签可以装饰帖子，同时充当音频的播放控制按钮。

    #mydiv::before { position: absolute; content: ''; inset: 0; transition: 7s; mix-blend-mode: screen; background: url('https://638183.freep.cn/638183/t24/2/viyb.jpg') no-repeat center/cover; }
        #mydiv:hover::before { transform: scale(1.2); }
用伪元素放图、伪元素宽高尺寸变更，缩放大小很漂亮了。
但从右往左移的动画不见了。。
这两个不能同时存在的么。

南无月

#mydiv:hover::before { transform: scale(1.2); }
#mydiv:hover:before { background-position: center; }

#mydiv:hover::before { transform: scale(1.2); background-position: center; }
分开合起来都不行。。反正试过了~~

梦江南

欣赏老师的又一新作！辛苦了！

马黑黑

梦江南 发表于 2024-6-4 13:18
欣赏老师的又一新作！辛苦了！

马黑黑

南无月 发表于 2024-6-4 13:04
#mydiv:hover::before { transform: scale(1.2); }
#mydiv:hover:before { background-position: center;  ...

css3还是有缺陷的：对 background-* 的绝大多数都不能相应 transition 设定

马黑黑

南无月 发表于 2024-6-4 13:02
#mydiv::before { position: absolute; content: ''; inset: 0; transition: 7s; mix-blend-mode:  ...

background 图片的位置和样纸应设为 center/cover

马黑黑

醉美水芙蓉 发表于 2024-6-4 16:54
欣赏老师带来的精彩！

南无月

马黑黑 发表于 2024-6-4 12:51
禁止选择

保护措施

南无月

马黑黑 发表于 2024-6-4 12:52
齿轮形状挺好看的，全网木有

黑氏独创。。独一无二，是真的非常好看。。。。

南无月

马黑黑 发表于 2024-6-4 13:21
css3还是有缺陷的：对 background-* 的绝大多数都不能相应 transition 设定

好吧，抄个别的代码过来还行。。。
说到更深的就溜了溜了

南无月

马黑黑 发表于 2024-6-4 13:21
background 图片的位置和样纸应设为 center/cover

这俩常见的样子。。

马黑黑

南无月 发表于 2024-6-4 17:50
这俩常见的样子。。

position/size

意思是 位置 / 尺寸

center / cover ，就是背景图片居中摆放，以封面（cover）女郎的样纸做尺寸，cover大致意思是保持封面女郎不变形，以最短边为依据，按比例截取最长边