幻想
本帖最后由 马黑黑 于 2024-9-12 13:14 编辑 <br /><br /><style>#tz { margin: 30px 0 30px calc(50% - 721px); width: 1280px; height: 700px; background: url('https://638183.freep.cn/638183/t24/3/1001.jpg') no-repeat center/cover, url('https://638183.freep.cn/638183/t24/webp2/hrxl.webp') no-repeat center/cover, radial-gradient(orange,lightgreen, white, plum); background-blend-mode: difference; border: thick groove gray; position: relative; --state: running; --scale: 1; }
#tz:fullscreen #hsvg { --scale: 1.8;}
#hsvg { position: absolute; left: calc(50% - 160px); top: calc(50% - 160px); border-radius: 50%; filter: drop-shadow(0 0 8px green); cursor: pointer; animation: rot 30s linear infinite var(--state); }
#hsvg:hover { --state: paused; }
@keyframes rot { from { transform: rotate(0deg) scale(var(--scale)); } to { transform: rotate(360deg) scale(var(--scale)); } }
</style>
<div id="tz">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=369592" autoplay loop></audio>
<svg id="hsvg" width="320" height="320" viewBox="0 0 320 320" fill="none" stroke="plum" stroke-linecap="round"></svg>
</div>
<script>
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
sc.charset = 'utf-8';
document.body.appendChild(sc);
sc.onload = () => FS({papa: '#tz', css: 'bottom: 20px; left: 50%; --fsBg: #eeeeee90; --color: #336699;'});
drawPolygon = (total) => {
var pathstr = '<defs>', usestr = '';
Array(total).fill(0).forEach((id,idx) => {
id = idx + 1;
var bstr = idx === 0 ? '0s' : `p1.begin+${idx}s`;
var color = '#' + Math.random().toString(16).substring(2,8) + '9d';
pathstr += `
<path id="r${id}" stroke="${color}">
<animate id="p${id}" attributeName="d" values="m160,160l0,0 0,0;m130,110l30,-17 30,17;m130,60l30,-17 30,17;m160,20l0,0 0,0" dur="12s" repeatCount="indefinite" begin="${bstr}"/>
<animate attributeName="stroke-width" values="0;4;4;4;0" dur="12s" repeatCount="indefinite" begin="${bstr}"/>
</path>`;
Array(total).fill(0).forEach((u,k) => {
u = k + 1;
var angle = id % 2 === 0 ? 360 / total * k + 360 / total / 2 : 360 / total * k;
usestr += `<use xlink:href="#r${id}" transform="rotate(${angle} 160 160)"/>`;
});
});
pathstr += '</defs>';
return pathstr + usestr;
};
hsvg.innerHTML = drawPolygon(12);
mState = () => aud.paused ? (tz.style.setProperty('--state', 'paused'), hsvg.pauseAnimations()) : (tz.style.setProperty('--state', 'running'), hsvg.unpauseAnimations());
aud.onplaying = aud.onpause = () => mState();
hsvg.onclick = (e) => aud.paused ? aud.play() : aud.pause();
</script>
本帖最后由 马黑黑 于 2024-9-12 13:16 编辑
帖子代码：<style>
#tz { margin: 30px 0 30px calc(50% - 721px); width: 1280px; height: 700px; background: url('https://638183.freep.cn/638183/t24/3/1001.jpg') no-repeat center/cover, url('https://638183.freep.cn/638183/t24/webp2/hrxl.webp') no-repeat center/cover, radial-gradient(orange,lightgreen, white, plum); background-blend-mode: difference; border: thick groove gray; position: relative; --state: running; --scale: 1; }
#tz:fullscreen #hsvg { --scale: 1.8;}
#hsvg { position: absolute; left: calc(50% - 160px); top: calc(50% - 160px); border-radius: 50%; filter: drop-shadow(0 0 8px green); cursor: pointer; animation: rot 30s linear infinite var(--state); }
#hsvg:hover { --state: paused; }
@keyframes rot { from { transform: rotate(0deg) scale(var(--scale)); } to { transform: rotate(360deg) scale(var(--scale)); } }
</style>
<div id="tz">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=369592" autoplay loop></audio>
<svg id="hsvg" width="320" height="320" viewBox="0 0 320 320" fill="none" stroke="plum" stroke-linecap="round"></svg>
</div>
<script>
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
sc.charset = 'utf-8';
document.body.appendChild(sc);
sc.onload = () => FS({papa: '#tz', css: 'bottom: 20px; left: 50%; --fsBg: #eeeeee90; --color: #336699;'});
drawPolygon = (total) => {
var pathstr = '<defs>', usestr = '';
Array(total).fill(0).forEach((id,idx) => {
id = idx + 1;
var bstr = idx === 0 ? '0s' : `p1.begin+${idx}s`;
var color = '#' + Math.random().toString(16).substring(2,8) + '9d';
pathstr += `
<path id="r${id}" stroke="${color}">
<animate id="p${id}" attributeName="d" values="m160,160l0,0 0,0;m130,110l30,-17 30,17;m130,60l30,-17 30,17;m160,20l0,0 0,0" dur="12s" repeatCount="indefinite" begin="${bstr}"/>
<animate attributeName="stroke-width" values="0;4;4;4;0" dur="12s" repeatCount="indefinite" begin="${bstr}"/>
</path>`;
Array(total).fill(0).forEach((u,k) => {
u = k + 1;
var angle = id % 2 === 0 ? 360 / total * k + 360 / total / 2 : 360 / total * k;
usestr += `<use xlink:href="#r${id}" transform="rotate(${angle} 160 160)"/>`;
});
});
pathstr += '</defs>';
return pathstr + usestr;
};
hsvg.innerHTML = drawPolygon(12);
mState = () => aud.paused ? (tz.style.setProperty('--state', 'paused'), hsvg.pauseAnimations()) : (tz.style.setProperty('--state', 'running'), hsvg.unpauseAnimations());
aud.onplaying = aud.onpause = () => mState();
hsvg.onclick = (e) => aud.paused ? aud.play() : aud.pause();
</script>
老师又出播放器了，好漂亮！{:4_187:} 这个svg图片的代码和前面的六边形的那个有些像能，现在变成12边了啊{:4_173:} 这个制作背景很神奇，两张图片的融合和渐变，居然有这么奇妙的效果，太美了{:4_199:} 小播也好美，如层层绽放的花朵，美妙绝伦{:4_187:} 欣赏佳作，感谢分享 中间的动画很玄乎 梦江南 发表于 2024-9-12 13:24
老师又出播放器了，好漂亮！
{:4_190:} 世外桃源 发表于 2024-9-12 17:39
中间的动画很玄乎
有点看头吧 红影 发表于 2024-9-12 15:52
小播也好美，如层层绽放的花朵，美妙绝伦
谢赞 红影 发表于 2024-9-12 15:46
这个svg图片的代码和前面的六边形的那个有些像能，现在变成12边了啊
前面说过，那个函数实际上支持任意多边形，只是需要做好一些计算。 红影 发表于 2024-9-12 15:51
这个制作背景很神奇，两张图片的融合和渐变，居然有这么奇妙的效果，太美了
css3的背景融合技术还是很神奇的 马黑黑 发表于 2024-9-12 18:34
谢赞
再看仍然惊艳{:4_187:} 马黑黑 发表于 2024-9-12 18:35
前面说过，那个函数实际上支持任意多边形，只是需要做好一些计算。
黑黑直接用实例去证明了那个讲解{:4_173:} 马黑黑 发表于 2024-9-12 18:36
css3的背景融合技术还是很神奇的
是啊，能得到这么美妙的效果呢{:4_199:} 红影 发表于 2024-9-12 20:22
是啊，能得到这么美妙的效果呢
这得益于w3c专家们对色彩的理解 看上去想法很多的了 马黑黑 发表于 2024-9-12 20:23
这得益于w3c专家们对色彩的理解
色彩学也是很重要的一门科学。