送台魔幻手机给队长庆生

马黑黑 · 发表于 2022-4-21 11:51

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-4-21 12:05 编辑

马黑黑 · 发表于 2022-4-21 11:52

代码：（需要定位的修改.papa的left与top值）

<style>
.papa {
width: 50px; height: 100px;
left: 100px; top: 100px;
background: #000; cursor: pointer;
position: relative;border: 1px solid #000;
animation: rot 4s linear infinite;
}
.papa::after {
content: ''; position: absolute;
left:2px; top: 2px; width: 3px; height: 3px;
border: 2px solid #666; border-radius: 50%;
background: #000;
}
.papa div {
width: 100%; height: 100%;
border: 1px solid; position: absolute; opacity: .85;
}
@keyframes rot { to {transform: rotate(1turn); } }
</style>
<div class="papa"></div>
<script>
let papa = document.querySelector(".papa");
let au = document.createElement("audio");
let dstr = "";
let flag = true;
au.src = "http://www.kumeiwp.com/sub/filestores/2022/02/03/c28be3aed0f506b785c7bf9bc6344b50.mp3";
au.autoplay = flag;
au.loop= true;
for(j=0; j<6; j++){
let cc = `#${Math.random().toString(16).substr(-6)}`;
dstr += `<div style="border-color: ${cc}; transform: rotate(${j*30}deg);"></div>\n`;
}
papa.innerHTML = dstr;
papa.appendChild(au);
papa.onclick = function() {
flag ? (this.style.animationPlayState = "paused",flag = false,au.pause()) : (this.style.animationPlayState = "running",flag = true,au.play());
}
let tt = setInterval(flash,100);
function flash(){
let c1 = `#${Math.random().toString(16).substr(-6)}`;
let c2 = `#${Math.random().toString(16).substr(-6)}`;
papa.style.background = `linear-gradient(120deg,${c1},${c2})`;
}
</script>

复制代码

马黑黑 · 发表于 2022-4-21 11:53

手机的变色不受控制，如果需要，也很简单

马黑黑 · 发表于 2022-4-21 11:56

本来想往手机里塞个百变镁铝背景，担心队长有压力，算了，还是弄成魔幻色彩的吧，安全第一

加林森 · 发表于 2022-4-21 11:59

马黑黑发表于 2022-4-21 11:56
本来想往手机里塞个百变镁铝背景，担心队长有压力，算了，还是弄成魔幻色彩的吧，安全第一

哈哈哈哈，真开心。谢谢老黑的精美制作，又有学习的了。

马黑黑 · 发表于 2022-4-21 12:02

本帖最后由马黑黑于 2022-4-21 12:03 编辑

CSS部分是简单的：

一、外层div带一个伪元素，模拟挖孔屏样式；外层div旋转；二、关键帧动画（转一圈）；
三、子Div由JS生成，CSS定义统一样式。

HTML部分：就一行代码

JS部分：

一、生成六个子Div，每一个的边框颜色随机产生，每个div通过旋转一定角度，组合成鸟巢状；
二、控制音乐与外层旋转；
三、外层背景色变幻。