单DIV实现超级马里奥像素肖像

Single Element Mario Mosaic 使用box-shadow属性实现的像素画。

CSS3

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 4168
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background: #59ABE3;
}
.mario {
    width: 23px;
    height: 23px;
    margin-top: 5%;
    margin-left: 10%;
    background: transparent;
    box-shadow: 325px 0 0 #F4B350, 350px 0 0 #F4B350, 375px 0 0 #F4B350, 150px 25px 0 #D91E18, 175px 25px 0 #D91E18, 200px 25px 0 #D91E18, 225px 25px 0 #D91E18, 250px 25px 0 #D91E18, 325px 25px 0 #F4B350, 350px 25px 0 #F4B350, 375px 25px 0 #F4B350, 125px 50px 0 #D91E18, 150px 50px 0 #D91E18, 175px 50px 0 #D91E18, 200px 50px 0 #D91E18, 225px 50px 0 #D91E18, 250px 50px 0 #D91E18, 275px 50px 0 #D91E18, 300px 50px 0 #D91E18, 325px 50px 0 #D91E18, 350px 50px 0 #F4B350, 375px 50px 0 #F4B350, 125px 75px 0 #651810, 150px 75px 0 #651810, 175px 75px 0 #651810, 200px 75px 0 #F4B350, 225px 75px 0 #F4B350, 250px 75px 0 #651810, 275px 75px 0 #F4B350, 325px 75px 0 #651810, 350px 75px 0 #651810, 375px 75px 0 #651810, 100px 100px 0 #651810, 125px 100px 0 #F4B350, 150px 100px 0 #651810, 175px 100px 0 #F4B350, 200px 100px 0 #F4B350, 225px 100px 0 #F4B350, 250px 100px 0 #651810, 275px 100px 0 #F4B350, 300px 100px 0 #F4B350, 325px 100px 0 #F4B350, 350px 100px 0 #651810, 375px 100px 0 #651810, 100px 125px 0 #651810, 125px 125px 0 #F4B350, 150px 125px 0 #651810, 175px 125px 0 #651810, 200px 125px 0 #F4B350, 225px 125px 0 #F4B350, 250px 125px 0 #F4B350, 275px 125px 0 #651810, 300px 125px 0 #F4B350, 325px 125px 0 #F4B350, 350px 125px 0 #F4B350, 375px 125px 0 #651810, 100px 150px 0 #651810, 125px 150px 0 #651810, 150px 150px 0 #F4B350, 175px 150px 0 #F4B350, 200px 150px 0 #F4B350, 225px 150px 0 #F4B350, 250px 150px 0 #651810, 275px 150px 0 #651810, 300px 150px 0 #651810, 325px 150px 0 #651810, 350px 150px 0 #651810, 150px 175px 0 #F4B350, 175px 175px 0 #F4B350, 200px 175px 0 #F4B350, 225px 175px 0 #F4B350, 250px 175px 0 #F4B350, 275px 175px 0 #F4B350, 300px 175px 0 #F4B350, 325px 175px 0 #651810, 50px 200px 0 #651810, 75px 200px 0 #651810, 100px 200px 0 #651810, 125px 200px 0 #651810, 150px 200px 0 #651810, 175px 200px 0 #D91E18, 200px 200px 0 #651810, 225px 200px 0 #651810, 250px 200px 0 #651810, 275px 200px 0 #D91E18, 300px 200px 0 #651810, 25px 225px 0 #651810, 50px 225px 0 #651810, 75px 225px 0 #651810, 100px 225px 0 #651810, 125px 225px 0 #651810, 150px 225px 0 #651810, 175px 225px 0 #651810, 200px 225px 0 #D91E18, 225px 225px 0 #651810, 250px 225px 0 #651810, 275px 225px 0 #651810, 300px 225px 0 #D91E18, 375px 225px 0 #651810, 0 250px 0 #F4B350, 25px 250px 0 #F4B350, 50px 250px 0 #651810, 75px 250px 0 #651810, 100px 250px 0 #651810, 125px 250px 0 #651810, 150px 250px 0 #651810, 175px 250px 0 #651810, 200px 250px 0 #D91E18, 225px 250px 0 #D91E18, 250px 250px 0 #D91E18, 275px 250px 0 #D91E18, 300px 250px 0 #D91E18, 375px 250px 0 #651810, 0 275px 0 #F4B350, 25px 275px 0 #F4B350, 50px 275px 0 #F4B350, 125px 275px 0 #D91E18, 150px 275px 0 #651810, 175px 275px 0 #D91E18, 200px 275px 0 #D91E18, 225px 275px 0 #D91E18, 250px 275px 0 #F9BF3B, 275px 275px 0 #D91E18, 300px 275px 0 #F9BF3B, 325px 275px 0 #D91E18, 350px 275px 0 #651810, 375px 275px 0 #651810, 25px 300px 0 #F4B350, 75px 300px 0 #651810, 125px 300px 0 #D91E18, 150px 300px 0 #D91E18, 175px 300px 0 #D91E18, 200px 300px 0 #D91E18, 225px 300px 0 #D91E18, 250px 300px 0 #D91E18, 275px 300px 0 #D91E18, 300px 300px 0 #D91E18, 325px 300px 0 #D91E18, 350px 300px 0 #651810, 375px 300px 0 #651810, 50px 325px 0 #651810, 75px 325px 0 #651810, 100px 325px 0 #651810, 125px 325px 0 #D91E18, 150px 325px 0 #D91E18, 175px 325px 0 #D91E18, 200px 325px 0 #D91E18, 225px 325px 0 #D91E18, 250px 325px 0 #D91E18, 275px 325px 0 #D91E18, 300px 325px 0 #D91E18, 325px 325px 0 #D91E18, 350px 325px 0 #651810, 375px 325px 0 #651810, 25px 350px 0 #651810, 50px 350px 0 #651810, 75px 350px 0 #651810, 100px 350px 0 #D91E18, 125px 350px 0 #D91E18, 150px 350px 0 #D91E18, 175px 350px 0 #D91E18, 200px 350px 0 #D91E18, 225px 350px 0 #D91E18, 250px 350px 0 #D91E18, 25px 375px 0 #651810, 100px 375px 0 #D91E18, 125px 375px 0 #D91E18, 150px 375px 0 #D91E18, 175px 375px 0 #D91E18;
}

HTML

Single Element Mario Mosaic 使用box-shadow属性实现的像素画。

CSS3

编辑器支持Emmet

快捷键

Single Element Mario Mosaic 使用box-shadow属性实现的像素画。

CSS3

单DIV实现逼真的人眼

CSS3 单个DIV中画的Poké球

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：