神奇

才发现 css 居然如此强大,代码见下:

<html><head>
 <title></title>
 <style type="text/css">

div {
 position: absolute;
 transform-origin: left top;
 }
.pig_container {
 width: 800px;
 height: 800px;
 top: 0;
 left: 50px;
}

.pig_head {
 width: 300px;
 height: 200px;
 top: 100px;
 left: 100px;
 border-radius: 95% 50% 50% 50%/ 87% 80% 68% 50%;
 border: 6px solid #ef96c2;
 background-color: #ffb3da;
 transform: rotate(30deg);
 z-index: 100;
 box-sizing: border-box;
}
.pig_head_white_left_bottom {
 width: 200px;
 height: 154px;
 bottom: -7px;
 left: -38px;
 background-color: #fff;
 box-sizing: border-box;
}
.pig_head_white_left_top {
/* width: 200px;
 height: 64px;
 bottom: 84px;
 left: 52px;
 background-color: #ffb3da;
 box-sizing: border-box;*/

width: 200px;
 height: 66px;
 bottom: 84px;
 background-color: #ffb3da;
 box-sizing: border-box;
 top: 166px;
 left: 134px;
 transform: rotate(34deg);
 z-index: 103;
}
.left_eye, .right_eye, .face, .mouth {
 z-index: 104;
}
.pig_nose {
 width: 51px;
 height: 70px;
 top: 147px;
 left: 107px;
 border-radius: 72% 72% 72% 72%/ 72% 72% 72% 72%;
 border: 6px solid #ef96c2;
 background-color: #ffb3da;
 transform: rotate(36deg);
 z-index: 103;
 box-sizing: border-box;
}
.pig_nose_bottom {
 width: 88px;
 height: 13px;
 top: 209px;
 left: 84px;
 border-radius: 50% 50% 50% 50%/ 0% 0% 100% 100%;
 border: 6px solid #ef96c2;
 background-color: #ffb3da;
 transform: rotate(35deg);
 z-index: 102;
 box-sizing: border-box;
 border-top-color: #ffb3da;
}
.pig_jaw {
 width: 97px;
 height: 104px;
 top: 249px;
 left: 141px;
 border-radius: 0% 0% 0% 76%/ 0% 0% 0% 74%;
 border: 6px solid #ef96c2;
 background-color: #ffb3da;
 transform: rotate(22deg);
 z-index: 100;
 box-sizing: border-box;
 border-top-color: #ffb3da;
 border-right-color: #ffb3da;
}
.pig_jaw_right {
 width: 13px;
 height: 6px;
 background-color: #ef96c2;
 top: 373px;
 left: 186px;
 transform: rotate(19deg);
 z-index: 100;
}
.left_eye_bg {
 width: 29px;
 height: 29px;
 top: 177px;
 left: 170px;
 border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
 border: 6px solid #fff;
 background-color: #fff;
 z-index: 101;
 box-sizing: border-box;
}
.left_eye_ball {
 width: 10px;
 height: 10px;
 top: 181px;
 left: 171px;
 border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
 border: 6px solid #000;
 background-color: #000;
 z-index: 101;
 box-sizing: border-box;
}
.left_eye_border {
 width: 34px;
 height: 34px;
 top: 174px;
 left: 166px;
 border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
 border: 6px solid #ef96c2;
 background-color: transparent;
 z-index: 101;
 box-sizing: border-box;
}

.right_eye_bg {
 width: 28px;
 height: 28px;
 top: 194px;
 left: 205px;
 border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
 border: 6px solid #fff;
 background-color: #fff;
 z-index: 101;
 box-sizing: border-box;
}
.right_eye_ball {
 width: 10px;
 height: 10px;
 top: 199px;
 left: 208px;
 border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
 border: 6px solid #000;
 background-color: #000;
 z-index: 101;
 box-sizing: border-box;
}
.right_eye_border {
 width: 35px;
 height: 37px;
 top: 191px;
 left: 202px;
 border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
 border: 6px solid #ef96c2;
 background-color: transparent;
 z-index: 101;
 box-sizing: border-box;
}

.mouth_bottom {
 width: 97px;
 height: 45px;
 top: 273px;
 left: 154px;
 border-radius: 50% 50% 50% 50%/ 0% 0% 100% 100%;
 border: 6px solid #d44b81;
 background-color: #000;
 z-index: 101;
 box-sizing: border-box;
 transform: rotate(19deg);
}
.mouth_middle {
 width: 98px;
 height: 27px;
 top: 272px;
 left: 154px;
 border-radius: 0% 0% 50% 50%/ 0% 0% 100% 100%;
 border: 6px solid #d44b81;
 background-color: #ffb3da;
 z-index: 101;
 box-sizing: border-box;
 transform: rotate(19deg);
 border-top-color: #ffb3da;
}
.mouth_top {
 width: 135px;
 height: 66px;
 top: 231px;
 left: 149px;
 border-radius: 50% 50% 50% 50%/ 0% 0% 100% 100%;
 background-color: #ffb3da;
 z-index: 101;
 transform: rotate(13deg);

/* width: 131px;
 height: 55px;
 top: 231px;
 left: 152px;
 border-radius: 50% 50% 50% 50%/ 0% 0% 100% 100%;
 background-color: #ffb3da;
 z-index: 101;
 transform: rotate(19deg);*/
}
.face {
 width: 49px;
 height: 59px;
 top: 243px;
 left: 269px;
 border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
 background-color: #ff96ce;
 transform: rotate(26deg);
}

