一个人形图案程序c语言,用纯CSS做成的像素人形图案

这篇博客探讨了如何使用CSS实现网页主体的居中定位,以及通过细致的阴影设置创造出复杂的视觉效果。主要关注`main`元素的绝对定位和转换属性,以及`div`元素的宽高和阴影盒阴影的应用,展示了在不同像素位置上如何创建一系列颜色渐变的阴影,以创建独特的背景图案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

CSS

语言:

CSSSCSS

确定

body {

background: #445;

margin: 0;

}

main {

position: absolute;

top: 50%;

left: 50%;

-webkit-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

width: 320px;

height: 680px;

}

div {

width: 20px;

height: 20px;

box-shadow: 20px 0px 0 #000, 40px 0px 0 #000, 60px 0px 0 #000, 80px 0px 0 #000, 0 20px 0 #000, 20px 20px 0 #EC3, 40px 20px 0 #EC3, 60px 20px 0 #EC3, 80px 20px 0 #000, 100px 20px 0 #000, 120px 20px 0 #000, 0 40px 0 #000, 20px 40px 0 #EC3, 40px 40px 0 #ED3, 60px 40px 0 #ED3, 80px 40px 0 #000, 100px 40px 0 #EC3, 120px 40px 0 #EC3, 140px 40px 0 #000, 0 60px 0 #000, 20px 60px 0 #EC3, 40px 60px 0 #ED3, 60px 60px 0 #ED3, 80px 60px 0 #000, 100px 60px 0 #EC3, 120px 60px 0 #ED3, 140px 60px 0 #000, 160px 60px 0 #000, 0 80px 0 #000, 20px 80px 0 #EC3, 40px 80px 0 #ED3, 60px 80px 0 #ED3, 80px 80px 0 #000, 100px 80px 0 #EC3, 120px 80px 0 #ED3, 140px 80px 0 #000, 160px 80px 0 #EC3, 180px 80px 0 #000, 0 100px 0 #000, 20px 100px 0 #EC3, 40px 100px 0 #ED3, 60px 100px 0 #ED3, 80px 100px 0 #000, 100px 100px 0 #EC3, 120px 100px 0 #ED3, 140px 100px 0 #000, 160px 100px 0 #EC3, 180px 100px 0 #ED3, 200px 100px 0 #000, 0 120px 0 #000, 20px 120px 0 #EC3, 40px 120px 0 #EC3, 60px 120px 0 #ED3, 80px 120px 0 #000, 100px 120px 0 #EC3, 120px 120px 0 #ED3, 140px 120px 0 #000, 160px 120px 0 #EC3, 180px 120px 0 #ED3, 200px 120px 0 #000, 220px 120px 0 #000, 20px 140px 0 #000, 40px 140px 0 #EC3, 60px 140px 0 #ED3, 80px 140px 0 #000, 100px 140px 0 #EC3, 120px 140px 0 #ED3, 140px 140px 0 #000, 160px 140px 0 #EC3, 180px 140px 0 #ED3, 200px 140px 0 #000, 220px 140px 0 #EC3, 240px 140px 0 #000, 20px 160px 0 #000, 40px 160px 0 #EC3, 60px 160px 0 #EC3, 80px 160px 0 #ED3, 100px 160px 0 #000, 120px 160px 0 #EC3, 140px 160px 0 #ED3, 160px 160px 0 #000, 180px 160px 0 #EC3, 200px 160px 0 #000, 220px 160px 0 #EC3, 240px 160px 0 #EC3, 260px 160px 0 #000, 40px 180px 0 #000, 60px 180px 0 #EC3, 80px 180px 0 #ED3, 100px 180px 0 #000, 120px 180px 0 #EC3, 140px 180px 0 #ED3, 160px 180px 0 #000, 180px 180px 0 #EC3, 200px 180px 0 #ED3, 220px 180px 0 #000, 240px 180px 0 #EC3, 260px 180px 0 #ED3, 280px 180px 0 #000, 40px 200px 0 #000, 60px 200px 0 #EC3, 80px 200px 0 #ED3, 100px 200px 0 #000, 120px 200px 0 #EC3, 140px 200px 0 #ED3, 160px 200px 0 #000, 180px 200px 0 #EC3, 200px 200px 0 #ED3, 220px 200px 0 #000, 240px 200px 0 #EC3, 260px 200px 0 #ED3, 280px 200px 0 #000, 40px 220px 0 #000, 60px 220px 0 #EC3, 80px 220px 0 #EC3, 100px 220px 0 #EC3, 120px 220px 0 #EC3, 140px 220px 0 #EC3, 160px 220px 0 #EC3, 180px 220px 0 #EC3, 200px 220px 0 #EC3, 220px 220px 0 #EC3, 240px 220px 0 #EC3, 260px 220px 0 #ED3, 280px 220px 0 #000, 60px 240px 0 #000, 80px 240px 0 #E97, 100px 240px 0 #EA7, 120px 240px 0 #EA7, 140px 240px 0 #EA7, 160px 240px 0 #EA7, 180px 240px 0 #EA7, 200px 240px 0 #EA7, 220px 240px 0 #EA7, 240px 240px 0 #EC3, 260px 240px 0 #ED3, 280px 240px 0 #000, 60px 260px 0 #000, 80px 260px 0 #E97, 100px 260px 0 #EA7, 120px 260px 0 #EA7, 140px 260px 0 #EA7, 160px 260px 0 #E97, 180px 260px 0 #E97, 200px 260px 0 #E97, 220px 260px 0 #EA7, 240px 260px 0 #EC3, 260px 260px 0 #ED3, 280px 260px 0 #000, 60px 280px 0 #000, 80px 280px 0 #E97, 100px 280px 0 #EA7, 120px 280px 0 #EA7, 140px 280px 0 #EA7, 160px 280px 0 #EA7, 180px 280px 0 #EA7, 200px 280px 0 #EA7, 220px 280px 0 #EC3, 240px 280px 0 #EC3, 260px 280px 0 #ED3, 280px 280px 0 #000, 60px 300px 0 #000, 80px 300px 0 #000, 100px 300px 0 #000, 120px 300px 0 #000, 140px 300px 0 #000, 160px 300px 0 #000, 180px 300px 0 #000, 200px 300px 0 #000, 220px 300px 0 #000, 240px 300px 0 #000, 260px 300px 0 #ED3, 280px 300px 0 #000, 60px 320px 0 #000, 80px 320px 0 #000, 100px 320px 0 #000, 120px 320px 0 #000, 140px 320px 0 #EA7, 160px 320px 0 #000, 180px 320px 0 #000, 200px 320px 0 #000, 220px 320px 0 #EC3, 240px 320px 0 #EA7, 260px 320px 0 #000, 60px 340px 0 #000, 80px 340px 0 #E97, 100px 340px 0 #EA7, 120px 340px 0 #E97, 140px 340px 0 #EA7, 160px 340px 0 #EA7, 180px 340px 0 #EA7, 200px 340px 0 #EA7, 220px 340px 0 #EC3, 240px 340px 0 #EA7, 260px 340px 0 #000, 60px 360px 0 #000, 80px 360px 0 #E97, 100px 360px 0 #EA7, 120px 360px 0 #EA7, 140px 360px 0 #EA7, 160px 360px 0 #EA7, 180px 360px 0 #EA7, 200px 360px 0 #EA7, 220px 360px 0 #EA7, 240px 360px 0 #000, 60px 380px 0 #000, 80px 380px 0 #E97, 100px 380px 0 #E97, 120px 380px 0 #EA7, 140px 380px 0 #EA7, 160px 380px 0 #EA7, 180px 380px 0 #EA7, 200px 380px 0 #EA7, 220px 380px 0 #EA7, 240px 380px 0 #000, 80px 400px 0 #000, 100px 400px 0 #E97, 120px 400px 0 #E97, 140px 400px 0 #E97, 160px 400px 0 #E97, 180px 400px 0 #E97, 200px 400px 0 #EA7, 220px 400px 0 #EA7, 240px 400px 0 #000, 60px 420px 0 #000, 80px 420px 0 #000, 100px 420px 0 #000, 120px 420px 0 #000, 140px 420px 0 #000, 160px 420px 0 #000, 180px 420px 0 #000, 200px 420px 0 #000, 220px 420px 0 #000, 240px 420px 0 #000, 260px 420px 0 #000, 40px 440px 0 #000, 60px 440px 0 #111, 80px 440px 0 #111, 100px 440px 0 #222, 120px 440px 0 #222, 140px 440px 0 #222, 160px 440px 0 #222, 180px 440px 0 #222, 200px 440px 0 #222, 220px 440px 0 #222, 240px 440px 0 #222, 260px 440px 0 #222, 280px 440px 0 #000, 20px 460px 0 #000, 40px 460px 0 #111, 60px 460px 0 #111, 80px 460px 0 #222, 100px 460px 0 #222, 120px 460px 0 #222, 140px 460px 0 #222, 160px 460px 0 #222, 180px 460px 0 #222, 200px 460px 0 #222, 220px 460px 0 #111, 240px 460px 0 #222, 260px 460px 0 #222, 280px 460px 0 #222, 300px 460px 0 #000, 20px 480px 0 #000, 40px 480px 0 #111, 60px 480px 0 #111, 80px 480px 0 #111, 100px 480px 0 #111, 120px 480px 0 #222, 140px 480px 0 #222, 160px 480px 0 #222, 180px 480px 0 #222, 200px 480px 0 #222, 220px 480px 0 #222, 240px 480px 0 #111, 260px 480px 0 #222, 280px 480px 0 #222, 300px 480px 0 #000, 20px 500px 0 #000, 40px 500px 0 #E97, 60px 500px 0 #EA7, 80px 500px 0 #000, 100px 500px 0 #111, 120px 500px 0 #222, 140px 500px 0 #222, 160px 500px 0 #222, 180px 500px 0 #222, 200px 500px 0 #222, 220px 500px 0 #222, 240px 500px 0 #000, 260px 500px 0 #E97, 280px 500px 0 #EA7, 300px 500px 0 #000, 20px 520px 0 #000, 40px 520px 0 #E97, 60px 520px 0 #EA7, 80px 520px 0 #000, 100px 520px 0 #111, 120px 520px 0 #222, 140px 520px 0 #222, 160px 520px 0 #222, 180px 520px 0 #222, 200px 520px 0 #222, 220px 520px 0 #222, 240px 520px 0 #000, 260px 520px 0 #E97, 280px 520px 0 #EA7, 300px 520px 0 #000, 40px 540px 0 #000, 60px 540px 0 #E97, 80px 540px 0 #000, 100px 540px 0 #000, 120px 540px 0 #111, 140px 540px 0 #222, 160px 540px 0 #222, 180px 540px 0 #222, 200px 540px 0 #222, 220px 540px 0 #222, 240px 540px 0 #000, 260px 540px 0 #E97, 280px 540px 0 #000, 60px 560px 0 #000, 80px 560px 0 #000, 100px 560px 0 #000, 120px 560px 0 #111, 140px 560px 0 #111, 160px 560px 0 #111, 180px 560px 0 #111, 200px 560px 0 #111, 220px 560px 0 #000, 240px 560px 0 #000, 260px 560px 0 #000, 100px 580px 0 #000, 120px 580px 0 #06B, 140px 580px 0 #06B, 160px 580px 0 #07B, 180px 580px 0 #07B, 200px 580px 0 #07B, 220px 580px 0 #000, 100px 600px 0 #000, 120px 600px 0 #06B, 140px 600px 0 #000, 160px 600px 0 #000, 180px 600px 0 #000, 200px 600px 0 #07B, 220px 600px 0 #000, 100px 620px 0 #000, 120px 620px 0 #06B, 140px 620px 0 #000, 180px 620px 0 #000, 200px 620px 0 #07B, 220px 620px 0 #000, 100px 640px 0 #000, 120px 640px 0 #111, 140px 640px 0 #000, 180px 640px 0 #000, 200px 640px 0 #111, 220px 640px 0 #000, 100px 660px 0 #000, 120px 660px 0 #000, 140px 660px 0 #000, 180px 660px 0 #000, 200px 660px 0 #000, 220px 660px 0 #000;

}

@media all and (max-width: 340px) {

div {

-webkit-transform: scale(0.5);

transform: scale(0.5);

position: absolute;

top: 25%;

left: 25%;

margin: -5px 0 0 -5px;

}

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值