我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛

前言

最近不是要参加兔了个兔的比赛么,于是乎开始下一个蹦蹦跳跳的小白兔.

思路

整体就是一个背景和白兔,白兔可以跳动,背景使用flex布局来做,白兔就是一个div,加上border- radius,像耳朵和腿就用伪元素实现,让白兔动起来用css的animation.

延伸知识点

引申一点相关知识：上面的CSS代码里display：flex其实是弹性布局，采用Flex布局的元素，称为Flex容器(flex container)，简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目(flex item)，简称”项目”。

flex布局有以下6个属性：

flex-direction flex-wrap flex-flow justify-content align-items align-content 其中，我们的代码里面用到的justify-content：center定义了项目在主轴上的对齐方式为center。

 animation 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。

• animation-name：设置需要绑定到元素的动画名称；
• animation-duration：设置完成动画所需要花费的时间，单位为秒或毫秒，默认为 0；
• animation-timing-function：设置动画的速度曲线，默认为 ease；
• animation-fill-mode：设置当动画不播放时（动画播放完或延迟播放时）的状态；
• animation-delay：设置动画开始之前的延迟时间，默认为 0；
• animation-iteration-count：设置动画被播放的次数，默认为 1；
• animation-direction：设置是否在下一周期逆向播放动画，默认为 normal；
• animation-play-state：设置动画是正在运行还是暂停，默认是 running；
• animation：所有动画属性的简写属性。

代码实现

body {
   margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(midnightblue, black); font-size: 20px; margin-top: 2em; overflow: hidden;}
.rabbit { width: 5em; height: 3em; color: whitesmoke; background:  radial-gradient( circle at 4.2em 1.4em, #333 0.15em, transparent 0.15em ), /* eye */ currentColor; border-radius: 70% 90% 60% 50%; box-shadow: -0.2em 1em 0 -0.75em #333; z-index: 1; animation: hop 1s linear infinite;}
@keyframes hop { 20% { transform: rotate(-10deg) translate(1em, -2em); box-shadow: -0.2em 3em 0 -1em #333; } 40% { transform: rotate(10deg) translate(3em, -4em); box-shadow: -0.2em 3.25em 0 -1.1em #333; } 60%, 75% { transform: rotate(0deg) translate(4em, 0); box-shadow: -0.2em 1em 0 -0.75em #333; }}
.rabbit::before { content: ''; position: absolute; width: 0.75em; height: 2em; background-color: currentColor; border-radius: 50% 100% 0 0; transform: rotate(-30deg); top: -1em; right: 1em; border: 0.1em solid; border-color: gainsboro transparent transparent gainsboro; box-shadow: -0.5em 0 0 -0.1em; }
.rabbit::after { content: ''; position: absolute; width: 1em; height: 1em; background-color: currentColor; border-radius: 50%; left: -0.3em; top: 0.5em; box-shadow: 0.5em 1em 0, 4em 1em 0 -0.2em, 4em 1em 0 -0.2em; animation: kick 1s infinite linear;}

结果