1. 首页
  2. SEO技术
  3. SEO算法

网站背景添加灯笼特效,祝你春节快乐

mipcms把tag修改成中文的教程方法

mipcms推出也有这么久了,冬镜接触mipcms并开始搭建网站也算快有一年了,对这个cms也算是有一点自己的运用心得,今天就给大家分享分享mipcms中的tag的链接怎么修改成...

原创

明天就除夕夜了,马上也要新年了,冬镜今天送大家一款网站的灯笼特效,看着逼格确实提高了不少,由于冬镜试用PC的时候多一些,移动端就没有去调整样式了,也没考虑用js去控制,毕竟mip不能写自定义js。

网站背景添加灯笼特效,祝你春节快乐

具体效果可以看我博客,这是一款动态的灯笼特效,冬镜我是左右一边一个,小伙伴们也可以一边2个,或者就放在一边也行,主要还是看自己的爱好!

网站添加灯笼特效教程

1、在公共部分添加如下div,建议在模板foot部位

Emlog修改Fly模板背景为鼠年吉祥,新春快乐

还有两三天就要除夕了,在今天冬镜为大家送上一款鼠年吉祥,祝大家新春快乐的网站背景图片,声明本图片是冬镜在其它网站上看到的,拿来只是简单的修改,非原创图! ...

<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-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>
网站背景添加灯笼特效,祝你春节快乐

2、在公共css里面添加如下代码,也可以在页面样式里面(<style></style>)直接添加

.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)
	}
}
网站背景添加灯笼特效,祝你春节快乐

百度劲风算法即将上线,打击网站及智能小程序聚合页面

近期,百度搜索技术团队发现,部分网站及智能小程序通过恶意构造聚合页面内容来获取搜索排名,获得搜索用户关注。为了保障搜索用户的体验、保证搜索结果公平,百度搜索将于近期上线劲风算法,...

原创文章,作者:ajseo,如若转载,请注明出处:https://www.seoajun.net/seojs/seosf/2797.html

在线客服
在线客服

联系我们

13071972829

在线咨询:点击这里给我发消息

邮件:207985384@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code