田园风光

马黑黑

马黑黑

帖子代码

1. <style>
   
2.     @import 'https://638183.freep.cn/638183/web/css/tz01.css';
   
3.     #pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/6/lauda.jpg') no-repeat center/cover; --ma-size: 260px; }
   
4.     #ma { animation: unset; filter: drop-shadow(-100px 160px 2px rgba(0, 0, 0, .5)); }
   
5.         #ma::before, #ma::after { content: ''; position: absolute; width: 100%; height: 100%; animation: rotate 8s linear infinite var(--state); transition: 1s; }
   
6.         #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)); }
   
7.         #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; }
   
8.         #ma:hover::after { filter: brightness(2); }
   
9.     #btnFs { right: 20px; top: 20px; color: #eee; }
   
10. </style>
    
11. 
    
12. <div id="pa">
    
13.     <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2749485" autoplay loop></audio>
    
14.     <video class="pd-vid" src="https://img.tukuppt.com/video_show/1863507/00/31/09/5fab86307e62b.mp4" autoplay loop muted></video>
    
15.     <div id="ma"></div>
    
16. </div>
    
17. 
    
18. <script type="module">
    
19.     import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
    
20.     FS(pa, ma);
    
21. </script>

复制代码

马黑黑

小播形状构造原理请参阅：


        mask遮罩与对象阴影演示 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz!

杨帆

美丽的田园风光，谢谢马老师经典示范与讲授

梦江南

美丽的田园，小播是只孔雀形状。欣赏点赞。

小辣椒

哇塞，黑黑这个播放器效果是用遮罩完成的吧，太不可思议了，遮罩的效果这么强大

小辣椒

运用2个图片制作出来的，这个播放器效果特好

马黑黑

小辣椒 发表于 2025-8-2 14:57
运用2个图片制作出来的，这个播放器效果特好

两个伪元素叠加

马黑黑

小辣椒 发表于 2025-8-2 14:54
哇塞，黑黑这个播放器效果是用遮罩完成的吧，太不可思议了，遮罩的效果这么强大

遮罩属性还是有潜力的

马黑黑

梦江南 发表于 2025-8-2 14:35
美丽的田园，小播是只孔雀形状。欣赏点赞。

马黑黑

杨帆 发表于 2025-8-2 14:00
美丽的田园风光，谢谢马老师经典示范与讲授

红影

遮罩几乎是用两个图图变成新的图图了，效果非常奇妙。再加上阴影的设计和合成，就更奇妙了。

马黑黑

红影 发表于 2025-8-2 18:43
遮罩几乎是用两个图图变成新的图图了，效果非常奇妙。再加上阴影的设计和合成，就更奇妙了。

红影

投影也很漂亮，黑黑的小播选的好，遮罩图也用得好，这样的图图适合旋转呢。
阴影颜色也与背景和视频相得益彰

樵歌

这哪是田园风光呀--明明是人间仙境嘛

马黑黑

樵歌 发表于 2025-8-2 20:22
这哪是田园风光呀--明明是人间仙境嘛

马黑黑

红影 发表于 2025-8-2 18:58
投影也很漂亮，黑黑的小播选的好，遮罩图也用得好，这样的图图适合旋转呢。
阴影颜色也与背景和视频相得益 ...

红影

马黑黑 发表于 2025-8-2 18:55

感谢黑黑带来的遮罩效果，这个很神奇。

红影

马黑黑 发表于 2025-8-2 21:16

谢酒

马黑黑

红影 发表于 2025-8-2 22:43
谢酒