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

送台魔幻手机给队长庆生

本帖最后由 马黑黑 于 2022-4-21 12:05 编辑 <br /><br /><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 style="width: 760px; height: 400px;">
        <div class="papa"></div>
</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: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

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

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

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

哈哈哈哈，真开心。谢谢老黑的精美制作，又有学习的了。{:4_187:}{:4_190:}

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

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

CSS部分是简单的：

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

HTML部分：就一行代码

JS部分：

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

马黑黑 发表于 2022-4-21 12:03

加林森 发表于 2022-4-21 11:59
哈哈哈哈，真开心。谢谢老黑的精美制作，又有学习的了。

6楼有解释

加林森 发表于 2022-4-21 12:05

下午我也去试一试，学着制作另外一个出来。谢谢老黑。{:4_204:}{:4_190:}

马黑黑 发表于 2022-4-21 12:06

加林森 发表于 2022-4-21 12:05
下午我也去试一试，学着制作另外一个出来。谢谢老黑。

{:4_190:}

樵歌 发表于 2022-4-21 12:15

挖，还是豪用的高档货{:4_173:}
祝贺队长生日快乐！{:4_176:}

樵歌 发表于 2022-4-21 12:17

贺贴统一飘红加精加粗本版顶置哈。

加林森 发表于 2022-4-21 12:22

马黑黑 发表于 2022-4-21 12:03
6楼有解释

嗯嗯。

加林森 发表于 2022-4-21 12:23

樵歌 发表于 2022-4-21 12:15
挖，还是豪用的高档货
祝贺队长生日快乐！

谢谢樵歌。大家一起快乐！{:4_204:}{:4_176:}

加林森 发表于 2022-4-21 12:24

樵歌 发表于 2022-4-21 12:17
贺贴统一飘红加精加粗本版顶置哈。

谢谢樵歌了，辛苦了！{:4_190:}

红影 发表于 2022-4-21 12:52

黑黑的礼物这么高科技，队长有一只魔幻手机了{:4_187:}

红影 发表于 2022-4-21 12:53

借黑黑好帖，同贺队长生日快乐{:5_166:}

大猫咪 发表于 2022-4-21 12:55

老黑这生日礼物真棒，高科技手机啊！ 赞！

同贺队长生日快乐，事事如意！

{:4_204:}{:5_166:}{:4_191:}{:4_176:}{:4_177:}

梦油 发表于 2022-4-21 14:18

借黑黑朋友的美帖，祝福加林森朋友生日快乐

加林森 发表于 2022-4-21 17:51

红影 发表于 2022-4-21 12:52
黑黑的礼物这么高科技，队长有一只魔幻手机了

谢谢红影支持！{:4_204:}{:4_190:}

加林森 发表于 2022-4-21 17:52

红影 发表于 2022-4-21 12:53
借黑黑好帖，同贺队长生日快乐

谢谢红影！一起快乐！{:4_204:}{:4_204:}
页: [1] 2 3
查看完整版本: 送台魔幻手机给队长庆生