【黑师代码】风和日丽喜看万紫千红（学习黑师20240704《故梦》纯代码梦幻背景效果）
<style>
#mydiv { --width: 1400px;
margin: 130px 0 30px calc(50% - (var(--width) / 2 + 90px));
width: var(--width);
height: 750px;
background:
radial-gradient(circle at 29% 55%, hsla(329,0%,99%,0.09) 0%, hsla(329,0%,99%,0.19) 4%,transparent 4%, transparent 44%,transparent 44%, transparent 100%),
radial-gradient(circle at 85% 89%, hsla(329,0%,99%,0.19) 0%, hsla(329,0%,99%,0.09) 51%,transparent 51%, transparent 52%,transparent 52%, transparent 100%),
radial-gradient(circle at 6% 90%, hsla(329,0%,99%,0.09) 0%, hsla(329,0%,99%,0.19) 53%,transparent 53%, transparent 64%,transparent 64%, transparent 100%),
radial-gradient(circle at 35% 75%, hsla(329,0%,99%,0.09) 0%, hsla(329,0%,99%,0.09) 6%,transparent 6%, transparent 98%,transparent 98%, transparent 100%),
radial-gradient(circle at 56% 75%, hsla(329,0%,99%,0.09) 0%, hsla(329,0%,99%,0.09) 16%,transparent 16%, transparent 23%,transparent 23%, transparent 100%),
radial-gradient(circle at 42% 0%, hsla(329,0%,99%,0.09) 0%, hsla(329,0%,99%,0.19) 3%,transparent 3%, transparent 26%,transparent 26%, transparent 100%),
radial-gradient(circle at 29% 28%, hsla(329,0%,99%,0.09) 0%, hsla(329,0%,99%,0.09) 51%,transparent 51%, transparent 75%,transparent 75%, transparent 100%),
radial-gradient(circle at 77% 21%, hsla(329,0%,99%,0.09) 0%, hsla(329,0%,99%,0.19) 35%,transparent 35%, transparent 55%,transparent 55%, transparent 100%),
radial-gradient(circle at 65% 91%, hsla(329,0%,99%,0.09) 0%, hsla(329,0%,99%,0.09) 46%,transparent 46%, transparent 76%,transparent 76%, transparent 100%),
conic-gradient(yellow,blue,gold,green,tan,blue,gold,green,tan,blue,gold,green,tan,blue,gold,green,tan,tan,blue,yellow);
box-shadow: 2px 3px 6px #666;
overflow: hidden;
z-index: 1;
position: relative;
}
#player {
position: absolute;
left: calc(50% - 70px);
top: 43%;
width: 140px;
filter: drop-shadow(0 0 20px white) hue-rotate(0deg);
transition: width .75s;
cursor: pointer;
mix-blend-mode: screen;
border-radius: 50%;
animation: rot 8s linear infinite var(--state),
hue 30s linear infinite alternate var(--state);
}
#player:hover { width: 150px; }
#canv { position: absolute; mix-blend-mode: screen; opacity: .5; z-index: 2;}
#vid { position: absolute; bottom: 0; width: 100%; height: calc(100% + 70px); object-fit: cover; mix-blend-mode: screen; pointer-events: none; }
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes hue { to { filter: drop-shadow(0 0 20px white) hue-rotate(360deg); } }
</style>
<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=393685" autoplay loop></audio>
<canvas id="mycanv" width="1700" height="900" style="border:0px solid gray"></canvas>
<video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/04/18/6141bee77d77a.mp4" muted autoplay loop></video>
<img id="player" alt="" src="https://pic.imgdb.cn/item/65ac958a871b83018af355ba.gif" titel="播放/暂停" />
</div>
<script>
var ww = mycanv.width, hh = mycanv.height, deg = -90, raf = null;
var ctx = mycanv.getContext('2d');
class ccText {
constructor(text) {
this.chars = text.split('');
this.colors = this.chars.map(color => `#${Math.random().toString(16).substr(4,6)}`);
};
draw(context) {
context.font = 'bold 40px sans-serif';
context.textAlign = 'center';
context.textBaseline = 'middle';
context.shadowOffsetX = -2;
context.shadowOffsetY = 2;
context.shadowColor = '#000';
context.shadowBlur = 4;
var a = 360 / this.chars.length, r1 = ww/2 - 720, r2 = hh/2 - 360;
this.chars.forEach((char,key) => {
var rad = (a * key + deg) * Math.PI / 180;
var x = ww/2.42 + r1 * Math.cos(rad), y = hh/2.4 + r2 * Math.sin(rad);
context.fillStyle = this.colors;
context.fillText(char, x, y);
});
};
};
var cc = new ccText('風和日麗囍看萬紫千紅');
var render = () => {
aud.paused ? cancelAnimationFrame(raf) : raf = requestAnimationFrame(render);
ctx.clearRect(0, 0, ww, hh);
deg = (deg + 0.5) % 360;
cc.draw(ctx);
};
render();
var sF = document.createElement('script');
var mState = () => {
player.style.setProperty('--state',['running','paused'][+aud.paused], cancelAnimationFrame(raf));
player.title = ['暂停','播放'][+aud.paused],render();
aud.paused ? vid.pause() : vid.play();
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script> @马黑黑 白老师来瞧一眼，今天的故梦跟贴作业{:4_187:} 把原贴里的线性渐变改为锥形放射渐变，图案没有改变。。动了一些透明度。。
加上之前的旋转文字效果。。 月儿聪明，都不用去找渐变底图，直接修改一下，就得到了不一样的效果呢。
还根据底图的特点，加了旋转文字效果，更觉得很惊艳。
给月儿点赞{:4_199:} 红影 发表于 2024-7-4 19:38
月儿聪明，都不用去找渐变底图，直接修改一下，就得到了不一样的效果呢。
还根据底图的特点，加了旋转文字 ...
影子鼓励很是给力。。
这个贴子不用找图这一步的。底图就是代码写的。。 这文字加得特别好，正好临近小播，点击文字就暂停了，否则小播因为是动态，会感受不明显。
这小播也特别好看，色彩斑斓的，跟这背景特别相契合呢{:4_199:} 真的如梦幻一般的变化，这个制作太美了{:4_199:} 红影 发表于 2024-7-4 19:42
这文字加得特别好，正好临近小播，点击文字就暂停了，否则小播因为是动态，会感受不明显。
这小播也特别好 ...
小播是个动图，加了滤镜，看跟背景比较合就保留了。。
刚好记得这组字也是五彩颜色，所以就拿来当标题了。{:4_187:} 红影 发表于 2024-7-4 19:43
真的如梦幻一般的变化，这个制作太美了
的确第一次看到不用背景图，直接代码写背景的
老师今天的这个新的效果的确十分震撼。。{:4_204:} 南无月 发表于 2024-7-4 19:34
把原贴里的线性渐变改为锥形放射渐变，图案没有改变。。动了一些透明度。。
加上之前的旋转文字效果。。
{:4_199:} 南无月 发表于 2024-7-4 19:45
的确第一次看到不用背景图，直接代码写背景的
老师今天的这个新的效果的确十分震撼。。
背景看不到{:4_189:} 马黑黑 发表于 2024-7-4 20:43
这鼓掌是还行的意思么{:4_173:}美滋滋乐一个 马黑黑 发表于 2024-7-4 20:44
背景看不到
{:4_170:}看不到啊看不到。。近视度数不够深 南无月 发表于 2024-7-4 19:41
影子鼓励很是给力。。
这个贴子不用找图这一步的。底图就是代码写的。。
是啊，代码能展现如此美妙的效果，真是太神奇了{:4_187:} 南无月 发表于 2024-7-4 19:44
小播是个动图，加了滤镜，看跟背景比较合就保留了。。
刚好记得这组字也是五彩颜色，所以就拿来当标题了 ...
是啊，非常相配，而且很漂亮{:4_187:} 南无月 发表于 2024-7-4 19:45
的确第一次看到不用背景图，直接代码写背景的
老师今天的这个新的效果的确十分震撼。。
之前也有过纯代码的背景，今天的这个更漂亮{:4_187:} 南无月 发表于 2024-7-4 21:01
看不到啊看不到。。近视度数不够深
去找找瓶底做镜片 南无月 发表于 2024-7-4 21:01
这鼓掌是还行的意思么美滋滋乐一个
{:4_173:} 哇塞，惊艳了！青出于蓝而胜于蓝。黑大师，要加油了{:4_172:} 老师的作品真漂亮！赞！