开个作业贴
本帖最后由 绿叶清舟 于 2023-1-22 22:08 编辑 <br /><br /><style>#papa { left: -214px; width: 1024px; height: 640px; background: gray url('https://638183.freep.cn/638183/Pic/81/yanhua.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; }
#canv { position: absolute; }
#disc { position: absolute; width: 40px; height: 40px; left: 10px; bottom: 10px; background: conic-gradient(red,orange,yellow,green,teal,blue,purple); mask: radial-gradient(transparent 4px,red 0); -webkit-mask: radial-gradient(transparent 4px,red 0); border-radius: 50%; cursor: pointer; animation: rot 2s linear infinite; }
#lrcbox { position: absolute; left: 60px; bottom: 10px;font: bold 22px / 40px sans-serif; color: #859670; text-shadow: 2px 2px 4px #222; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<span id="lrcbox">纯音乐 - 烟花易冷</span>
<canvas id="canv"></canvas>
<span id="disc"></span>
</div>
<script>
(function() {
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
let ctx = canv.getContext('2d');
let w = canv.width = papa.offsetWidth, h = canv.height = papa.offsetHeight, particles = [], idx = 0, aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=1942250548.mp3';
aud.loop = true;
aud.autoplay = true;
disc.style.animationPlayState = aud.paused ? 'paused' : 'running';
disc.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing',()=> disc.style.animationPlayState = 'running');
aud.addEventListener('pause',()=> disc.style.animationPlayState = 'paused');
canv.onclick = function(event) {
let x = event.offsetX || event.layerX, y = event.offsetY || event.layerY;
createParticle(x, y);
}
function createParticle(x, y) {
let count = 100, radius = 10;
for (let j = 0; j < count; j ++) {
let p = {};
let angle = 360 / count * j, radian = Math.PI / 180 * angle;
p.radius = radius;
p.startX = x;
p.startY = y;
p.radian = radian;
p.rgb = `${num(0,255)},${num(0,255)},${num(0,255)},`;
p.alpha = (Math.floor(Math.random() * 101)) / 100;
p.speed = (Math.random() * 5) + 0.4;
p.radius = p.speed;
particles.push(p);
}
}
function drawParticle() {
ctx.fillStyle = 'transparent';
ctx.fillRect(0, 0, w, h);
for (let j = 0; j < particles.length; j++) {
let p = particles;
let resultX = Math.cos(p.radian) * p.radius;
let resultY = Math.sin(p.radian) * p.radius + 0.4;
p.startX += resultX;
p.startY += resultY;
p.radius *= 1 - p.speed / 100;
p.alpha -= 0.005;
if (p.alpha <= 0) {
particles.splice(j, 1);
continue;
}
ctx.beginPath();
ctx.arc(p.startX, p.startY, 2, 0, 360, false);
ctx.closePath();
ctx.fillStyle = 'rgba(' + p.rgb + p.alpha + ')';
ctx.fill();
}
}
function fade() {
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = 'rgba(0, 0, 0, .1)';
ctx.fillRect(0, 0, w, h);
ctx.globalCompositeOperation = 'lighter';
}
function render() {
idx ++;
fade();
drawParticle();
if(idx > 280) {
createParticle(Math.random() * w, Math.random() * h/2);
idx = 0;
}
requestAnimationFrame(render);
}
render();
})();
</script>
本帖最后由 绿叶清舟 于 2022-9-3 19:59 编辑
这个不是默认平铺的
CSS背景演示
初识CSS弹性布局
图片轮换循环滚播代码分享
RGBA双色线性渐变调配器（定稿）RGB线性渐变调色器（预览）
清舟的思路不错，大家都可以在这里弄个作业帖，通过动手实践，感受代码的效果{:4_187:} 红影 发表于 2022-1-12 20:52
清舟的思路不错，大家都可以在这里弄个作业帖，通过动手实践，感受代码的效果
可以尽情的把贴子弄得乱七八糟让马黑来处理了{:4_189:} 绿叶清舟 发表于 2022-1-12 21:02
可以尽情的把贴子弄得乱七八糟让马黑来处理了
哈哈，清舟说得太可爱了{:4_189:} 绿叶清舟 发表于 2022-1-12 20:44
这个不是默认平铺的
background的url是默认复制也就是平铺展开的，不需要复制的话加 no-repeat:
background:url('地址') no-repeat; 绿叶清舟 发表于 2022-1-12 21:02
可以尽情的把贴子弄得乱七八糟让马黑来处理了
我就看看 马黑黑 发表于 2022-1-12 22:59
background的url是默认复制也就是平铺展开的，不需要复制的话加 no-repeat:
background:url('地址') n ...
开始把你音乐版的代码直接贴了过来铺不开了，才发现多了这个代码的，好象只是缩小百分比不行啊，还得加边距才能成框的吧，现在这样倒也成了另一种风格了 马黑黑 发表于 2022-1-12 23:00
我就看看
只看不批改作业的罚站黑板 绿叶清舟 发表于 2022-1-13 20:56
只看不批改作业的罚站黑板
{:4_203:} 绿叶清舟 发表于 2022-1-13 20:55
开始把你音乐版的代码直接贴了过来铺不开了，才发现多了这个代码的，好象只是缩小百分比不行啊，还得加边 ...
慢慢体会领悟
<style type="text/css">
.iDiv {
margin:2pxauto;
padding:10px;
width:720px;
border:5px double #eeaa66;
}
.iTt {
padding:10px;
width:100px;
background:#ccbb77;
font-size:24px;
font-weight:bold;
color:#fff;
text-shadow:1px 1px 2px #000;
float:right;
transform:rotate(30deg);
}
.clm {
column-count:3;
column-gap:20px;
}
</style>
<div class="iDiv">
<div class="iTt">為了生活</div></div>
马黑黑 发表于 2022-1-13 22:22
慢慢体会领悟
老啦，脑子转不过来了 绿叶清舟 发表于 2022-1-15 11:28
老啦，脑子转不过来了
随着年龄的增长，脑子的反应能力和速度都会有所下降，这是正常的。不着急，学不完留着上天堂再补课。 马黑黑 发表于 2022-1-15 12:30
随着年龄的增长，脑子的反应能力和速度都会有所下降，这是正常的。不着急，学不完留着上天堂再补课。
你能确定还在一个球上吗 绿叶清舟 发表于 2022-1-15 20:48
你能确定还在一个球上吗
别的球买不起船票 马黑黑 发表于 2022-1-15 20:49
别的球买不起船票
有特价的啊 <audio style="background: transparent;" src="音频地址" controls="controls" autoplay="autoplay" loop="loop"></audio> 本帖最后由 绿叶清舟 于 2022-1-15 21:50 编辑 <br /><br /><style type="text/css">
.cBtn {
width:50px;
height:50px;
font-family:'微软雅黑';
font-size:24px;
color:#000000;
border:0px;
background:#E6E6E6;
outline:none;
border-radius:50%;
box-shadow:0px 0px 2px #888888;
cursor:pointer;
}
.cBtn:hover {
color:tomato;
box-shadow:0px 0px 3px #000;
}
</style>
<audio id="audio" controls="controls"src="http://music.163.com/song/media/outer/url?id=20744792.mp3" type="audio/mpeg" hidden="true"></audio><br><br>
<input class="cBtn" type="button" id="btn" value="▶" onclick="var op = document.getElementById('audio');var bt = document.getElementById('btn');if(op.paused){ op.play();bt.value = '‖'; }else {op.pause();bt.value = '▶'; };"> 这二竖能不能短些呢