一生所爱
本帖最后由 马黑黑 于 2024-7-15 18:54 编辑 <br /><br /><style>#papa {
--width: 1024px;
margin: 130px 0 30px calc(50% - (var(--width) / 2 + 81px));
width: var(--width);
height: 630px;
background: url('https://638183.freep.cn/638183/t24/3/yiugsoai.jpg') no-repeat center/cover;
box-shadow: inset 0 -3rem 3rem rgba(0,0,0,0.1), 0 0 0 2px rgb(20,20,20), 0.3rem 0.3em 1rem rgba(0,0,0,0.6);
z-index: 1;
position: relative;
display: grid;
place-items: center;
pointer-events: none;
}
#papa::before, #papa::after {
position: absolute;
content: '';
width: 400px;
height: 400px;
background: radial-gradient(circle at center center, transparent 60%, rgba(0,60,128,.8) 60%) 0/40px 40px;
border-radius: 50%;
cursor: pointer;
pointer-events: auto;
animation: rot 4s var(--delay) linear infinite alternate var(--state);
--delay: 0s;
}
#papa::after { --delay: -3s; }
@keyframes rot { to { transform: rotate(10turn); } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=548568996" autoplay loop></audio>
</div>
<script>
aud.oncanplay = aud.onplaying = aud.onpause = () => papa.style.setProperty('--state', ['running','paused'][+aud.paused]);
papa.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
本帖最后由 马黑黑 于 2024-7-15 18:54 编辑 <br /><br /><h2>帖子代码</h2>
<div class="hE"><pre>
<style>
#papa {
--width: 1024px;
margin: 130px 0 30px calc(50% - (var(--width) / 2 + 81px));
width: var(--width);
height: 630px;
background: url('https://638183.freep.cn/638183/t24/3/yiugsoai.jpg') no-repeat center/cover;
box-shadow: inset 0 -3rem 3rem rgba(0,0,0,0.1), 0 0 0 2px rgb(20,20,20), 0.3rem 0.3em 1rem rgba(0,0,0,0.6);
position: relative;
display: grid;
place-items: center;
pointer-events: none;
}
#papa::before, #papa::after {
position: absolute;
content: '';
width: 400px;
height: 400px;
background: radial-gradient(circle at center center, transparent 60%, rgba(0,60,128,.8) 60%) 0/40px 40px;
border-radius: 50%;
cursor: pointer;
pointer-events: auto;
animation: rot 4s var(--delay) linear infinite alternate var(--state);
--delay: 0s;
}
#papa::after { --delay: -3s; }
@keyframes rot { to { transform: rotate(10turn); } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=548568996" autoplay loop></audio>
</div>
<script>
aud.oncanplay = aud.onplaying = aud.onpause = () => papa.style.setProperty('--state', ['running','paused'][+aud.paused]);
papa.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
</pre></div>
<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
</script>
本帖最后由 马黑黑 于 2024-7-15 10:16 编辑 <br /><br /><p>本帖：<br><br>音频播放控制器是 #papa::before、#papa::after 两个伪元素拼凑而成，它们既是小播，也是帖子的装饰——帖子唯一的动态效果就它俩。<br><br>两个伪元素重叠在一起，预设是在一个关键帧动画运行周期里面旋转10圈、双向（alternate），::after 提前3秒运行动画以便令组合的运动形态有一定的错落效果。伪元素的渐变背景极简，可以改变两个百分比数字营造更多的效果，背景尺寸（40px 40px）修改后同样能产生不一样的图案。</p>
<p><br><br>下面给出另一个背景渐变示例：<br><br></p>
<div class="hE"><pre>
#player {
position: absolute;
width: 400px;
height: 400px;
background: radial-gradient(circle at center center, transparent 90%, rgba(0,60,128,.5) 95%) 0/80px 80px;
border-radius: 50%;
}
</pre></div> 另外，帖子整体有浮于页面的效果，这是 box-shadow 阴影效果，用了三个阴影组合：一个内阴影、两个外阴影（代码第8行） 我来瞧一眼代码的
原来根本没有视频，居然整出视频的动态效果。。 -3rem 3rem这个是个新的尺寸单位。好象见过又有点眼生 马黑黑 发表于 2024-7-15 07:59
本帖：
音频播放控制器是 #papa::before、#papa::after 两个伪元素拼凑而成，它们既是小播，也是帖子的 ...
这个小播很新颖，自己挖了个图转动起来，效果跟视频一样灵动，太赞了 马黑黑 发表于 2024-7-15 08:20
另外，帖子整体有浮于页面的效果，这是 box-shadow 阴影效果，用了三个阴影组合：一个内阴影、两个外阴影（ ...
有光影就有立体感，这个阴影设置相当细致 画面给人一种十分欢快的感觉。代码真神奇。 南无月 发表于 2024-7-15 08:23
-3rem 3rem这个是个新的尺寸单位。好象见过又有点眼生
rem 是一个相对长度单位，它相对于根元素即HTML标签的字体大小（font-size）而决定 rem 的大小。比方说，页面根元素设置字体大小为 16px，那么，1rem = 16px，就这么简单。
页面是有默认字体大小的，所以，即使没有设置 font-size，它也会有一个固定值，16px 南无月 发表于 2024-7-15 08:30
有光影就有立体感，这个阴影设置相当细致
这是比较专业的盒子阴影 南无月 发表于 2024-7-15 08:22
我来瞧一眼代码的
原来根本没有视频，居然整出视频的动态效果。。
{:4_190:} 神奇！碰一中间就会逆向旋转了。 神奇的效果，和底图的构成如此协调，又营造出一种跳脱的氛围，很赞{:4_199:} 又是一个纯代码效果呢{:4_187:} 感觉有一个伪元素是不动的，去试验了一下，把--delay: 0;变成--delay: 0s;两个才都动了。
0后面记得不用加单位啊{:4_203:} 马黑黑 发表于 2024-7-15 07:59
本帖最后由 马黑黑 于 2024-7-15 10:16 编辑 本帖：音频播放控制器是 #papa::before、#papa::after 两个伪 ...
这个也好玩，变成了一个个小方块，和前面一个的效果完全不同呢{:4_199:} 红影 发表于 2024-7-15 18:50
这个也好玩，变成了一个个小方块，和前面一个的效果完全不同呢
对的。渐变颜色的起始会影响最终形状 梦江南 发表于 2024-7-15 14:36
神奇！碰一中间就会逆向旋转了。
没辣么神奇吧{:4_189:}