快来表扬俺
<style>
.tiezi {
margin: 30px 0 30px calc(50% - 731px);
width: 1280px;
height: 720px;
box-sizing: border-box;
border: 3px solid;
background: url('https://p.upyun.com/demo/tmp/C5kNv1Yc.webp') no-repeat center/cover;
position: relative;
}
#player1 {
position: absolute;
width: 200px;
height: 200px;
left: 300px;
bottom: 440px;
opacity: 0.8;
border: 12px solid #ee0000;
border-style: double dotted solid ;
border-radius: 50%;
}
li-zi {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
animation: fly 6s linear infinite;
}
@keyframes fly {
0% { transform:translateX(0px);opacity: 0; }
15% { transform:translateX(30px);opacity: 1; }
100% { transform: translateX(300px); opacity: 0; }
}
</style>
<div class="tiezi" >
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1900024768" autoplay loop></audio>
<div id="player1"></div>
</div>
<script>
Array.from({length: 150}).forEach(lz => {
lz = document.createElement('li-zi');
lz.style.cssText += `
left: ${30 + Math.random() * 180}px;
top: ${30 + Math.random() * 180}px;
background: #b00000;
animation-delay: -${Math.random() * 6}s;
`;
player1.appendChild(lz);
});
player1.onclick = () => {
aud.paused ? aud.play() : aud.pause();
player1.style.setProperty('--state', aud.paused ? 'paused' : 'running');
};
</script> 本帖最后由 绿叶清舟 于 2024-9-10 15:00 编辑
作业汇总最近比较烦
两忘烟水里
快来表扬俺
本帖最后由 绿叶清舟 于 2024-9-10 20:10 编辑
第一次这么认真的一个个看，就差拆成字母了 第二个作业
<style>
.tiezi {
margin: 30px 0 30px calc(50% - 731px);
width: 1280px;
height: 720px;
box-sizing: border-box;
border: 3px solid;
border-image: linear-gradient(to top right, #d1e4e9, #bed9e1, #78a9c3, #95b9c2) 3 3;
background: url('https://p.upyun.com/demo/tmp/ZQSIZuuI.webp') no-repeat center/cover;
z-index: 1;
pointer-events: none;
position: relative;
}
#mypic {
position: absolute; /* 绝对定位 */
left: 20px; /* 左边位置*/
top: 580px; /* 上边位置 */
width: 120px; /* 宽度 */
height: 120px; /* 高度 */
/* animation简化语法 ：动画名称+运动周期时长+缓动形式+运行次数 */
animation: rot 58s linear 3;
}
/* 设计CSS关键帧动画 */
@keyframes rot {
from { transform:translate(0px); } /* 从 0 度开始旋转 */
to { transform:translate(1180px); } /* 到 360 度即一圈完成一个旋转周期 */
}
</style>
<div class="tiezi" id="tzi">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2080659326" autoplay loop></audio>
<img id="mypic" alt="" src="https://p.upyun.com/demo/tmp/V6drffz0.webp" />
</div>
<script>
aud.ontimeupdate = () => tzi.style.setProperty('--hue', Math.floor(Math.random() * 80) + 'deg');
tzi.onclick = () => aud.paused ? aud.play() : aud.pause();
</script> 本帖最后由 绿叶清舟 于 2024-9-10 15:07 编辑
发布完后想起影上次说的加个点击，却加不上去，最上面部分嘛在原来的那个贴子上改了用的都没去看过代码，再看多了 z-index: 1; pointer-events: none; position: relative;这个部分，三行全部去掉，船跑贴子外面去了{:4_189:} 加点击
<style>
.tiezi {
margin: 30px 0 30px calc(50% - 731px);
width: 1280px;
height: 720px;
box-sizing: border-box;
border: 3px solid;
background: url('https://p.upyun.com/demo/tmp/ZQSIZuuI.webp') no-repeat center/cover;
position: relative;
}
#mypic {
position: absolute; /* 绝对定位 */
left: 20px; /* 左边位置*/
top: 580px; /* 上边位置 */
width: 120px; /* 宽度 */
height: 120px; /* 高度 */
cursor: pointer;
animation: rot 58s linear infinite var(--state);
--state: running;
}
/* 设计CSS关键帧动画 */
@keyframes rot {
from { transform:translate(20px); } /* 从 0 度开始旋转 */
to { transform:translate(1180px); } /* 到 360 度即一圈完成一个旋转周期 */
}
</style>
<div class="tiezi" >
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2080659326" autoplay loop></audio>
<img id="mypic" alt="" src="https://p.upyun.com/demo/tmp/V6drffz0.webp" />
</div>
<script>
mypic.onclick = () => {
aud.paused ? aud.play() : aud.pause();
mypic.style.setProperty('--state', aud.paused ? 'paused' : 'running');
};
</script> 第十讲
<style>
#mybox {
width: 400px;
height: 200px;
border: 10px ridge lightgreen;
border-radius: 0 30% 0 30%;
}
</style>
<div id="mybox"></div>
<style>
#mybox {
width: 400px;
height: 200px;
border-color: lightgreen;
border-style: ridge;
border-width: 10px;
border-radius: 0 30% 0 30%;
}
</style>
<div id="mybox"></div> 表扬你来啦，送你一朵大红花。{:4_204:} 老师这么努力，应该表扬！{:4_187:} 粒子太帅啦，火山喷发似的壮观。。美就一个字。。{:4_199:} 梦油 发表于 2024-9-10 16:51
表扬你来啦，送你一朵大红花。
谢谢梦油的大红花{:5_117:} 梦江南 发表于 2024-9-10 17:57
老师这么努力，应该表扬！
谢谢江南鼓励，晚上好 本帖最后由 绿叶清舟 于 2024-9-10 21:47 编辑 <br /><br /><style>
.box4 {
width: 300px;
height: 300px;
border: 5px groove #e06a2d;
border-radius: 50%;
background:
repeating-linear-gradient(to bottom , transparent, #e06a2d, #fccd75 8%),
repeating-linear-gradient(to left, transparent, #e06a2d, #fccd75 8%);
}
</style>
<div class="box4"> 花飞飞 发表于 2024-9-10 20:12
粒子太帅啦，火山喷发似的壮观。。美就一个字。。
拉下太多还交作业了 本帖最后由 绿叶清舟 于 2024-9-11 20:50 编辑 <br /><br /><style>
.box3 {
width: 600px;
height: 300px;
border-width: 3px;
border-color: CadetBlue;
background:
repeating-linear-gradient(to bottom , transparent,Azure, CadetBlue 10%),
repeating-linear-gradient(to left, transparent,Azure, CadetBlue 5%);
}
</style>
<div class="box3"> 太美啦，必须大表扬{:4_178:} 太科幻了，！太美啦。 这个设计漂亮，那些红色粒子用在这里那么玄妙，真的很有三体的感觉{:4_199:} 清舟除了做帖子，还完成这么多作业，太赞了{:4_187:}