.nose_kong_left {
 width: 12px;
 height: 12px;
 top: 179px;
 left: 93px;
 border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
 background-color: #da6c9b;
 z-index: 104;
}
.nose_kong_right {
 width: 12px;
 height: 12px;
 top: 182px;
 left: 109px;
 border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
 background-color: #da6c9b;
 z-index: 104;
}

.ear_left {
 width: 24px;
 height: 52px;
 top: 126px;
 left: 226px;
 border: 6px solid #ef96c2;
 border-radius: 50% 50% 50% 50%/ 35% 40% 50% 50%;
 background-color: #ffb3da;
 z-index: 99;
 transform: rotate(18deg);
}
.ear_right {
 width: 24px;
 height: 52px;
 top: 150px;
 left: 280px;
 border: 6px solid #ef96c2;
 border-radius: 50% 50% 50% 50%/ 35% 40% 50% 50%;
 background-color: #ffb3da;
 z-index: 99;
 transform: rotate(36deg);
}

.pig_body_bottom {
 width: 215px;
 height: 197px;
 top: 305px;
 left: 108px;
 border: 6px solid #e33b32;
 border-radius: 50% 50% 50% 50%/ 100% 100% 0% 0%;
 background-color: #eb5b50;
 z-index: 99;
}

.hand_left_middle {
 width: 78px;
 height: 12px;
 top: 432px;
 left: 63px;
 border-radius: 100% 100% 100% 17%/ 100% 90% 16% 90%;
 background-color: #ffbadf;
 z-index: 99;
 transform: rotate(-35deg);
}
.hand_left_top {
 width: 28px;
 height: 9px;
 top: 415px;
 left: 63px;
 border-radius: 100% 100% 100% 35%/ 100% 90% 16% 90%;
 background-color: #ffbadf;
 z-index: 99;
}
.hand_left_bottom {
 width: 20px;
 height: 9px;
 top: 420px;
 left: 93px;
 border-radius: 60% 59% 65% 90%/ 100% 90% 89% 90%;
 background-color: #ffbadf;
 z-index: 99;
 transform: rotate(98deg);
}

.hand_right_middle {
 width: 79px;
 height: 11px;
 top: 374px;
 left: 309px;
 border-radius: 100% 100% 15% 17%/ 99% 92% 90% 90%;
 background-color: #ffbadf;
 z-index: 99;
 transform: rotate(28deg);
}
.hand_right_top {
 width: 28px;
 height: 10px;
 top: 397px;
 left: 350px;
 border-radius: 100% 100% 15% 17%/ 99% 92% 90% 90%;
 background-color: #ffbadf;
 z-index: 99;
 transform: rotate(-7deg);
}
.hand_right_bottom {
 width: 28px;
 height: 11px;
 top: 395px;
 left: 356px;
 border-radius: 100% 100% 62% 17%/ 99% 92% 90% 90%;
 background-color: #ffbadf;
 z-index: 99;
 transform: rotate(69deg);
}
.left_foot {
 width: 11px;
 height: 52px;
 top: 507px;
 left: 175px;
 border-radius: 100% 100% 100% 100%/ 50% 50% 21% 20%;
 background-color: #ffbadf;
 z-index: 99;
}
.left_shoes {
 width: 51px;
 height: 14px;
 top: 553px;
 left: 138px;
 border-radius: 58% 187% 180% 50%/ 130% 123% 113% 100%;
 background-color: #000;
 z-index: 99;
 transform: rotate(0deg);
}
.right_foot {
 left: 268px;
}
.right_shoes {
 left: 230px;
}
.pig_shadow {
 width: 240px;
 height: 47px;
 top: 535px;
 left: 101px;
 border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
 background-color: rgba(171, 171, 171, 0.7);
 transform: rotate(-1deg);
}
.tail_left {
 width: 19px;
 height: 8px;
 top: 472px;
 left: 330px;
 border-radius: 50% 50% 50% 50%/ 0% 0% 100% 100%;
 transform: rotate(-9deg);
 background-color: #ffbadf;
 z-index: 99;
}
.tail_left_blank {
 width: 30px;
 height: 15px;
 top: 466px;
 left: 332px;
 border-radius: 50% 50% 50% 50%/ 0% 0% 100% 100%;
 transform: rotate(-36deg);
 background-color: #fff;
 z-index: 99;
}
.tail_right {
 width: 21px;
 height: 5px;
 top: 451px;
 left: 343px;
 border-radius: 0% 0% 51% 50%/ 0% 0% 100% 100%;
 transform: rotate(31deg);
 background-color: #fff;
 z-index: 99;
 border: 8px solid #ffbadf;
 border-top-color: #fff;
}
.tail_blank {
 width: 36px;
 height: 21px;
 top: 437px;
 left: 351px;
 transform: rotate(34deg);
 background-color: #fff;
 z-index: 99;
}
.tail_middle {
 width: 7px;
 height: 11px;
 top: 450px;
 left: 336px;
 border: 8px solid #ffbadf;
 border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
 background-color: #fff;
 z-index: 99;
}
.tail_circle {
 width: 17px;
 height: 8px;
 top: 475px;
 left: 358px;
 border-radius: 36% 37% 62% 63%/ 99% 92% 90% 90%;
 background-color: #ffbadf;
 z-index: 99;
 transform: rotate(-40deg);
}

