一:为啥有这个想法呢?

马上春节了想在自己的个人博客右上角实现个春节灯笼.

二:具体实现方法

直接上代码
采用thymeleaf模板提取公共部分春节灯笼代码

<div th:fragment="lantern"><!--春节灯笼--><div class="deng-box denglong"><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 class="shui-c"></div><div class="shui-b"></div></div></div></div><div class="deng-box1 denglong"><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 class="shui-c"></div><div class="shui-b"></div></div></div></div></div>

三:公共css代码(创建spring.css)

.deng-box {position: fixed;top: -40px;right: -20px;z-index: 9999;pointer-events: none;
}.deng-box1 {position: fixed;top: -30px;right: 10px;z-index: 9999;pointer-events: none;
}.deng-box1 .deng {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);
}.deng {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);
}.deng-a {width: 100px;height: 90px;background: #d8000f;background: rgba(216, 0, 15, 0.1);margin: 12px 8px 8px 10px;border-radius: 50% 50%;border: 2px solid #dc8f03;
}.deng-b {width: 45px;height: 90px;background: #d8000f;background: rgba(216, 0, 15, 0.1);margin: -2px 8px 8px 26px;border-radius: 50% 50%;border: 2px solid #dc8f03;
}.xian {position: absolute;top: -20px;left: 60px;width: 2px;height: 20px;background: #dc8f03;
}.shui-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;
}.shui-b {position: absolute;top: 14px;left: -2px;width: 10px;height: 10px;background: #dc8f03;border-radius: 50%;
}.shui-c {position: absolute;top: 18px;left: -2px;width: 10px;height: 35px;background: #ffa500;border-radius: 0 0 0 5px;
}.deng: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);
}.deng: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);
}.deng-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 .deng-t,
.night .deng-box,
.night .deng-box1 {background: transparent !important;
}@-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)}
}

四:在需要灯笼的页面上引入提取的公共代码和css代码

<!--春节灯笼-->
<div th:replace="~{common::lantern}"></div>

五:春节灯笼大功告成

六: 鼠标点击出现文字具体实现

代码如下
html定义class

<body class="body">

创建公共js在需要的页面引入js链接

var a_idx = 0;
jQuery(document).ready(function($) {$("body").click(function(e) {var a = new Array("唱", "跳", "Rap", "篮球", "Music", "666");var $i = $("<span />").text(a[a_idx]);a_idx = (a_idx + 1) % a.length;var x = e.pageX,y = e.pageY;$i.css({"z-index": 99999,"top": y - 20,"left": x,"position": "absolute","font-weight": "bold","color": "#ff6651"});$("body").append($i);$i.animate({"top": y - 180,"opacity": 0},1500,function() {$i.remove();});});
});

七:总结:

目标-------
思路-------
代码-------
KeepMoving 2021！

春节灯笼Html代码实现+点击页面出现文字相关推荐

用HTML加css做成的新年特效,使用html和css3给网站添加上春节灯笼挂件代码
春节快到了,为博客添加了2个用HTML和CSS写的灯笼,原代码来自知更鸟(鸟叔) 算是庆祝一下这个喜庆的节日?? 安装方法 1.复制下面的代码添加到主题 --> 设置外观 --> 开发者设 ...
php点击弹出文字代码,js实现鼠标点击页面弹出自定义文字效果
本文实例为大家分享了js鼠标点击页面弹出文字的具体代码,供大家参考,具体内容如下效果: 实现代码: (function(e){ // 点击事件触发生生元素等一系列动作的初始状态 var bombFl ...
2022跨年烟花代码（六）HTML5鼠标点击页面放烟花特效
HTML5鼠标点击页面放烟花特效 html代码 <!DOCTYPE html> <html> <head><meta http-equiv="Con ...
html桌面倒计时代码,超详细！使用HTML、CSS、JavaScript实现倒计时。附加功能——点击页面出现小心心...
写在开头的感谢: 感谢 @Destiny_1853 的灵感和获取时间的代码提供. 感谢 @扰扰的页面点击出现小心心的代码提供. 本次,我们准备写一个有关倒计时的小例子,正好最近在进行前端实训,学习了 ...
2022跨年烟花代码（三）HTML5点击页面烟花绽放特效
HTML5点击页面烟花绽放特效 <!doctype html> <html> <head> <meta charset="utf-8"&g ...
漂亮的网页动态飘花灯笼特效代码
好看的动态飘花灯笼特效代码可直接将代码复制粘贴到各种页面底部使用! 若需要全站可直接将代码复制粘贴到footer.php或footer.html等脚模板底部区域文件使用提示:加显示判断函数,代码必 ...
jquery实现点击页面其他地方隐藏指定元素
代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> < ...
HTML下拉菜单去掉点,jQuery点击页面其他部分隐藏下拉菜单功能
一.开发小要点 web页面中,我们一般不用select.option来实现下拉菜单效果,因为下拉框的样式丑且难以美化,所以我们选择控制ul显示隐藏来实现同样且高大上的效果,但是不能像下拉框那样点击页面 ...
qtreewidget点击空白处时取消以选项_VUE+elementUI 点击页面空白处弹窗不隐藏
点击空白处不隐藏弹窗,点击弹窗里的'x'和取消按钮关闭弹窗. os:人家都是让点击空白处隐藏弹窗,为啥我们的需求有点另类?!木有办法~大佬有需求,小小程序员只能领命... 话说,element的el- ...

春节灯笼Html代码实现+点击页面出现文字

一:为啥有这个想法呢?

二:具体实现方法

三:公共css代码(创建spring.css)

四:在需要灯笼的页面上引入提取的公共代码和css代码

五:春节灯笼大功告成

六: 鼠标点击出现文字具体实现

七:总结:

春节灯笼Html代码实现+点击页面出现文字相关推荐

最新文章

热门文章