个人网站主页上挂一个春节主题的灯笼

春节主题网页上挂的红灯笼纯H5+CSS

H5元素 ↓↓↓↓↓↓

<div class="deng-box"><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-box2"><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>

CSS代码↓↓↓↓↓↓

/*CSS*/
/*盒子容器*/
.deng-box{position:fixed;top:-30px;right:0px;z-index:9;}
.deng-box2{position:fixed;top:-30px;left: 0px;z-index:9;}/*灯笼 - 定义外模型、位置、动画基点和动画属性*/
.deng {position: relative;width: 120px;height: 90px;margin: 50px;background: rgba(216, 0, 15, 0.8);border-radius: 50% 50%;-webkit-transform-origin: 50% -100px;-webkit-animation: swing 4.5s infinite ease-in-out;box-shadow:-5px 5px 50px 4px rgb(250 108 0);}
.deng-box2 .deng {position: relative;width: 120px;height: 90px;margin: 50px;background: rgba(216, 0, 15, 0.8);border-radius: 50% 50%;-webkit-transform-origin: 50% -100px;-webkit-animation: swing 4s infinite ease-in-out;box-shadow:-5px 5px 50px 4px rgb(250 108 0);}/*灯笼 - 模型*/
.deng:before{/*上笼口*/position: absolute;top: -7px;left: 29px;height: 12px;width: 60px;content: " ";display: block;z-index: 9;border-radius: 5px 5px 0 0;border: solid 1px #dc8f03;background: #ffa500;background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);}
.xian{position: absolute;top:-20px;left:60px;width:2px;height: 20px;background: #dc8f03;}
.deng-a{width: 100px;height: 90px;margin: 12px 8px 8px 10px;background: rgba(216, 0, 15, 0.1);border-radius: 50% 50%;border: 2px solid #dc8f03;}
.deng-b{width: 45px;height: 90px;background: #d8000f;background: rgba(216, 0, 15, 0.1);margin: -4px 8px 8px 26px;border-radius: 50% 50%;border: 2px solid #dc8f03;}/*灯笼 - 福字*/
.deng-t {width: 2.8rem;height:5.2rem;background:url(fu.png) center no-repeat;}/*灯笼 - 定义穗子模型、位置、动画属性*/
.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-c {position: absolute;top: 18px;left: -2px;width: 10px;height: 35px;background: #ffa500;border-radius: 0 0 0 5px;}
.shui-b {position: absolute;top: 14px;left: -2px;width: 10px;height: 10px;background: #dc8f03;border-radius: 50%;}
.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: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);}/*定义动画*/
@keyframes swing{20% {-webkit-transform: rotate(15deg);transform: rotate(15deg);}40% {-webkit-transform: rotate(-10deg);transform: rotate(-10deg);}60% {-webkit-transform: rotate(5deg);transform: rotate(5deg);}80% {-webkit-transform: rotate(-5deg);transform: rotate(-5deg);}100% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}}

上文中灯笼上的福字：

转载自网络，感谢作者，虽然在茫茫数字世界中没有缘分遇到你，但我们也可以在新春佳节之际向你表达祝福

个人网站主页上挂一个春节主题的灯笼相关推荐

服务器上挂网站怎么挂,网站怎样上挂到云服务器
网站怎样上挂到云服务器内容精选换一换云耀云服务器适用于对CPU.内存.硬盘空间和带宽无特殊要求,服务一般只需要部署在一台或少量的服务器上,一次投入成本少,后期维护成本低的场景.例如网站开发,We ...
Dahua Lin是香港中文大学汤晓鸥教授的高徒，在计算机视觉/机器学习方面有很深的造诣。他在自己的主页上有一个推荐书表，值得大家作为参考。全英文版的，感觉到与国际接轨的压力了！！！
Dahua Lin是香港中文大学汤晓鸥教授的高徒,在计算机视觉/机器学习方面有很深的造诣.他在自己的主页上有一个推荐书表,值得大家作为参考. 全英文版的,感觉到与国际接轨的压力了!!! Recomme ...
网站设计｜10大创意教你设计网站主页
导语:通常情况下,网站主页并不是访客第一个访问的页面,大多数访客先是浏览了某篇文章,点击其中的某个链接,然后才调转到主页上.当用户发生这个动作后,说明你有很大机会将他们转化为邮件/RSS订阅读者,甚至 ...
入室监控—树莓派上挂红外传感器（python）
入室监控概要: 树莓派上挂一个红外传感器,探测是否有人进入有人进入,探测光强光强不够,控制继电器开灯,否则不开灯打开摄像机拍照,并使用ftp把数据发到后台FTP服务器上后台服务器跑web服务器 ...
什么？还能在网站上藏一个老婆？（怎么在给个人博客或者网站添加基于Live2D的动漫模型）
什么?还能在网站上藏一个老婆??? 父老乡亲们第一次访问本菜鸟的网站时,第一眼看到的肯定是我偷偷放在左下角的老婆啦~(/滑稽) 那么问题来了,父老乡亲们如果也想把老婆放上去,该怎么做呢? 首先,就要引 ...
旅游网站的主页代码_一个在优化的网站主页内容应该如何设计？
现在搜索引擎上面的网站只要是互联网行业的网站都是做了优化的只能说是效果好与不好,只要是注重做优化的网站都会非常重视网站主页的设计,那么一个在优化的网站主页内容应该如何设计呢?接下来我们就来了解一下: ...
在知乎上看到一个关于Python资源的很不错的主题，可惜点赞不过400多
看上去,混知乎的技术相关的人还是少. 哪些 Python 库让你相见恨晚? Lingfeng Ai,伯乐在线技术翻译组,欢迎喜欢互联网和英- bulan1989.五德等人赞同 Awesome Pyt ...
我是如何用JSP在网络上架构一个网上招标系统，以推进网站无纸化，过程电子化，管理智能化的发展
声明:部分代码参考与网络,如有侵权请联系博主删除,博主本着学习的态度和大家一起成长. 项目github地址:https://github.com/sunmenglei/sunmengleiwangsh ...
自定义服务器网址,小白新手如何在服务器上搭建一个自己的网站
原标题:小白新手如何在服务器上搭建一个自己的网站大家好,本文将带大家一步步从搭建服务器到建立运行一个网站后续会慢慢更新到渗透测试环境的搭建和对服务器网站渗透的步骤流程. 本文内容适合于新手学习,大牛 ...

个人网站主页上挂一个春节主题的灯笼

春节主题网页上挂的红灯笼纯H5+CSS

个人网站主页上挂一个春节主题的灯笼相关推荐

最新文章

热门文章

个人网站主页上挂一个春节主题的灯笼

春节主题网页上挂的红灯笼 纯H5+CSS

个人网站主页上挂一个春节主题的灯笼相关推荐

最新文章

热门文章

春节主题网页上挂的红灯笼纯H5+CSS