亚伦影音工作室 发表于 2023-10-27 09:33

统一漂浮物代码制作【雪 雨 花 星等】

本帖最后由 亚伦影音工作室 于 2023-10-27 15:16 编辑 <br /><br /><style>
#papaa { margin: 10px -300px ; width: 1164px; height: 640px; background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/9f068dceea5cf9fa56819afe389e12a7.jpg)no-repeat center/cover;box-shadow: 2px 2px 2px #000; 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;}
#mpica { position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;z-index: 1;
        height: 100%;
        animation: flyy 100s linear infinite;
        cursor: pointer;
        opacity: 1;
}
#mpicca { position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;z-index: 1;
        height: 100%;
        animation: toto 80s linear infinite;
        cursor: pointer;
        opacity: 1;
}

@keyframes flyy {0%{
      background-position: 600% 0;
    }
    100%{
      background-position: 30% 1600%;filter:hue-rotate(360deg)
    }
}
@keyframes toto { 0%{
      background-position: 0% -1600%;
    }
    100%{
      background-position: 0% 0%;filter:hue-rotate(360deg)
    }
}


</style>
<div id="papaa">
<imgid="mpica"style="width: 100%; height: 100%;background: url('https://www.kumeiwp.com/sub/filestores/2022/11/09/9d71b312b9587c941a35e338e496ae53.png')0 0/50% 50%" >
<imgid="mpicca"style="width: 100%; height: 100%;background: url('https://www.kumeiwp.com/sub/filestores/2022/11/09/9d71b312b9587c941a35e338e496ae53.png')0 0/40% 40%" >
</div>

亚伦影音工作室 发表于 2023-10-27 09:33

本帖最后由 亚伦影音工作室 于 2023-10-27 15:18 编辑 <br /><br /><style>
#papab { margin: 10px -300px ; width: 1164px; height: 640px; background:#000000 ;   position: relative;place-items: center; z-index: 10000; overflow:hidden;}

#mpic { position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;z-index: 1;
        height: 100%;
        animation: fly 150s linear infinite;
        cursor: pointer;mix-blend-mode:lighten;
        opacity: 1;
}
#mpicc { position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;z-index: 1;
        height: 100%;
        animation: tot 80s linear infinite;
        cursor: pointer;mix-blend-mode:lighten;
        opacity: 1;
}

@keyframes fly {0%{
      background-position: 0% 0;
    }
    100%{
      background-position: 600% 0%;filter:hue-rotate(360deg)
    }
}
@keyframes tot { 0%{
      background-position: 0% 600%;
    }
    100%{
      background-position: -600% 0%;filter:hue-rotate(360deg)
    }
}


</style>
<div id="papab">
<imgid="mpic"style="background: url('https://pic.imgdb.cn/item/643c03fe0d2dde5777107ce2.png')0 0/30% 50%" >
<imgid="mpicc"style="background: url('https://pic.imgdb.cn/item/643c03fe0d2dde5777107ce2.png')0 0/40% 65%" >
</div>

亚伦影音工作室 发表于 2023-10-27 09:33

<style>
#papa { margin: 10px -300px ; width: 1164px; height: 640px; background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/168ec7c864954497490b205ff0a2d79c.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/653af6f7c458853aef05605c.png')0 0/50% 60%;
        animation: flyd 300s 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/653af772c458853aef06421d.png')0 0/50% 60%;
        animation: totd 80s linear infinite;
        cursor: pointer;
        opacity: 1;
}

@keyframes flyd {0%{
      background-position: 0% 0;
    }
    100%{
      background-position: 300% 0%;
    }
}
@keyframes totd { 0%{background-position: 300% 50%;
      
    }
    100%{
      background-position: 0% -600%;
    }
}


</style>
<div id="papa">
<divid="mpicd"></div>
<divid="mpiccd"></div>
</div>

红影 发表于 2023-10-27 10:11

这个是让图片做不通方向的错位移动啊，真漂亮{:4_199:}

红影 发表于 2023-10-27 10:12

谢谢亚伦老师带来的漂亮的制作效果，这个太美了{:4_199:}

醉美水芙蓉 发表于 2023-10-27 12:00

世外桃源 发表于 2023-10-27 12:29

欣赏欣赏

世外桃源 发表于 2023-10-27 12:30

可惜俺不会用

焱鑫磊 发表于 2023-10-27 23:12

{:4_187:}{:4_187:}{:4_187:}

小文 发表于 2023-10-28 11:13

好美！
页: [1]
查看完整版本: 统一漂浮物代码制作【雪 雨 花 星等】