午后红茶
<style>#papa {
margin: 0 0 0 calc(50% - 591px);
width: 1024px;
height: 640px;
border-radius: 8px 32px;
background:
url('https://638183.freep.cn/638183/t24/jpg/blacktea.jpg') no-repeat center/cover,
url('https://638183.freep.cn/638183/small/tea.png') no-repeat 380px 120px,
url('https://638183.freep.cn/638183/small/tea.png') no-repeat 400px 20px;
background-blend-mode: lighten, soft-light;
box-shadow: 3px 3px 20px #000;
position: relative;
z-index: 1;
}
#player {
position: absolute;
bottom: 30px;
right: 30px;
width: 140px;
height: 140px;
border: 5px solid tan;
border-radius: 50%;
object-fit: cover;
background:
repeating-linear-gradient(45deg, tan 1px, transparent 3px, tan 5px),
repeating-linear-gradient(-45deg, tan 1px, transparent 3px, tan 5px);
box-shadow: 0 0 20px rgba(250,250,250,.4);
cursor: pointer;
animation: rot 6s linear infinite var(--state);
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1913531843" autoplay loop></audio>
<img id="player" src="https://638183.freep.cn/638183/small/tea.png" alt="" />
<img src="https://638183.freep.cn/638183/small/yuxi.png" alt="" style="position: absolute; top: 110px; right: 300px; transform: rotate(20deg); filter: opacity(.6);" />
</div>
<script>
var mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', mState, false);
aud.addEventListener('playing', mState, false);
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
代码
<style>
#papa {
margin: 0 0 0 calc(50% - 591px);
width: 1024px;
height: 640px;
border-radius: 8px 32px;
background:
url('https://638183.freep.cn/638183/t24/jpg/blacktea.jpg') no-repeat center/cover,
url('https://638183.freep.cn/638183/small/tea.png') no-repeat 380px 120px,
url('https://638183.freep.cn/638183/small/tea.png') no-repeat 400px 20px;
background-blend-mode: lighten, soft-light;
box-shadow: 3px 3px 20px #000;
position: relative;
z-index: 1;
}
#player {
position: absolute;
bottom: 30px;
right: 30px;
width: 140px;
height: 140px;
border: 5px solid tan;
border-radius: 50%;
object-fit: cover;
background:
repeating-linear-gradient(45deg, tan 1px, transparent 3px, tan 5px),
repeating-linear-gradient(-45deg, tan 1px, transparent 3px, tan 5px);
box-shadow: 0 0 20px rgba(250,250,250,.4);
cursor: pointer;
animation: rot 6s linear infinite var(--state);
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1913531843" autoplay loop></audio>
<img id="player" src="https://638183.freep.cn/638183/small/tea.png" alt="" />
<img src="https://638183.freep.cn/638183/small/yuxi.png" alt="" style="position: absolute; top: 110px; right: 300px; transform: rotate(20deg); filter: opacity(.6);" />
</div>
<script>
var mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', mState, false);
aud.addEventListener('playing', mState, false);
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
播放器使用了大猫咪那里产的露底簸箕，茶叶来自我家的后山，香烟从我口袋里掏出来，茶器是抽奖抽到的 音乐作者为三弦艺术家王玉 马黑黑 发表于 2024-2-1 17:05
代码
CSS装饰师{:5_117:} 醉美水芙蓉 发表于 2024-2-1 19:05
没看懂播放器为什么会有透明网格，好像是香烟的底图?
播放器是旋转的上面有茶青的那个，是个簸箕，露底的，所以你看着透明 最美的诗意 发表于 2024-2-1 18:29
不错，赞一个。。。。。。。。。
谢谢 起个网名好难 发表于 2024-2-1 18:29
CSS装饰师
过奖过奖，我的童鞋都说我CSS学得不好 醉美水芙蓉 发表于 2024-2-1 19:02
这个是黑黑老师的标配！
{:4_172:} 这个帖子还挺有纪念意义的。黑黑的抽奖是年庆活动抽的么，恭喜啊。
看到香烟的命名笑，yuxi.png ，就是云溪烟的意思呗{:4_173:} 播放器按钮下的网格设计很漂亮{:4_199:}
背景图上叠加两个簸箕茶叶也能很有趣。欣赏黑黑充满纪念意义的好帖{:4_187:} 红影 发表于 2024-2-1 19:58
播放器按钮下的网格设计很漂亮
背景图上叠加两个簸箕茶叶也能很有趣。欣赏黑黑充满纪念意义的好 ...
簸箕只有一个，播放器 黑黑家后山就有好茶，真幸福啊{:4_204:} 红影 发表于 2024-2-1 19:55
这个帖子还挺有纪念意义的。黑黑的抽奖是年庆活动抽的么，恭喜啊。
看到香烟的命名笑，yuxi.png ，就是云 ...
{:4_181:} 红影 发表于 2024-2-1 19:59
黑黑家后山就有好茶，真幸福啊
这是养猪的好处 马黑黑 发表于 2024-2-1 19:58
簸箕只有一个，播放器
哦哦，就是画出来的那个效果吧，还以为茶叶名是这个呢{:4_173:} 马黑黑 发表于 2024-2-1 19:59
用帖子做个自己喜欢的内容，也很不错的{:4_173:} 马黑黑 发表于 2024-2-1 19:59
这是养猪的好处
这个和养猪有什么关系啊，难不成采茶女家里都有猪猪的？{:4_173:}