前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >家园通用网站背景特效代码

家园通用网站背景特效代码

原创
作者头像
PHP开发工程师
修改2021-05-07 10:23:42
1.9K0
修改2021-05-07 10:23:42
举报
文章被收录于专栏:thinkphp+vue
代码语言:javascript
复制
<style>
	body{
		background-color: #00c1ff;
		-webkit-transition: background-color 400ms ease-in-out;
		-ms-transition: background-color 400ms ease-in-out;
		-o-transition: background-color 400ms ease-in-out;
		-moz-transition: background-color 400ms ease-in-out;
		transition: background-color 400ms ease-in-out;
	}
	.containergaofuxi {
		position: fixed;
top: 0;
left: 0;
z-index: -997;
width: 100%;
height: auto;
min-width: 1024px;
min-height: 100%;
	}
	#output {
		opacity: 0.3;
		width: 100%;
		height: 100%;
		-webkit-transition: all 400ms ease-in-out;
		-ms-transition: all 400ms ease-in-out;
		-o-transition: all 400ms ease-in-out;
		-moz-transition: all 400ms ease-in-out;
		transition: all 400ms ease-in-out;
	}
.color {
position: fixed;
top: 16px;
right: -3PX;
margin: 0 auto;
margin-left: -60px;
width: 200pt;
height: 20px;}
	.color li{
		border-radius: 50%;
				float: left;
		margin: 0 5px;
		width: 20px;
		height: 20px;
		background: #ccc;
		box-shadow: 0 0 4px #FFF;
		list-style: none;
		cursor: pointer;
	}
	.color li:nth-child(1){
		background: #00c1ff;
	}
	.color li:nth-child(2){
		background: #49dd84;
	}
	.color li:nth-child(3){
		background: #ff5a3d;
	}
	.color li:nth-child(4){
		background: #ffac3f;
	}
	.color li:nth-child(5){
		background: #2b7cd3;
	}
	.color li:nth-child(6){
		background: #ff8864;
	}
	.color li:nth-child(7){
		background: #45ada8;
	}
	.logo{
		width: 222px;
		height: 70px;
		position: fixed;
		top: 10px;
		left: 50%;
		margin-left: -70px;
		border: solid 0px #BBBBBB;
		-webkit-transition: all 400ms ease-in-out;
		-ms-transition: all 400ms ease-in-out;
		-o-transition: all 400ms ease-in-out;
		-moz-transition: all 400ms ease-in-out;
		transition: all 400ms ease-in-out;
	}
	.logo:hover{
		border: solid 0px #FFF;
		background: rgba(255, 255, 255, 0.2);
	}
	</style>
<script src="http://ftp350469.host533.zhujiwu.cn/js/FSS.js"></script>
<script>
	$(function(){
		FSS("containergaofuxi", "output");
		$(".color li").mouseover(function(event) {
			$("body").css("background-color", $(this).css("background-color"));
		});
	});
	</script>
<!-- dom½á11 ¿é×Ô¶¨òå -->
<div id="containergaofuxi" class="containergaofuxi">
	<div id="output">
	</div>
</div>
<ul class="color">
	<li>
	</li>
	<li>
	</li>
	<li>
	</li>
	<li>
	</li>
	<li>
	</li>
	<li>
	</li>
	<li>
	</li>
</ul>

完整实例:http://github.crmeb.net/u/defu

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档