</style>
</head>
<body>

<div class="pig_container">
 <!-- 尾巴 -->
 <div class="tail_left"></div>
 <div class="tail_right"></div>
 <div class="tail_blank"></div>
 <div class="tail_middle"></div>
 <div class="tail_circle"></div>
 <!-- 底部阴影 -->
 <div class="pig_shadow"></div>
 <!-- 左脚 -->
 <div class="left_foot"></div>
 <div class="left_foot right_foot"></div>
 <!-- 左鞋 -->
 <div class="left_shoes"></div>
 <div class="left_shoes right_shoes"></div>
 <!-- 左手 -->
 <div>
 <div class="hand_left_top"></div>
 <div class="hand_left_bottom"></div>
 <div class="hand_left_middle"></div>
 </div>
 <!-- 身体 -->
 <div class="pig_body_bottom"></div>
 <!-- 右手 -->
 <div>
 <div class="hand_right_top"></div>
 <div class="hand_right_bottom"></div>
 <div class="hand_right_middle"></div>
 </div>

<!-- 猪头 -->
 <div>
 <!-- 耳朵 -->
 <div class="ear_left"></div>
 <div class="ear_right"></div>
 <div class="pig_head">
 <div class="pig_head_white_left_bottom"></div>
 </div>
 <div class="pig_head_white_left_top"></div>
 <!-- 鼻子 -->
 <div class="pig_nose"></div>
 <!-- 下巴 -->
 <div class="pig_jaw"></div>
 <div class="pig_jaw_right"></div>
 <div class="pig_nose_bottom"></div>
 <!-- 鼻孔 -->
 <div class="nose_kong_left"></div>
 <div class="nose_kong_right"></div>
 <!-- 左眼 -->
 <div class="left_eye">
 <div class="left_eye_bg"></div>
 <div class="left_eye_ball"></div>
 <div class="left_eye_border"></div>
 </div>
 <!-- 右眼 -->
 <div class="right_eye">
 <div class="right_eye_bg"></div>
 <div class="right_eye_ball"></div>
 <div class="right_eye_border"></div>
 </div>
 <!-- 嘴巴 -->
 <div class="mouth">
 <div class="mouth_bottom"></div>
 <div class="mouth_middle"></div>
 <div class="mouth_top"></div>
 </div>
 <!-- 脸颊 -->
 <div class="face"></div>
 </div>
</div>
</body></html>

Demo: 纯 CSS 打造小猪佩奇形象


参考文章:

1、《小猪佩奇CSS


ArmxMod for Typecho
个性化、自适应、功能强大的响应式主题

推广

 继续浏览关于 神奇CSS代码 的文章

 本文最后更新于 2018/06/01 12:56:08,可能因经年累月而与现状有所差异

 引用转载请注明:VirCloud's Blog > 默认 > 神奇

精选评论

  1. 子午
    子午 回复

    Windows 10Chrome 66.0.3359.181来自 江苏 的大神

    牛逼。。。。

    1. 欧文斯

      是啊,css 功能还是很强大的,能用 css 就不用 js,感觉 css 兼容性更好

      1. 子午
        子午 回复

        Windows 10Chrome 66.0.3359.181来自 江苏 的大神

        你的回复通知搞搞啊,没通知炒鸡不习惯。465端口的还是比较好用的。

        1. 欧文斯

          之前搞过了,发现端口是被封的,所以走端口发不出去。在找有没有不走端口的,有看到过吗?

          1. 欧文斯

            嗯,我再找找看,那天收到邮件了说明就是搞好了 icon_smile.gif

          2. 子午
            子午 回复

            Windows 10Chrome 66.0.3359.181来自 江苏 的大神

            没有研究过,我是能有现成的绝对不会自己瞎折腾,炒鸡懒。 icon_lol.gif

  2. 葛一速
    葛一速 回复

    Windows XPFirefox 52.0来自 广东 的大神

    有创意啊,挺像的