亚伦影音工作室 发表于 2023-10-27 16:47

好多鸽子

本帖最后由 亚伦影音工作室 于 2023-10-27 18:49 编辑 <br /><br /><style>
#papa { margin: 10px -300px ; width: 1164px; height: 640px; background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/2e1adf03c3b0c84b8722bb4b2b919c06.jpg)0 0/100% 100%;   position: relative; display: grid; place-items: center; z-index: 10000; overflow:hidden;}
#papa::before { position: absolute; content: '代码漂浮物制作'; left: 30px; top: 15px; font: bold 2.4em sans-serif; color: #ff0000; text-shadow: 2px 2px 3px #000000; z-index: 6;}
#mpicd { position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;z-index: 1;
        height: 100%;background: url('https://pic.imgdb.cn/item/653b78b1c458853aef79f378.png')0 0/50% 50%;
        animation: flyd 30s linear infinite;
        cursor: pointer;
        opacity: 1;
}
#mpiccd { position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;z-index: 1;
        height:100%;background: url('https://pic.imgdb.cn/item/653b78b1c458853aef79f378.png')0 0/50% 50%;
        animation: totd 30s linear infinite;
        cursor: pointer;
        opacity: 1;
}

@keyframes flyd {0%{transform:translate(0%,0%)scale(1)perspective(35px) rotateY(-5deg);
      background-position: 0% 200%;
    }
    100%{opacity: 1;
      background-position: -600% 0%;
    }

}
@keyframes totd { 0%{background-position: 0% 200%;
       transform:translate(0%,0%)scale(1)perspective(35px) rotateY(-10deg);
    }
    100%{opacity: 1;
      background-position: -600% 0%;
    }

}
#img_border{display:inline-block;width:120px;height:120px;position: absolute;margin: 0px 20px ;
border:6px solid #cccccc;border-radius:50%;animation:rotating 10s linear infinite; z-index: 100;}
@keyframes rotating{0% {transform: rotateX(45deg) rotateY(-20deg) rotateZ(0deg);}
100% {transform: rotateX(45deg) rotateY(-20deg) rotateZ(360deg);}
}

</style>
<div id="papa">
<div ><img id="img_border"src="http://image.hnol.net/c/2022-01/08/11/20220108115931931-5769293.jpg" ></div>
<divid="mpicd"></div>
<divid="mpiccd"></div>
</div>
<audio src="https://www.qqmc.com/mp3/music281007282.mp3" loop autoplay id="aud"></audio>
<script>

img_border.addEventListener('click', () => { aud.paused ? aud.play() : aud.pause(); });
img_border.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>img_border.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>img_border.style.animationPlayState = 'paused');


mpicd.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>mpicd.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mpicd.style.animationPlayState = 'paused');


mpiccd.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>mpiccd.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mpiccd.style.animationPlayState = 'paused');

</script>

红影 发表于 2023-10-27 16:59

这个也很漂亮呢。尤其到后面感觉鸽子更多。好帖{:4_199:}

红影 发表于 2023-10-27 17:01

开始好像转向太多了，看着都快成一条线了呢。转的角度小点会不会好点{:4_173:}

醉美水芙蓉 发表于 2023-10-27 17:15

小辣椒 发表于 2023-10-27 17:29

亚伦想新的花头出来了{:4_170:}

感觉斜度太大

亚伦影音工作室 发表于 2023-10-27 18:48

小辣椒 发表于 2023-10-27 17:29
亚伦想新的花头出来了

感觉斜度太大

可控了

小辣椒 发表于 2023-10-28 19:26

亚伦影音工作室 发表于 2023-10-27 18:48
可控了

厉害的{:4_199:}
页: [1]
查看完整版本: 好多鸽子