CSS---猪年大吉

最新推荐文章于 2019-04-08 20:01:05 发布

YeSyinnng

最新推荐文章于 2019-04-08 20:01:05 发布

阅读量278

点赞数 1

分类专栏： c's's

本文链接：https://blog.csdn.net/qq_39532595/article/details/85957835

版权

c's's 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

昨天用css画了一个小猪~希望今年，猪年大吉哈哈哈哈：）

很简单的思路，下一步就是想要做一个css3的流星雨~ 加油还是css深的我心哈哈
自己画出来的结果图：
在这里插入图片描述
哈哈超可爱，源代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>pig</title>
    <style>
        .map{
            width: 234px;
            margin:100px auto;
            position:relative;
        }
        .ear::before,.ear::after{
              content: '';
              width: 62px;
              height: 62px;
              border-radius: 2px 31px 2px 31px;
              box-shadow: -1px 2px 5px 1px rgba(0,0,0,.6);
              background-color: #db7452;
              position:absolute;
              transform: rotate(-80deg);
          }
        .ear::after{
            right: 0;
            transform: rotate(-6deg);
        }
        .body{
            width: 234px;
            height: 184px;
            background-color:#f3ad8f;
            border-radius: 88px;
        }
        .eye-left,.eye-right {
            height: 9px;
            width: 9px;
            background-color: black;
            border-radius: 10px 35px 0 0;
            position:absolute;
            top:88px;
            transform: rotate(35deg);
        }
        .eye-left {
            left:60px;
        }
        .eye-right{
            right:60px;
        }
        .nose{
            width: 70px;
            height: 30px;
            background-color:#da938f ;
            position: absolute;
            top:110px;
            left:81px;
            border-radius: 20px;
        }
        .nose::after,.nose::before{
            content: '';
            width: 12px;
            height:12px;
            background-color: #d27658;
            position:absolute;
            border-radius: 50%;
            top:10px;
        }
        .nose::after {
            left:10px;
        }
        .nose::before{
            right:10px;
        }
        .foot-left::before,.foot-left::after{
            content: '';
            width: 3px;
            border-width: 25px 12px 12px 0;
            border-style:solid;
            border-color: #f3ad8f transparent transparent transparent;
            position: absolute;
            left:43px;
            top:163px;
            transform: rotate(6deg);
        }
        .foot-left::after{
            left:49px;
            top:164px;
        }
        .foot-right::before,.foot-right::after{
            content: '';
            width: 3px;
            border-width: 25px 12px 12px 0;
            border-style:solid;
            border-color: #f3ad8f transparent transparent transparent;
            position: absolute;
            right:38px;
            top:159px;
            transform: rotate(-50deg);
        }
        .foot-right::after{
            right:32px;
            top:156px;
        }
    </style>
</head>
<body>
    <div class="map">
        <div class="ear"></div>
        <div class="body">
            <div class="eye-left"></div>
            <div class="eye-right"></div>
            <div class="nose"></div>
        </div>
        <div class="foot-left"></div>
        <div class="foot-right"></div>


    </div>

</body>
</html>

其实主要就是微调，别的没什么~ 加油啦~然后，猪脚有点不对称，可能给我啃了吧，哈哈

YeSyinnng

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS---猪年大吉

昨天用css画了一个小猪~希望今年，猪年大吉哈哈哈哈：）很简单的思路，下一步就是想要做一个css3的流星雨~ 加油还是css深的我心哈哈自己画出来的结果图：哈哈超可爱，源代码如下：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;pig&lt..
复制链接

扫一扫