实现效果- 参考 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>