背景图片
返回首页| 工具箱| 小罗引导页|
如何给网站顶部添加2个灯笼? -  小罗教程网
  • 首页
  • 软件仓库
    • 安卓软件
    • 办公软件
    • 其它软件
  • 文章教程
    • 其它教程
  • 源码学习
  • 休闲福利
    • 免费兼职
    • 美图欣赏
    • 活动合集
  • 视频合辑
    • MV欣赏
    • 教程类视频
  • 更多功能
    • 留言吐槽
    • 文章归档
    • 我的邻居
    • 公告动态
    • 广告合作
    • 关于博主


登录后,享受更多优质服务哦
欢迎回来,可爱的会员!个人中心退出登录
导航菜单
  • 首页
  • 软件仓库
    • 安卓软件
    • 办公软件
    • 其它软件
  • 文章教程
    • 其它教程
  • 源码学习
  • 休闲福利
    • 免费兼职
    • 美图欣赏
    • 活动合集
  • 视频合辑
    • MV欣赏
    • 教程类视频
  • 更多功能
    • 留言吐槽
    • 文章归档
    • 我的邻居
    • 公告动态
    • 广告合作
    • 关于博主

如何给网站顶部添加2个灯笼?

2020/12/9 峰哥  源码学习 51 0

我这里使用的程序是Emlog程序添加的灯笼!

效果图:

如何给网站顶部添加2个灯笼?

顶部代码:

放到"log_list.php"即可

<!--灯笼-->
            <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>

CSS代码:

放到模板公用css文件里面即可,或者用<style>tag加到"header.php"里面也有

/*灯笼*/
.deng-box {
	position: fixed;
	top: -30px;
	left: -10px;
	z-index: 9999;
	pointer-events: none;
}
 
.deng-box1 {
	position: fixed;
	top: -30px;
	right: 5px;
	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)
	}
}

不懂的下方留言评论。

搜一下

 点赞:0  打赏  分享  海报

  • 打赏支付宝扫一扫
  • 打赏微信扫一扫
  • 打赏企鹅扫一扫
作者头像 作者名称 作者性别
峰哥
联系作者 作者主页

热门推荐

1 短信轰炸机测压开源自带接口
2 简洁大气留白风格源码资源站emlog模板
3 【开源】发卡程序/会员/分站/三级分销/对接易/码/免签支付/完美运营
4 抖音无水印解析和小米运动刷步数小程序源码
5 裕网云综合导航网html源码
6 柚子阅读1400+个书源去广告版
< 小罗教学网 >
1、如有部分资源需解压密码,解压密码默认为数字1 https://www.968zy.com/ 加 https://
2、本站所有软件和源码附均上传至第三方网盘,如果遇到网盘不可以下载请选择备用网盘下载,所有软件源码不提供后期服务,遇到使用问题联系原作者或者百度搜索

3、文章大部分为网上收集,如侵犯您的权利,请告知管理员,我们会及时删除.

4、站长QQ:975815541 点击这里给我发消息 官方QQ群暂不开放:尽请期待

5、文章投稿-投诉建议E-mail:975815541@qq.com 链接失效?(点击提交)请说明该链接名称

评论列表

取消回复

    •  
      Login

      峰哥

      站长 主页
      用户中心
      评论管理
      退出登陆
      • 2218文章
      • 9评论
      • 3微语
  • 二零二一年03月
    一二三四五六日
    1234567
    891011121314
    15161718192021
    22232425262728
    293031    
  • 存档

    • 2021年3月(33)
    • 2021年2月(271)
    • 2021年1月(297)
    • 2020年12月(228)
    • 2020年11月(158)
    • 2020年10月(15)
    • 2020年9月(138)
    • 2020年8月(160)
    • 2020年7月(347)
    • 2020年6月(514)
    • 1970年1月(1)
  • 最新评论

    • https://www.968zy.com/content/templates/meta/Api/qqtx.php/?qq=1113099160

      6666

    • https://www.968zy.com/content/templates/meta/Api/qqtx.php/?qq=3405721615

      为何没有内容呢?https://www....

    • https://www.968zy.com/content/templates/meta/Api/qqtx.php/?qq=122222

      刚刚天天嘎嘎嘎嘎哈哈哈哈

    • https://www.968zy.com/content/templates/meta/Api/qqtx.php/?qq=88455555

      我就看看

    • https://www.968zy.com/content/templates/theme/images/tx/11.jpg

      资源还可以,支持一下

    • https://www.968zy.com/content/templates/theme/images/tx/11.jpg

      回复了Eric Jones:Hello, I...

    • https://www.968zy.com/content/templates/meta/Static/images/avatar.jpg

      Hello, my name’s Eri...

    • https://www.968zy.com/content/templates/meta/Api/qqtx.php/?qq=68775665

      怀念

    • https://www.968zy.com/content/templates/theme/images/tx/11.jpg

      看看赞、狂赞、超赞、不得不赞、史上最赞!

  • 搜索

  • 公告

    晓峰博客 - www.968zy.com —————————————————————《晓峰博客》

    天气

  • 网站统计 I 在线人数:4人

    • 本站管理:1位
    • 用户总数:12位
    • 置顶文章:4篇
    • 日志总数:2218篇
    • 微语总数:3条
    • 评论总数:9条
    • 标签总数:19条
    • 页面总数:15页
    • 分类总数:15个
    • 链接总数:22条
    • 运行天数:286天
    • 最后更新:3月5日
  • 用户登陆

    
    
    找回密码

    找回密码

    用户注册

    返回登陆
    Copyright © 2021 小罗教程网 网站地图 sitemap sitemap


    • 首页
    • Q 群
    • 搜索
    • 关于
    • 用户
    • 个人

    大家都在搜

    • 定位
    • 游戏
    • 解红
    • 热舞
    • 音乐
    • 导航
    • 学习
    • 歌曲
    • 默认
    • 跳转
    • 美图
    • 限时
    • 源码
    • 抖音
    • 美化
    • 小说
    • 
    • 