元宵节给网站挂个灯笼元宵节给网站挂个灯笼

【元宵节给网站挂个灯笼】元宵节将至，给网站挂个灯笼，也增加点节日气氛。喜欢的朋友们可以自己复制代码调试一下，样式也可以自己修改。
效果图如下：

在网上参考了相关代码，实现方式很简单，首先添加一张背景图片，代码实现过程如下：

body{ background: url("./test.png"); -webkit-background-size: cover; -o-background-size: cover; background-size: cover; }

灯笼是用css样式画出来的，之前以为网上画的灯笼都是图片，原来都是用样式实现的，代码如下：

元宵.lantern-box { position: relative; top: 20px; left：-30px; z-index: 999; }.lantern-box1 { position: fixed; top: 20px; right: 0px; z-index: 999; }.lantern-box1 .lantern { position: relative; width: 120px; height: 90px; margin: 50px; background: #d8000f; background: rgba(216, 0, 15, 0.8); border-radius: 50% 50%; -webkit-transform-origin: 50% -100px; -webkit-animation: swing 5s infinite ease-in-out; box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1); }.lantern { position: relative; width: 120px; height: 90px; margin: 50px; background: #d8000f; background: rgba(216, 0, 15, 0.8); border-radius: 50% 50%; -webkit-transform-origin: 50% -100px; -webkit-animation: swing 3s infinite ease-in-out; box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1); }.lantern-a { width: 100px; height: 90px; background: #d8000f; background: rgba(216, 0, 15, 0.1); margin: 12px 8px 8px 8px; border-radius: 50% 50%; border: 2px solid #dc8f03; }.lantern-b { width: 50px; height: 90px; background: #d8000f; background: rgba(216, 0, 15, 0.1); margin: -4px 8px 8px 26px; border-radius: 50% 50%; border: 2px solid #dc8f03; }.lines { position: absolute; top: -20px; left: 60px; width: 2px; height: 20px; background: #dc8f03; }.spike-a { position: relative; width: 5px; height: 20px; margin: -5px 0 0 59px; -webkit-animation: swing 4s infinite ease-in-out; -webkit-transform-origin: 50% -45px; background: #ffa500; border-radius: 0 0 5px 5px; }.spike-b { position: absolute; top: 14px; left: -2px; width: 10px; height: 10px; background: #dc8f03; border-radius: 50%; }.spike-c { position: absolute; top: 18px; left: -2px; width: 10px; height: 35px; background: #ffa500; border-radius: 0 0 0 5px; }.lantern:before { position: absolute; top: -7px; left: 29px; height: 12px; width: 60px; content: " "; display: block; z-index: 999; border-radius: 5px 5px 0 0; border: solid 1px #dc8f03; background: #ffa500; background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03); }.lantern:after { position: absolute; bottom: -7px; left: 10px; height: 12px; width: 60px; content: " "; display: block; margin-left: 20px; border-radius: 0 0 5px 5px; border: solid 1px #dc8f03; background: #ffa500; background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03); }.lantern-t { font-family: 华文行楷, Arial, Lucida Grande, Tahoma, sans-serif; font-size: 3.2rem; color: #dc8f03; font-weight: bold; line-height: 85px; text-align: center; }.night .lantern-t, .night .lantern-box, .night .lantern-box1 { background: transparent !important; }

动画效果也是用css实现的，代码如下：

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