【黑师代码】如果有风来（学习黑师1007《Analogue Dreams》花形梦幻小播效果）
<style>
#mama {
margin: 130px 0 30px calc(50% - 931px);
width: 1700px;
height: 900px;
background: url('https://642303.freep.cn/642303/tu/20241007rgjiuq03.webp') no-repeat center/cover;
border-radius: 6px;
box-shadow: 3px 3px 8px gray;
position: relative;
overflow: hidden;
}
#vid {
position: absolute;
width: 110%;
height: 110%;
object-fit: cover;
left:-6%;
top:-4%;
mix-blend-mode:soft-light;
pointer-events: none;
opacity: 0.69;
-webkit-mask: linear-gradient(to bottom,transparent,red);
}
#bsvg {
position: absolute;
border-radius: 2px;
transform: rotateY(180deg);
}
#player {
--deg: 4turn;
cursor: pointer;
transform-origin: 512px 400px;
animation: rot 10s linear infinite alternate var(--state);
}
#player:hover {
--deg: 2turn;
}
.linepath {
stroke-dasharray: 1664;
animation: draw 10s linear infinite alternate var(--state);
}
@keyframes draw {
from { stroke-dashoffset: 1664; }
to { stroke-dashoffset: 0; }
}
@keyframes erase {
from { stroke-dashoffset: 0; }
to { stroke-dashoffset: 1664; }
}
@keyframes rot { to { transform: rotate(var(--deg)); } }
</style>
<div id="mama">
<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_preview/19/11/25/15/18/39/video5ddb804f867a1.mp4" autoplay loop muted></video>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2609985244" autoplay loop></audio>
<svg id="bsvg"width="100%" height="100%" fill="none" stroke="rgba(194,158,142,.65)" stroke-width="10" stroke-lineCap="round">
<defs>
<g id="cpath" fill="rgba(217,193,182,.25)" stroke="rgba(205,133,63,.45)" stroke-width="2">
<title id="ctrMsg">播放/暂停</title>
<path d="M170 130,C-10 -30,210 -30,60 160"/>
<path d="M170 130,C-10 -30,210 -30,60 160" transform="rotate(72 100 100)"/>
<path d="M170 130,C-10 -30,210 -30,60 160" transform="rotate(144 100 100)"/>
<path d="M170 130,C-10 -30,210 -30,60 160" transform="rotate(216 100 100)"/>
<path d="M170 130,C-10 -30,210 -30,60 160" transform="rotate(288 100 100)"/>
</g>
</defs>
<rect x="0" y="0" width="100%" height="100%" stroke="rgba(0,0,0,.2)"/>
<path class="linepath" d="M0 0 H1700 V900" />
<path class="linepath" d="M1700 900 H0 V0" />
<ellipse cx="520" cy="520" rx="210" ry="35" stroke="none" fill="rgba(171,105,74,.15)"/>
<use id="player" href="#cpath" x="412" y="300" width="20" height="20"/>
</svg>
</div>
<script>
mState = () => {
mama.style.setProperty('--state', aud.paused ? 'paused' : 'running');
ctrMsg.textContent = aud.paused ? '点击播放' : '点击暂停';
aud.paused ? vid.pause() : vid.play();
};
aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
@马黑黑 白老师来瞧瞧，今天的风扇小播效果。。
底座保留椭圆，拉大，放在标题处当装饰用。。。
竖的立杆去掉了。。
叶片略改了一下，打破常规形状，用线条绕成花形。。看着也还好。。 欣赏老师漂亮音画！ 问题是我不知道叶片从哪里改位置？？
叶片和边框位置是固定的，叶片动了之后，流动边框也跟着动了。
本来小播在人身上的，只能整个翻转了bSVG到现在的位置。
求解惑。。{:4_187:} 花飞飞 发表于 2024-10-7 15:57
@马黑黑 白老师来瞧瞧，今天的风扇小播效果。。
底座保留椭圆，拉大，放在标题处当装饰用。。。
竖的立杆 ...
有创意 这个播放器漂亮，中间还有些丝的感觉 梦江南 发表于 2024-10-7 16:00
欣赏老师漂亮音画！
感谢梦江南支持 马黑黑 发表于 2024-10-7 20:24
有创意
创意线条花朵，跟中国结似的。 绿叶清舟 发表于 2024-10-7 20:41
这个播放器漂亮，中间还有些丝的感觉
今天的新效果，我略改了一下下。。{:4_187:} 好美，欣赏学习了{:4_204:} 马黑黑 发表于 2024-10-7 20:24
有创意
问个白老师，我地板楼的问题，就是我目前这样的解决方案就可以对吧。。{:4_173:} 朵拉 发表于 2024-10-7 20:44
好美，欣赏学习了
感谢朵拉支持哦。。{:4_187:} 这个漂亮，无论色彩还是线性，都很纤巧灵动。那个底座还能这样用，没想到{:4_173:}
欣赏飞飞精美制作{:4_199:} 醉美水芙蓉 发表于 2024-10-7 22:09
花花这个小播漂亮！
水妞来啦，问好呀。{:4_187:} 红影 发表于 2024-10-7 22:48
这个漂亮，无论色彩还是线性，都很纤巧灵动。那个底座还能这样用，没想到
欣赏飞飞精美制作{:4_1 ...
这个椭圆很妙，当文字背景是挺不错的效果{:4_187:} 花飞飞 发表于 2024-10-8 19:38
这个椭圆很妙，当文字背景是挺不错的效果
下次甚至可以单独使用这个椭圆呢{:4_187:} 欣赏飞飞的精彩制作，图图漂亮的{:4_199:} 好久没有上来了，这个播放器是黑黑那个教程都不知道了，哎。。。。小辣椒许多不会了 红影 发表于 2024-10-9 09:08
下次甚至可以单独使用这个椭圆呢
影子说得太对了，这个椭圆打上记号了已经。。{:4_170:}
页:
[1]
2