使用纯CSS来画一颗鸡蛋

学前端

发布于 2020-04-07 16:14:17

1.1K0

发布于 2020-04-07 16:14:17

文章被收录于专栏：前端之巅前端之巅

先来看下面这张图片，这就是我们要实现的效果。

直接开始

首先，需要一个和鸡蛋等大的长方形，并且在浏览器中居中。

以下是效果图：

现在还不是非常明显。所以接下来我们要给它上颜色以及画出鸡蛋的形状。

所以接下来我们要给它增添一个border-radius 以及一个background-color 属性:

border-radius: 50% /55% 55% 45% 45%;
background: #9ab8da;

这样就有了一个雏形了，接下来就是调校这个鸡蛋的阴影啊反光之类的细节了。

阴影这个方面就有许多的不同了，毕竟使用CSS画出一个鸡蛋也是需要调整阴影，首先我们先来调右上角的阴影

box-shadow:
    0 0 15px 0 #b1c9e3 inset,
    -20px 10px 40px 0 #b1c9e3 inset;

这里为了比较更加明显，在html中的body元素加入一个颜色

body{background-color:#9ab8da;}

然后是左下角的阴影部分：

box-shadow:
            20px -10px 40px 0 #7d92b1 inset,
            40px -30px 80px 0 #778ca9 inset,
            40px -140px 140px -100px #778ca9 inset;

注意：这两个都是在“鸡蛋”内的阴影，所以是inset，等一会我们再来画在鸡蛋外的影子效果。

先放一张效果图：

那么接下来就是画出鸡蛋的影子，在这里，我们使用伪类元素来画出影子效果：

.egg:before{
            content:'';
            position: absolute;
            width: 250px;
            height: 230px;
            border-radius: 50%;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            z-index: -1;
            margin: auto;
            background-color: transparent;
            box-shadow: -80px 130px 40px #667a95;
        }

接着再对影子进行修改。

box-shadow: 
-80px 130px 40px -10px #667a95,
-60px 100px 30px -10px #667a95,
-80px 90px 80px 20px #667a95;

既然有了影子，那自然有光滑的一面，所以我们接着使用伪类来画出反光的部分：

.egg:after{
            content:'';
            background-color: rgb(255, 255,255,.5);
            width: 50px;
            height: 110px;
            position: absolute;
            border-radius: 50%;
            top: 50px;
            right: 50px;
            transform: rotate(-26deg);
            filter:blur(40px);
        }

来看一下效果吧：