生活中，我们早上通常都会吃一个茶叶蛋来补充一天的营养，今天我们就来用CSS来实现一个可爱蛋吧
效果图
实现思路
我们利用container类名盒子作为可爱蛋的载体并通过flex布局的方式使得可爱蛋能够在元素中居中，给上地位便于以后进行定位操作，在通过外边距使得载体距离上面有一定的距离，我们来用ellipse盒子用于定位蛋身里面的内容以及实现单身下边部分的黄壳，egg类名盒子作为蛋身，通过边框圆角的属性实现椭圆蛋身，在通过eye类名元素通过定位结合伪元素的方式实现眼睛的布局，在通过mouth类名元素实现嘴巴的效果，在通过无序列表的方式实现一个蛋齿纹，最后通过动画属性实现可爱蛋的摇摆，下面我们来实现一下吧
主体结构
<div class="container"> <!-- 蛋 --> <div class="ellipse"> <!-- 内容 --> <div class="egg"> <!-- 蛋眼睛 --> <div class="eye"></div> <div class="eye"></div> <!-- 蛋嘴巴 --> <div class="mouth"></div> <!-- 蛋齿纹 --> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div> </div>
初始样式
* { margin: 0; padding: 0; box-sizing: border-box; list-style: none; }
可爱蛋的载体，在通过圆边框属性实现单身的椭圆形状
.container { width: 500px; height: 500px; margin: 50px auto; display: flex; justify-content: center; align-items: center; position: relative; } .ellipse { position: relative; } .egg { width: 290px; height: 340px; border: 18px solid black; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; position: relative; z-index: 5; }
眼睛
我们在给可爱蛋做出眼睛，这里通过俩个盒子进行实现，一个左眼睛一个右眼睛，在通过伪元素的方式实现目光，在通过定位的方式定位到对应的位置
.eye { position: absolute; width: 30px; height: 30px; border-radius: 50%; background-color: #000; top: 18% } .eye:nth-child(1) { left: 23%; } .eye:nth-child(2) { right: 23%; } .eye::after { content: ""; width: 13px; height: 13px; background-color: #fff; border-radius: 50%; position: absolute; left: 2px; top: 3px; }
嘴巴
嘴巴这里我们通过css的定位方式以及旋转属性实现一个菱形的效果定位到合适的位置
.mouth { width: 28px; height: 28px; background-color: #000; border-radius: 12% / 4%; transform: rotate(45deg) translateX(-50%); transform-origin: left; position: absolute; top: 35%; left: 50%; }
齿纹
我们通过无序列表的方式结合定位以及旋转属性实现蛋壳齿纹，因为每个元素旋转的度数不一样，所以需要每一个都单独设置旋转角度
.egg ul li { position: absolute; height: 51px; transform: rotate(220deg); border-left: 18px solid black; border-top: 18px solid black; } .egg ul li:nth-child(1) { top: 53%; height: 40px; width: 45px; left: -4px; } .egg ul li:nth-child(2) { top: 49.5%; width: 58px; left: 16%; } .egg ul li:nth-child(3) { top: 49.5%; width: 58px; left: 36.5%; } .egg ul li:nth-child(4) { top: 49.5%; width: 58px; left: 57%; } .egg ul li:nth-child(5) { top: 49.5%; width: 62px; left: 77.5%; }
下半身
这样基本上做好了，不过下面的蛋壳齿纹下面不太好看，我们通过伪元素来做一个下半身蛋壳
.ellipse::after { content: ""; position: absolute; width: calc(100% - 25px); height: 39%; background-color: rgba(244, 247, 97, 0.753); bottom: 0; left: 10px; border-radius: 0 0 50% 50% / 0 0 100% 100%; z-index: 0; }
动画
最后我们通过css的动画属性设置动画在0%/50%/100%的时候角度全部归为0也就是原本样式，在25%和75%的时候分别向右偏移10deg和向左偏移10deg，在给ellipse类名盒子设置好摇摆角度和对应的运行速度进行无限次运行
.ellipse { animation: swing 3s linear infinite; transform-origin: center bottom; } @keyframes swing { 0% { transform: rotate(0deg); } 25% { transform: rotate(10deg); } 50% { transform: rotate(0deg); } 75% { transform: rotate(-10deg); } 100% { transform: rotate(0deg); } }
代码我已经放到码上掘金上了，快开看看吧！
我正在参加「创意开发 投稿大赛」详情请看：掘金创意开发大赛来了！
