2023年3月31日 星期五

CSS Battle #104 Amegakure

 <div a></div><div b></div><div c></div><div d></div><div e></div><div f></div><style>body{background:#000}

div{position:absolute;left:50%;top:50%}

div[a]{background:#37385A;width:240;height:120;border-radius:20px;transform:translate(-50%,-50%)}

div[b]{background:#9897AE;width:200;height:80;border-radius:10px;transform:translate(-50%,-50%)}

div[c]{background:#000;width:10;height:10;border-radius:10px;transform:translate(-85px,-50%);box-shadow:0 -20px #000,0 20px #000,160px 0 #000,160px -20px #000,160px 20px #000}

div[d]{background:#C0C3DB;width:51;height:80;transform:translate(-50%,-50%) skew(-15deg,0deg)}

div[e]{background:#000;width:10;height:50;border-radius:10px;transform:translate(-35px,-50%);box-shadow:20px 0 #000,40px 0 #000,60px 0 #000}

CSS Battle #106 Ryuk's Apple

 <div a></div><div b></div><div c></div><div d></div><div e></div><div f></div><style>body{background:#000}

div{position:absolute;left:50%;top:50%}

div[a]{background:#D4392D;width:100;height:120;border-radius:50%;transform:translate(-20px,-60px) rotate(30deg)}

div[b]{background:#D4392D;width:100;height:120;border-radius:50%;transform:translate(-80px,-60px) rotate(-30deg)}

div[c]{background:#000;width:60;height:70;border-radius:50%;transform:translate(-111px,-54px) rotate(45deg)}

div[d]{background:#000;width:60;height:70;border-radius:50%;transform:translate(-111px,-14px) rotate(45deg)}

div[e]{background:#D4392D;width:10;height:70;transform:translate(-50%,-80px)}

CSS Battle #100 Beo

 <div a></div><div b></div><div c></div><div d></div><div e></div><div f><div g></div></div><div h></div><div i></div><div j></div><div k></div><div l></div>

<style>body{background:#14313E}

div{position:absolute;left:50%;top:50%}

div[a]{background:#FFDF00;width:294;height:40;border-radius:5px;transform:translate(-50%,-50%)}

div[b]{background:#FFDF00;width:274;height:150;border-radius:20px;transform:translate(-50%,-50%)}

div[c]{background:#14313E;width:224;height:100;border-radius:10px;transform:translate(-50%,-50%)}

div[d]{background:#14313E;width:194;height:154;transform:translate(-50%,-50%)}

div[e]{background:#FFDF00;width:30;height:154;transform:translate(-7px,-90px) rotate(45deg)}

div[f]{background:#14313E;width:50;height:154;transform:translate(-33px,-91px) rotate(-45deg)}

div[g]{background:#FFDF00;width:30;height:154;transform:translate(-50%,-50%)}

div[h]{background:#FFDF00;width:21;height:21;transform:translate(-73px,-79px);box-shadow:125px 0 #FFDF00}

div[i]{background:#FFDF00;width:20;height:80;transform:translate(-50px,-6px) rotate(-45deg)}

div[j]{background:#FFDF00;width:20;height:80;transform:translate(30px,-6px) rotate(45deg)}

div[k]{background:#FFDF00;width:20;height:80;transform:translate(-57px,2px) rotate(45deg);border-radius:18px}

div[l]{background:#FFDF00;width:20;height:80;transform:translate(37px,2px) rotate(-45deg);border-radius:18px}