我正在参加「初夏创意投稿大赛」详情请看：初夏创意投稿大赛

前言

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

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

代码详细

主要分为三部分

第一部分 鸭蛋白

先画一个椭圆，表示鸭蛋白，这是鸭蛋白的详细设置， 这里学到的知识点就是画椭圆的方法 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很有趣，希望我有个小黄鸭