给网站加上“新年快乐”灯笼源码
2024-04-12 01:46:13
1、效果预览
实际效果也可以来我的网站观看：网站地址：https://www.ewbang.com
2、程序源码
<template><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><div class="deng-box3"><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"><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-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>
</template>
<style type="text/css">
.deng-box {position: fixed;top: -40px;right: 150px;z-index: 9999;pointer-events: none;
}
.deng-box1 {position: fixed;top: -30px;right: 10px;z-index: 9999;pointer-events: none;
}
.deng-box2 {position: fixed;top: -40px;left: 150px;z-index: 9999;pointer-events: none;
}
.deng-box3 {position: fixed;top: -30px;left: 10px;z-index: 9999;pointer-events: none;
}
.deng-box1 .deng,
.deng-box3 .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 #fc903d;
}
.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 #fa6c00;
}
.deng-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;
}
.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;
}
.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: orange;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: orange;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: orange;background: linear-gradient(to right,#dc8f03,orange,#dc8f03,orange,#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: orange;background: linear-gradient(to right,#dc8f03,orange,#dc8f03,orange,#dc8f03);
}
.deng-t {font-family: 黑体, Arial, Lucida Grande, Tahoma, sans-serif;font-size: 3.2rem;color: #dc8f03;font-weight: 700;line-height: 85px;text-align: center;
}
.night .deng-box,
.night .deng-box1,
.night .deng-t {background: 0 0 !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);}
}
</style>
给网站加上“新年快乐”灯笼源码相关推荐
- php写网页6,基于ThinkPHP6+AdminLTE框架开发的响应式企业网站CMS系统PHP源码，ThinkPHP6开发的后台权限管理系统...
源码介绍 基于最新ThinkPHP6+AdminLTE框架开发的响应式企业网站CMS系统PHP源码,基于最新版本的ThinkPHP 6.0.0RC3框架,后台前端框架采用AdminLTE.系统的核心理 ...
- 通用权限管理系统组件 中集成多个子系统的单点登录(网站入口方式)附源码
通用权限管理系统组件 (GPM - General Permissions Manager) 中集成多个子系统的单点登录(网站入口方式)附源码 上文中实现了直接连接数据库的方式,通过配置文件,自定义的 ...
- 获取Favicon.ico网站图标接口api源码
介绍: 获取Favicon.ico网站图标接口 favicon.ico一般用于作为缩略的网站标志,它显示位于浏览器的地址栏或者在标签上用于显示网站的logo, 目前主要的浏览器都支持favicon.i ...
- PHP内核通用网站后台权限管理系统源码
简介: ThinkPHP6内核通用网站后台权限管理系统源码 基于ThinkPHP6框架开发的通用后台权限管理系统,底层采用国内最流行的ThinkPHP6框架,支持内容管理.文章管理.用户管理.权限管理 ...
- Ztmao主题猫wordpress主题经典失传版/WP网站模板下载站源码+全局SEO功能设定
Ztmao主题猫wordpress主题经典失传版/WP网站模板下载站源码+全局SEO功能设定,主题猫主要提供 wordpress 网站模板.wordpress 博客主题-wordpress 企业主题下 ...
- 计算机毕业设计ssm基于SSM的美妆分享网站vf952系统+程序+源码+lw+远程部署
计算机毕业设计ssm基于SSM的美妆分享网站vf952系统+程序+源码+lw+远程部署 计算机毕业设计ssm基于SSM的美妆分享网站vf952系统+程序+源码+lw+远程部署 本源码技术栈: 项目架构 ...
- C#毕设asp.net江山旅游网站管理系统（论文+源码）
1 项目简介 Hi,各位同学好呀,这里是卡莫! 今天向大家分享一个今年(2022)最新完成的毕业设计项目作品,[C#毕设asp.net江山旅游网站管理系统(论文+源码)] 学姐根据实现的难度和等级对项 ...
- [整站源码]thinkphp家纺针织床上用品类网站模板+前后端源码
模板介绍: 本模板自带eyoucms内核,无需再下载eyou系统,原创设计.手工书写DIV+CSS,完美兼容IE7+.Firefox.Chrome.360浏览器等:主流浏览器:结构容易优化:多终端均可 ...
- java计算机毕业设计爱心公益网站设计与制作源码+数据库+系统+lw文档+部署
java计算机毕业设计爱心公益网站设计与制作源码+数据库+系统+lw文档+部署 java计算机毕业设计爱心公益网站设计与制作源码+数据库+系统+lw文档+部署 本源码技术栈: 项目架构:B/S架构 开 ...
最新文章
- 全网唯一秃头数据集：20 万张人像，网罗各类秃头
- 当程序出Bug时，程序员最喜欢说的30句话
- 查看自己生日是否在pi中
- 面试官：Spring事务的传播行为有几种？
- java中实现十六进制和十进制之间的转换
- 七十五、Python | Leetcode哈希表系列
- java.util.Random 实现原理
- [vue] 如果现在让你从vue/react/angularjs三个中选择一个，你会选哪个？说说你的理由
- python3下使用requests实现模拟用户登录 —— 基础篇（马蜂窝）
- linux7 samba,Centos 7使用Samba实现文件共享
- win 8 学习笔记一：生存周期
- 太火！这本 AI 图书微软强推，程序员靠它拿下 50K！
- 图像处理 抗锯齿放大_什么是抗锯齿，它如何影响我的照片和图像？
- [转]IE Javascript 脚本失效解决办法
- linux 基础环境安装教程,Linux安装及初始环境设置基础教程
- 微信公众号支付（二）
- Unity矩阵乘法的区别
- 2、bq Evaluation Software电流监测工具使用说明
- 长生生物事件的反思：质量是生命
- 《中级数据库系统工程师》