前言

看到大家轰轰烈烈的初夏创意层出不穷，非前端人员感到非常羡慕，非常想挤入大佬们的世界，凑巧今天发了端午节礼盒，里面有粽子，咸鸭蛋，粽子对我这个选手有点难，而且大家都画过了，我就画个简单的咸鸭蛋的吧

这个应该没人画吧，先来瞅瞅吧，特别简单，就是菜鸟水平https://code.juejin.cn/pen/7103907209171435533

代码详细

主要分为三部分

第一部分 鸭蛋白

先画一个椭圆，表示鸭蛋白，这是鸭蛋白的详细设置，这里学到的知识点就是画椭圆的方法 1、元素首先是个矩形，有宽和高“{width:宽度值;height:高度值;}”样式；

2、要想把矩形元素变成椭圆，给矩形元素添加“{border-radius:100%;}”圆角样式注：如果宽和高相同，就变成了圆形

3 可以用 transform 样式的 rotate(angle)来设置椭圆的倾斜角度

详细代码

#app {    border-radius: 100%;    background: #f1e4ca;    padding: 20px;     width: 150px;    height: 200px;    transform:rotate(60deg);}

第二部分 鸭蛋黄

同鸭蛋白，在鸭蛋白里画一个小圆，设置为合适的颜色

详细参数如下

#circle {    border-radius: 100%;    background: #FFA500;    padding: 20px;     width: 100px;    height: 100px;}

第三部分，鸭蛋动起来

单独画个咸鸭蛋比较无趣，稍微让它跳跳

这里学到了动画的一些知识：CSS 动画特效—animation

基本用法 定义动画名称和动作：

@keyframes 动画名称 {

/初始状态/

0%{ 动作 }

/结束状态/

100%{动作 }

}

基本动作用 transform 来定义，transform 是变形，改变的意思。它有四个属性。

• rotate(旋转)

• skew(扭曲)

• scale(缩放)

• translate(移动)

2、使用动画：

基本用法使用动画的元素 {animation:动画名称 动画持续时间 动画速度}

咸鸭蛋的动画代码如下

@keyframes dong {      0% {transform: translate(0px, 0px);}        50% {transform: translate(10px, 20px);}        100% {transform: translate(0px, 0px);}
    }#app {animation: dong 1s infinite;}

结语

好了，就到这里啦，css 很有趣，希望我有个小黄鸭