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

新年伊始,虽然春节已经过去,但是气氛却永远停留在了除夕那天.

html代码

html代码部分非常简单，将一个灯笼分成三部分进行设计，最上方的线、中间灯笼部分写上文字以及下方的三条穗。组合在一起就是一个完整的灯笼，我们实现了两个就是将下方的代码再复制一份就可以了。

<!-- 灯笼 1 -->
<div class="deng-box">
    <div class="deng">
        <div class="xian"></div>
        <div class="deng-a">
            <div class="deng-b"><div class="deng-t">春节</div></div>
        </div>
        <div class="shui shui-a"></div>
        <div class="shui shui-b"></div>
        <div class="shui shui-c"></div>
    </div>
</div>

<!-- 灯笼 2 -->
<div class="deng-box1">
    <div class="deng">
        <div class="xian"></div>
        <div class="deng-a">
            <div class="deng-b"><div class="deng-t">快乐</div></div>
        </div>
        <div class="shui shui-a"></div>
        <div class="shui shui-b"></div>
        <div class="shui shui-c"></div>
    </div>
</div>

css部分

最上方的线

    .xian {
    position: absolute;
    top: -20px;
    left: 60px;
    width: 2px;
    height: 20px;
    background: #dc8f03;
}

中间部分

灯笼整体样式,以距离最上方的线以y轴-100px为中心进行左右摇摆.-webkit-animation: swing 5s infinite ease-in-out;,取一个名叫swing的动画序列,动画序列通过@keyframes创建，动画以eae-in-out线性函数以5s为一个周期地循环执行. 为了使中间部分能像灯一样亮起来,可以加一个阴影模拟灯亮:

.deng-box1 .deng {
    position: relative;
    width: 120px;
    height: 90px;
    margin: 50px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.9);
    border-radius: 50% 50%;
    -webkit-transform-origin: 50% -100px;
    -webkit-animation: swing 5s infinite ease-in-out;
    box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
}

@-webkit-keyframes swing {
    0% {
        -webkit-transform: rotate(-10deg)
    }
    50% {
        -webkit-transform: rotate(10deg)
    }
    100% {
        -webkit-transform: rotate(-10deg)
    }
}

下方的穗

下方的穗使用长方形加上 border-radius,同时给三个穗命名为不同的 class,因为摇摆程度不一样,再辅以animation进行摇摆:

.shui-a {
    margin: -10px 0 0 40px;
    -webkit-animation: swing 4s infinite ease-in-out;
    -webkit-transform-origin: 50% -20px;
}
.shui-b {
    margin: -35px 0 0 59px;
    -webkit-animation: swing 4s infinite ease-in-out;
    -webkit-transform-origin: 50% -45px;
}
.shui-c {
    margin: -45px 0 0 77px;
    -webkit-animation: swing 4s infinite ease-in-out;
    -webkit-transform-origin: 50% -25px;
}