姜伟 沙漠风暴
<style>#papa { margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1400px); height: auto; aspect-ratio: 16/9; background: url('https://638183.freep.cn/638183/t24/6/smfb.jpg') no-repeat center/cover; box-shadow: 2px 2px 8px #000; z-index: 1; overflow: hidden; display: grid; place-items: center; position: relative; }
#player { bottom: 120px; width: 100px; height: 100px; border: 6px dotted gold; border-radius: 50%; background: radial-gradient(transparent, beige), conic-gradient(from -45deg at 50% 100%, beige 90deg, transparent 0) bottom/100% 25%; transform: skew(0, 15deg) rotate(0); cursor: pointer; animation: rot 8s linear infinite var(--state); display: grid; place-items: center; filter: drop-shadow(0 0 30px yellow); position: absolute; }
#player::before, #player::after { position: absolute; content: ''; width: 180%; height: 180%; background: repeating-linear-gradient(to top right, transparent 0%, transparent calc(50% - 2px), beige 50%, transparent calc(50% + 2px), transparent 0) 50% 50% / 20% 20%; }
#player::after { transform: rotate(90deg); }
#btnFs { bottom: 20px; color: #eee; }
.vid {position: absolute; width: 100%; height: 100%; object-fit: cover; mask: radial-gradient(transparent 20%, red); -webkit-mask: radial-gradient(transparent 20%, red); opacity: .35; pointer-events: none; }
@keyframes rot { to { transform: skew(0, 15deg) rotate(360deg); } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2164895832" autoplay loop></audio>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/03/12/49/40/video6363486451155.mp4" autoplay loop muted></video>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/04/17/59/33/video6364e2850f8a5.mp4"" autoplay loop muted></video>
<div id="player"></div>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
FS(papa, player);
</script> 代码
<style>
#papa { margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1400px); height: auto; aspect-ratio: 16/9; background: url('https://638183.freep.cn/638183/t24/6/smfb.jpg') no-repeat center/cover; box-shadow: 2px 2px 8px #000; z-index: 1; overflow: hidden; display: grid; place-items: center; position: relative; }
#player { bottom: 120px; width: 100px; height: 100px; border: 6px dotted gold; border-radius: 50%; background: radial-gradient(transparent, beige), conic-gradient(from -45deg at 50% 100%, beige 90deg, transparent 0) bottom/100% 25%; transform: skew(0, 15deg) rotate(0); cursor: pointer; animation: rot 8s linear infinite var(--state); display: grid; place-items: center; filter: drop-shadow(0 0 30px yellow); position: absolute; }
#player::before, #player::after { position: absolute; content: ''; width: 180%; height: 180%; background: repeating-linear-gradient(to top right, transparent 0%, transparent calc(50% - 2px), beige 50%, transparent calc(50% + 2px), transparent 0) 50% 50% / 20% 20%; }
#player::after { transform: rotate(90deg); }
#btnFs { bottom: 20px; color: #eee; }
.vid {position: absolute; width: 100%; height: 100%; object-fit: cover; mask: radial-gradient(transparent 20%, red); -webkit-mask: radial-gradient(transparent 20%, red); opacity: .35; pointer-events: none; }
@keyframes rot { to { transform: skew(0, 15deg) rotate(360deg); } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2164895832" autoplay loop></audio>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/03/12/49/40/video6363486451155.mp4" autoplay loop muted></video>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/04/17/59/33/video6364e2850f8a5.mp4"" autoplay loop muted></video>
<div id="player"></div>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
FS(papa, player);
</script>
小播形状：主元素+两个伪元素
主元素：border + background（径向渐变+圆锥渐变）
伪元素：background（线性渐变）
其中一个伪元素旋转90度是的背景构成网格形状的图案 视频两个相互叠加，用以烘托沙漠风暴效果 简洁的代码。丰富的内涵，美妙的效果，谢谢马老师精彩分享{:4_190:} 这个圆锥渐变挺难，之前就没学好。这个里面的看了半天也没看明白。
内部的虚线圆加背景问题不大，那些小三角就是圆锥渐变来的吧{:4_187:} 视频用得好，让沙漠里的沙流动得那么漂亮。小播的设计也很奇妙{:4_199:} 红影 发表于 2025-7-17 20:28
这个圆锥渐变挺难，之前就没学好。这个里面的看了半天也没看明白。
内部的虚线圆加背景问题不大，那些小三 ...
所以很多人都不太敢用锥形渐变 杨帆 发表于 2025-7-17 18:26
简洁的代码。丰富的内涵，美妙的效果，谢谢马老师精彩分享
CSS3渐变背景很奇妙的 红影 发表于 2025-7-17 20:30
视频用得好，让沙漠里的沙流动得那么漂亮。小播的设计也很奇妙
{:4_190:} 马黑黑 发表于 2025-7-17 20:32
所以很多人都不太敢用锥形渐变
是的，这个很难操控。 马黑黑 发表于 2025-7-17 20:33
谢大咖{:4_187:} 红影 发表于 2025-7-17 21:50
是的，这个很难操控。
得花点时间去理清它的语法规范 马黑黑 发表于 2025-7-17 21:51
得花点时间去理清它的语法规范
要回过去再看看好好学习体会一下。 红影 发表于 2025-7-17 22:18
要回过去再看看好好学习体会一下。
好在并不复杂 马黑黑 发表于 2025-7-17 22:46
好在并不复杂
我觉得还是挺复杂的。 红影 发表于 2025-7-18 20:44
我觉得还是挺复杂的。
简单的 马黑黑 发表于 2025-7-18 21:24
简单的
只看这个不难，看讲述离得例子就又弄迷糊了{:4_173:} 欣赏老师的精彩制作，向老师致敬！ 梦江南 发表于 2025-7-19 11:50
欣赏老师的精彩制作，向老师致敬！
{:4_190:}
页:
[1]
2