10个卡通风格的CSS3彩色图标

CSS colorfull icons 酒杯、手机、胶囊、吸管、摄像头等。

css3，图标，卡通

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

第三方库
作品简介 1513
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

* {
    margin: 0;
    padding: 0;
}
body {
    background: #212121;
}
ul {
    position: relative;
    width: 80%;
    height: 600px;
    list-style: none;
    margin: 121px auto;
}
ul li {
    display: inline-block;
    width: 152px;
    height: 152px;
    border-radius: 100%;
    margin: 50px 73px;
}
ul li:nth-child(1) {
    background: lightblue;
}
.celu {
    position: absolute;
    width: 45px;
    height: 90px;
    background: pink;
    border: 3px solid black;
    border-radius: 6px;
    margin: 25px 50px;
}
.celu::before {
    content: "";
    display: block;
    width: 45px;
    height: 21px;
    background: white;
    border-bottom: 3px solid black;
}
.celu::after {
    content: "";
    display: block;
    width: 45px;
    height: 12px;
    background: white;
    border-top: 3px solid black;
    margin: 50px 0;
}
.cel3 {
    position: absolute;
    width: 21px;
    height: 3px;
    background: black;
    margin: 37px 66px;
}
.cel3::before {
    content: "";
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 100%;
    background: black;
    margin: 70px 5px;
}
.cel3::after {
    content: "";
    display: block;
    width: 5px;
    height: 35px;
    background: white;
    margin: -125px -7px;
}
ul li:nth-child(2) {
    background: pink;
}
.taza {
    position: absolute;
    width: 55px;
    height: 70px;
    background: lightblue;
    border: 3px solid black;
    border-radius: 0 0 50px 50px;
    margin: 40px 40px;
}
.taza::before {
    content: "";
    display: block;
    width: 21px;
    height: 40px;
    border-radius: 100%;
    border: 3px solid black;
    margin: 7px 55px;
}
.taza::after {
    content: "";
    display: block;
    width: 5px;
    height: 35px;
    background: white;
    margin: -50px 5px;
}
.taza3 {
    position: absolute;
    width: 30px;
    height: 16px;
    border-radius: 0 0 45px 45px;
    border-right: 5px solid white;
    margin: 90px 55px;
}
ul li:nth-child(3) {
    background: #ea65a3;
}
.vaso {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 0 0 40px 40px;
    background: #bde3ef;
    border: 3px solid black;
    margin: 30px 49px;
}
.vaso::before {
    content: "";
    display: block;
    width: 7px;
    height: 40px;
    background: #bde3ef;
    border: 3px solid black;
    margin: 50px 18px;
}
.vaso::after {
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    border-radius: 100%;
    background: #bde3ef;
    border: 3px solid black;
    margin: -55px 2px;
}
.wine {
    position: absolute;
    width: 50px;
    height: 30px;
    border-radius: 0 0 50px 50px;
    background: #dd5089;
    margin: 53px 52px;
}
.wine::before {
    content: "";
    display: block;
    width: 5px;
    height: 14px;
    background: white;
    margin: -16px 5px;
}
.wine::after {
    content: "";
    display: block;
    width: 5px;
    height: 7px;
    background: white;
    margin: 21px 5px;
}
.wine3 {
    position: absolute;
    width: 21px;
    height: 12px;
    border-radius: 0 0 21px 21px;
    border-right: 5px solid white;
    margin: 65px 69px;
}
ul li:nth-child(4) {
    background: #dae3e6;
}
.joy::before {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background: #e45544;
    border: 3px solid black;
    margin: -77px 12px;
}
.joy::after {
    content: "";
    display: block;
    width: 3px;
    height: 55px;
    background: black;
    margin: 77px 29px;
}
.joy {
    position: absolute;
    width: 60px;
    height: 35px;
    border-radius: 100%;
    background: #fc0;
    border: 3px solid black;
    margin: 90px 43px;
}
.joy3 {
    position: absolute;
    width: 21px;
    height: 12px;
    border-radius: 21px 21px 0 0;
    border-left: 3px solid white;
    margin: 21px 64px;
}
ul li:nth-child(5) {
    background: #36d7b7;
}
.bol {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 100%;
    background: #9f85e5;
    border: 3px solid black;
    margin: 30px 33px;
}
.bol::before {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 100%;
    background: #6650a3;
    border: 3px solid black;
    margin: 35px 45px;
}
.bol::after {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 100%;
    background: #6650a3;
    border: 3px solid black;
    margin: -40px 25px;
}
.bol3 {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 100%;
    background: #6650a3;
    border: 3px solid black;
    margin: 89px 80px;
}
.bol3::before {
    content: "";
    display: block;
    width: 45px;
    height: 21px;
    border-radius: 40px 40px 0 0;
    border-left: 5px solid white;
    -webkit-transform: rotate(12deg);
    -moz-transform: rotate(12deg);
    -ms-transform: rotate(12deg);
    -o-transform: rotate(12deg);
    transform: rotate(12deg);
    margin: -50px -35px;
}
ul li:nth-child(6) {
    background: #f0c40e;
}
.bor {
    position: absolute;
    width: 45px;
    height: 50px;
    border-radius: 35px 35px 0 0;
    background: #e45544;
    border: 3px solid black;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    margin: 30px 70px;
}
.bor::before {
    content: "";
    display: block;
    width: 45px;
    height: 50px;
    border-radius: 0 0 35px 35px;
    background: #9f85e6;
    border: 3px solid black;
    margin: 50px -3px;
}
.bor3 {
    position: absolute;
    width: 45px;
    height: 21px;
    border-radius: 40px 40px 0 0;
    border-left: 5px solid white;
    -webkit-transform: rotate(35deg);
    -moz-transform: rotate(35deg);
    -ms-transform: rotate(35deg);
    -o-transform: rotate(35deg);
    transform: rotate(35deg);
    margin: 43px 83px;
}
.bor3::before {
    content: "";
    display: block;
    width: 45px;
    height: 21px;
    border-radius: 0 0 40px 40px;
    border-right: 5px solid white;
    margin: 75px -30px;
}
ul li:nth-child(7) {
    background: #83dd47;
}
.cristal {
    position: absolute;
    width: 50px;
    height: 65px;
    border-radius: 12px;
    background: #fc0;
    margin: 45px 47px;
    border: 3px solid black;
}
.cristal::before {
    content: "";
    display: block;
    width: 50px;
    height: 6px;
    border-radius: 6px;
    background: #aa8566;
    border: 3px solid black;
    margin: -9px -3px;
}
.cristal::after {
    content: "";
    display: block;
    width: 3px;
    height: 30px;
    background: black;
    margin: 12px 21px;
    -webkit-transform: rotate(21deg);
    -moz-transform: rotate(21deg);
    -ms-transform: rotate(21deg);
    -o-transform: rotate(21deg);
    transform: rotate(21deg);
}
.cristal3 {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 100%;
    background: #e45544;
    border: 3px solid black;
    margin: 83px 57px;
}
.cristal3::before {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 100%;
    background: #e45544;
    border: 3px solid black;
    margin: 0px 13px;
}
.cristal3::after {
    content: "";
    display: block;
    width: 3px;
    height: 30px;
    background: black;
    margin: -47px 19px;
    -webkit-transform: rotate(-9deg);
    -moz-transform: rotate(-9deg);
    -ms-transform: rotate(-9deg);
    -o-transform: rotate(-9deg);
    transform: rotate(-9deg);
}
.cristal5 {
    position: absolute;
    width: 5px;
    height: 21px;
    background: white;
    margin: 60px 53px;
}
.cristal5::before {
    content: "";
    display: block;
    width: 30px;
    height: 16px;
    border-radius: 0 0 12px 12px;
    border-right: 5px solid white;
    margin: 35px 9px;
}
ul li:nth-child(8) {
    background: #e88075;
}
.gote {
    position: absolute;
    width: 21px;
    height: 60px;
    border-radius: 0 0 30px 30px;
    background: #4b808e;
    border: 3px solid black;
    margin: 65px 60px;
}
.gote::before {
    content: "";
    display: block;
    width: 50px;
    height: 21px;
    border-radius: 90px 90px 0 0;
    border: 3px solid black;
    background: #e45544;
    margin: -25px -17px;
}
.gote::after {
    content: "";
    display: block;
    width: 12px;
    height: 21px;
    border-radius: 90px 90px 0 0;
    border: 3px solid black;
    background: #e45544;
    margin: -50px 2px;
}
.gote3 {
    position: absolute;
    width: 30px;
    height: 12px;
    border-radius: 0 0 12px 12px;
    border-right: 5px solid white;
    margin: 112px 47px;
}
.gote3::before {
    content: "";
    display: block;
    width: 30px;
    height: 12px;
    border-radius: 30px 30px 0 0;
    border-left: 6px solid white;
    margin: -60px 7px;
}
ul li:nth-child(9) {
    background: #377ef0;
}
.fil {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 100%;
    background: #bc4a96;
    border: 3px solid black;
    margin: 40px 43px;
}
.fil::before {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background: #893770;
    border: 3px solid black;
    margin: 12px 12px;
}
.fil:after {
    content: "";
    display: block;
    width: 30px;
    height: 14px;
    border: 3px solid black;
    border-radius: 30px 30px 0 0;
    background: #893770;
    margin: 0 12px;
}
.fil3 {
    position: absolute;
    width: 16px;
    height: 9px;
    border-radius: 21px 21px 0 0;
    border-right: 6px solid white;
    margin: 63px 65px;
}
.fil3::before {
    content: "";
    display: block;
    width: 16px;
    height: 9px;
    border-radius: 21px 21px 0 0;
    border-left: 6px solid white;
    margin: 46px 0px;
}
ul li:nth-child(10) {
    background: #e97c43;
}
.ter {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 100%;
    background: #00ae8c;
    border: 3px solid black;
    margin: 65px 45px;
}
.ter::before {
    content: "";
    display: block;
    width: 25px;
    height: 50px;
    border-radius: 21px 21px 0 0;
    background: #e74c3c;
    border: 3px solid black;
    margin: -53px 14px;
}
.ter3 {
    position: absolute;
    width: 30px;
    height: 21px;
    border-radius: 0 0 30px 30px;
    border-right: 6px solid white;
    margin: 97px 67px;
}
.ter3::before {
    content: "";
    display: block;
    width: 30px;
    height: 12px;
    border-radius: 30px 30px 0 0;
    border-left: 5px solid white;
    margin: -77px 0px;
}

HTML

CSS colorfull icons 酒杯、手机、胶囊、吸管、摄像头等。

css3，图标，卡通

编辑器支持Emmet

快捷键

CSS colorfull icons 酒杯、手机、胶囊、吸管、摄像头等。

css3，图标，卡通

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：