html+css设计两个摆动的大灯笼

实现效果- 参考  okeyl.com

新年马上就要到了，教大家用html+css设计两个大灯笼，喜气洋洋。

html代码：

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

<div class="lantern-box">

            <div class="lantern-line"></div>

            <div class="lantern-body">

                <!-- 灯笼中间的线条 -->

                <div class="lantern-circle">

                    <div class="lantern-rect">

                        <!-- 灯笼中间的文字内容 -->

                        <div class="lantern-text">新年快乐</div>

                    </div>

                </div>

                <!-- 灯笼穗 -->

                <div class="lantern-tassel"></div>

            </div>

        </div>