一切尽在不言中 TO：红影 （学习套用黑黑源的效果）
<style>#mydiv {
margin: 130px 0 30px calc(50% - 631px);
width: 1100px;
height: 1100px;
background: url('https://wj.zp68.com/lxx/yunhua/2024/05/01/10.jpg') no-repeat center/cover;
box-shadow: 0 0 6px rgba(0,0,0,.6);
overflow: hidden;
z-index: 1;
display: grid;
place-items: center;
position: relative;
}
#mydiv::before {
position: absolute;
content: '';
inset: -100px;
background: repeating-conic-gradient(at 90px 90px , transparent 0%, rgba(175,238,238,.40) 4%, transparent 8%);
transform-origin: 90px 90px
animation: swear 2s infinite alternate var(--state);
}
#player {
position: absolute;
width: 300px;
height: 300px;
border-radius: 50%; transform: rotateX(30deg);
border: 10px double rgba(0,139,139,.7);
cursor: pointer;
animation: rot 12s linear infinite var(--state);
}
#player::before, #player::after {
position: absolute;
content: '';
border-radius: inherit;
border: inherit;
}
#player::before {
inset: 12px;
border: 6px solid LimeGreen;
border-color: transparent LawnGreen;
}
#player::after { inset: 48px; border-style: dotted; }
#vid {
position: absolute;
top: 0;
right: 0;
width: 1080px;
height: 350px;
opacity: .21;
object-fit: cover;
clip-path: polygon(0 34%, 100% 29%, 100% 60%, 0 90%);
-webkit-mask: linear-gradient(0deg, red 40%, transparent 75%, red 60%);
}
li-zi {
position: absolute;
width: 12px;
height: 14px;
border-radius: 50%;
box-shadow: inset 0 0 10px DarkGreen;
animation: up 4s linear infinite var(--state);
}
@keyframes swear {
from { transform: rotate(-3deg); }
to { transform: rotate(3deg); }
}
@keyframes rot { from { transform: rotateX(60deg) rotate(0deg); } to { transform: rotateX(60deg) rotate(1turn); } }
@keyframes up {
to { transform: translateY(var(--yy)); opacity: 0; }
}
</style>
<div id="mydiv">
<audio id="aud" src="https://wj.zp68.com/lxx/yunhua/2024/05/01/yqjzbyz.mp3" autoplay loop></audio>
<div id="player"></div>
</div>
<script>
Array.from({length: 60}).forEach(i => {
i = document.createElement('li-zi');
i.style.cssText += `
left: ${50 + Math.floor(Math.random() * 150)}px;
top: 95px;
background: #${Math.random().toString(16).substring(2,8)};
animation-delay: -${Math.random() * 4}s;
--yy: ${600 * }px;
`;
player.appendChild(i);
});
aud.oncanplay = aud.onplaying = aud.onpause = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script> @红影
亲爱的，抄你的作业，可能做的有点匆忙，错误肯定还是有的，现在小辣椒炒作业都抄不完整了{:4_198:} 先去吃饭，下午购物回家匆匆忙忙的做一个作业，吃好饭再说了 @马黑黑
谢谢黑黑源码分享{:4_180:} 手机欣赏完美{:4_199:} 小辣椒 发表于 2024-7-28 19:11
@红影
亲爱的，抄你的作业，可能做的有点匆忙，错误肯定还是有的，现在小辣椒炒作业都抄不完整了{:4_19 ...
抄作业也是要技术的{:4_170:} 也不知道是我网络有问题还是怎么了，评分有些评不出来，画面一跳一跳的，还有重影字{:4_198:} 这首鸟语歌很多年前了 好听，好看{:4_205:} 美女收礼开心@红影 这个制作很漂亮，活学活用。
建议：光影淡一点，转换原点后退一点 欣赏佳作，问候小辣椒。 冬天的雨 发表于 2024-7-28 19:44
抄作业也是要技术的
冬雨晚上好{:4_187:} 马黑黑 发表于 2024-7-28 20:03
这个制作很漂亮，活学活用。
建议：光影淡一点，转换原点后退一点
黑黑我改了一下角度，确实是抄作业了{:4_170:} 梦油 发表于 2024-7-28 20:24
欣赏佳作，问候小辣椒。
梦油晚上好{:4_187:}
谢谢欣赏! 樵歌 发表于 2024-7-28 19:45
也不知道是我网络有问题还是怎么了，评分有些评不出来，画面一跳一跳的，还有重影字
樵哥哥现在可以了吗 小辣椒 发表于 2024-7-28 20:40
黑黑我改了一下角度，确实是抄作业了
光影还可以淡一点 马黑黑 发表于 2024-7-28 20:59
光影还可以淡一点
黑黑就现在这样了，我想去看球赛了 小辣椒 发表于 2024-7-28 19:11
@红影
亲爱的，抄你的作业，可能做的有点匆忙，错误肯定还是有的，现在小辣椒炒作业都抄不完整了{:4_19 ...
哪里啊，我也是套用的黑黑代码呢{:4_173:} 冬天的雨 发表于 2024-7-28 19:46
美女收礼开心@红影
谢谢冬小雨，有这样的好礼，肯定很开心啊{:4_187:}