田园风光
<style>@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/6/lauda.jpg') no-repeat center/cover; --ma-size: 260px; }
#ma { animation: unset; filter: drop-shadow(-100px 160px 2px rgba(0, 0, 0, .5)); }
#ma::before, #ma::after { content: ''; position: absolute; width: 100%; height: 100%; animation: rotate 8s linear infinite var(--state); transition: 1s; }
#ma::before { background: url('https://638183.freep.cn/638183/small/ying.png') no-repeat center/cover; filter: drop-shadow(0 0 10px rgba(255,255,0,.5)) drop-shadow(10px 10px 10px rgba(255,255,0,.5)) drop-shadow(-10px -10px 10px rgba(255,255,0,.5)); }
#ma::after { background: url('https://638183.freep.cn/638183/small/2025/leaves.jpg') no-repeat center/cover; mask: url('https://638183.freep.cn/638183/small/ying.png') no-repeat center/cover; -webkit-mask: url('https://638183.freep.cn/638183/small/ying.png') no-repeat center/cover; }
#ma:hover::after { filter: brightness(2); }
#btnFs { right: 20px; top: 20px; color: #eee; }
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2749485" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/1863507/00/31/09/5fab86307e62b.mp4" autoplay loop muted></video>
<div id="ma"></div>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
FS(pa, ma);
</script> 帖子代码
<style>
@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/6/lauda.jpg') no-repeat center/cover; --ma-size: 260px; }
#ma { animation: unset; filter: drop-shadow(-100px 160px 2px rgba(0, 0, 0, .5)); }
#ma::before, #ma::after { content: ''; position: absolute; width: 100%; height: 100%; animation: rotate 8s linear infinite var(--state); transition: 1s; }
#ma::before { background: url('https://638183.freep.cn/638183/small/ying.png') no-repeat center/cover; filter: drop-shadow(0 0 10px rgba(255,255,0,.5)) drop-shadow(10px 10px 10px rgba(255,255,0,.5)) drop-shadow(-10px -10px 10px rgba(255,255,0,.5)); }
#ma::after { background: url('https://638183.freep.cn/638183/small/2025/leaves.jpg') no-repeat center/cover; mask: url('https://638183.freep.cn/638183/small/ying.png') no-repeat center/cover; -webkit-mask: url('https://638183.freep.cn/638183/small/ying.png') no-repeat center/cover; }
#ma:hover::after { filter: brightness(2); }
#btnFs { right: 20px; top: 20px; color: #eee; }
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2749485" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/1863507/00/31/09/5fab86307e62b.mp4" autoplay loop muted></video>
<div id="ma"></div>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
FS(pa, ma);
</script>
小播形状构造原理请参阅：
mask遮罩与对象阴影演示 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz!
美丽的田园风光，谢谢马老师经典示范与讲授{:4_190:} 美丽的田园，小播是只孔雀形状。欣赏点赞。{:4_190:} 哇塞，黑黑这个播放器效果是用遮罩完成的吧，太不可思议了，遮罩的效果这么强大 运用2个图片制作出来的，这个播放器效果特好 小辣椒 发表于 2025-8-2 14:57
运用2个图片制作出来的，这个播放器效果特好
两个伪元素叠加 小辣椒 发表于 2025-8-2 14:54
哇塞，黑黑这个播放器效果是用遮罩完成的吧，太不可思议了，遮罩的效果这么强大
遮罩属性还是有潜力的 梦江南 发表于 2025-8-2 14:35
美丽的田园，小播是只孔雀形状。欣赏点赞。
{:4_190:} 杨帆 发表于 2025-8-2 14:00
美丽的田园风光，谢谢马老师经典示范与讲授
{:4_191:} 遮罩几乎是用两个图图变成新的图图了，效果非常奇妙。再加上阴影的设计和合成，就更奇妙了。{:4_199:} 红影 发表于 2025-8-2 18:43
遮罩几乎是用两个图图变成新的图图了，效果非常奇妙。再加上阴影的设计和合成，就更奇妙了。
{:4_190:} 投影也很漂亮，黑黑的小播选的好，遮罩图也用得好，这样的图图适合旋转呢。
阴影颜色也与背景和视频相得益彰{:4_199:} 这哪是田园风光呀--明明是人间仙境嘛{:4_189:} 樵歌 发表于 2025-8-2 20:22
这哪是田园风光呀--明明是人间仙境嘛
{:4_172:} 红影 发表于 2025-8-2 18:58
投影也很漂亮，黑黑的小播选的好，遮罩图也用得好，这样的图图适合旋转呢。
阴影颜色也与背景和视频相得益 ...
{:4_191:} 马黑黑 发表于 2025-8-2 18:55
感谢黑黑带来的遮罩效果，这个很神奇。 马黑黑 发表于 2025-8-2 21:16
谢酒{:4_191:} 红影 发表于 2025-8-2 22:43
谢酒
{:4_190:}