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

ゝ一纸荒年。 2023-01-19 03:07 7阅读 0赞

<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>
    
    <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][http_github.crmeb.net_u_defu]

[http_github.crmeb.net_u_defu]: http://github.crmeb.net/u/defu

发表评论取消回复

表情：

评论列表（有 0 条评论，7人围观）

还没有评论，来说两句吧...

相关阅读

相关 react-tsparticles 生成动态特效背景

1.依赖 { "name": "tsparticles", "version": "1.0.0", "description"

悠悠/ 2024年03月31日 16:33/ 0 赞/ 101 阅读

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

<style> body{ background-color: 00c1ff; -webkit-transition: backgr

ゝ一纸荒年。/ 2023年01月19日 03:07/ 0 赞/ 8 阅读

相关网站背景全屏代码

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

缺乏、安全感/ 2023年01月19日 03:05/ 0 赞/ 24 阅读

相关 153.炫酷粒子背景特效

效果 (源码网盘地址在最后) ![1b6c12310dd9bda1cebf98a3aeb0f77b.gif][] 最近开源了一个 Vue 组件，还不够完善，欢迎大家来一

偏执的太偏执、/ 2023年01月18日 02:29/ 0 赞/ 160 阅读

相关 Query雪花飘落背景特效

[下载地址![icon-default.png?t=L892][icon-default.png_t_L892]/images/20220828/5ae7a8091ab54da

雨点打透心脏的1/2处/ 2022年09月11日 03:29/ 0 赞/ 197 阅读

相关 canvas瀑布动画背景js特效

[下载地址][Link 1]使用canvas绘制的瀑布动画背景特效，可以当做网页背景。 ![1630570303.png][] dd: [Link 1]: https:

深碍√TFBOYSˉ_/ 2022年09月10日 05:10/ 0 赞/ 284 阅读

相关 canvas星空连线背景特效

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>can

女爷i/ 2022年05月27日 06:05/ 0 赞/ 302 阅读

相关动态背景线条，鼠标移动线条汇聚---背景特效

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI3

快来打我*/ 2022年04月13日 14:18/ 0 赞/ 304 阅读

相关固定背景实现的背景滚动特效

日期：2013-5-19 来源：[GBin1.com][] ![固定背景实现的背景滚动特效][title.jpg] [在线演示][Link 1] 分享一个来自co

矫情吗；*/ 2022年02月16日 17:57/ 0 赞/ 269 阅读

相关网站网页通用底部

效果： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

朴灿烈づ我的快乐病毒、/ 2021年12月03日 12:07/ 0 赞/ 331 阅读