css代码片段1:
html{min-height:100%;background:-webkit-gradient(radial, 10% 8%, 0, 10% 8%, 50, from(rgba(155, 102, 253, .09)), color-stop(90%, rgba(155, 102, 253, .2)), to(transparent)) ,-webkit-gradient(radial, 5% 20%, 0, 5% 20%, 37, from(rgba(82, 254, 183, .09)), color-stop(90%, rgba(82, 254, 183, .2)), to(transparent)) ,-webkit-gradient(radial, 0% 29%, 0, 0% 29%, 93, from(rgba(215, 77, 29, .09)), color-stop(90%, rgba(215, 77, 29, .2)), to(transparent)) ,-webkit-gradient(radial, 13% 17%, 0, 13% 17%, 109, from(rgba(84, 121, 221, .09)), color-stop(90%, rgba(84, 121, 221, .2)), to(transparent)) ,-webkit-gradient(radial, 13% 35%, 0, 13% 35%, 70, from(rgba(223, 4, 78, .09)), color-stop(90%, rgba(223, 4, 78, .2)), to(transparent)) ,-webkit-gradient(radial, 14% 42%, 0, 14% 42%, 123, from(rgba(165, 133, 151, .09)), color-stop(90%, rgba(165, 133, 151, .2)), to(transparent)) ,-webkit-gradient(radial, 16% 53%, 0, 16% 53%, 70.5, from(rgba(92, 20, 142, .09)), color-stop(90%, rgba(92, 20, 142, .2)), to(transparent)) ,-webkit-gradient(radial, 2% 50%, 0, 2% 50%, 63, from(rgba(165, 133, 151, .09)), color-stop(90%, rgba(1, 117, 221, .2)), to(transparent)) ,-webkit-gradient(radial, 6% 62%, 0, 6% 62%, 63, from(rgba(8, 161, 95, .09)), color-stop(90%, rgba(8, 161, 95, .2)), to(transparent)) ,-webkit-gradient(radial, 9% 70%, 0, 9% 70%, 63, from(rgba(165, 133, 151, .09)), color-stop(90%, rgba(165, 133, 151, .2)), to(transparent)) ,-webkit-gradient(radial, 6% 75%, 0, 6% 75%, 73, from(rgba(223, 149, 76, .09)), color-stop(90%, rgba(223, 149, 76, .2)), to(transparent)) ,-webkit-gradient(radial, 5% 92%, 0, 5% 92%, 63, from(rgba(165, 133, 151, .09)), color-stop(90%, rgba(24, 98, 115, .2)), to(transparent)) ,-webkit-gradient(radial, 9% 97%, 0, 9% 97%, 54, from(rgba(218, 117, 44, .09)), color-stop(90%, rgba(218, 117, 44, .2)), to(transparent)) ,-webkit-gradient(radial, 98% 7%, 0, 98% 7%, 63, from(rgba(63, 129, 245, .09)), color-stop(90%, rgba(63, 129, 245, .2)), to(transparent)) ,-webkit-gradient(radial, 95% 17%, 0, 95% 17%, 93, from(rgba(223, 4, 78, .09)), color-stop(90%, rgba(223, 4, 78, .2)), to(transparent)) ,-webkit-gradient(radial, 85% 29%, 0, 85% 26%, 129, from(rgba(116, 197, 202, .09)), color-stop(90%, rgba(116, 197, 202, .2)), to(transparent)) ,-webkit-gradient(radial, 96% 28%, 0, 96% 28%, 63, from(rgba(223, 101, 39, .09)), color-stop(90%, rgba(223, 101, 39, .2)), to(transparent)) ,-webkit-gradient(radial, 90% 35%, 0, 90% 35%, 63, from(rgba(79, 6, 106, .09)), color-stop(90%, rgba(79, 6, 106, .2)), to(transparent)) ,-webkit-gradient(radial, 96% 46%, 0, 96% 46%, 80, from(rgba(255, 40, 110, .09)), color-stop(90%, rgba(255, 40, 110, .2)), to(transparent)) ,-webkit-gradient(radial, 90% 52%, 0, 90% 52%, 63, from(rgba(9, 233, 23, .09)), color-stop(90%, rgba(9, 233, 23, .2)), to(transparent)) ,-webkit-gradient(radial, 96% 53%, 0, 96% 53%, 80, from(rgba(123, 201, 221, .09)), color-stop(90%, rgba(123, 201, 221, .2)), to(transparent)) ,-webkit-gradient(radial, 96% 69%, 0, 96% 69%, 70.5, from(rgba(19, 225, 148, .09)), color-stop(90%, rgba(19, 225, 148, .2)), to(transparent)) ,-webkit-gradient(radial, 93% 79%, 0, 93% 79%, 43, from(rgba(174, 187, 203, .09)), color-stop(90%, rgba(174, 187, 203, .2)), to(transparent)) ,-webkit-gradient(radial, 92% 93%, 0, 92% 90%, 143, from(rgba(183, 44, 116, .09)), color-stop(90%, rgba(183, 44, 116, .2)), to(transparent)) ,-webkit-gradient(radial, 50% 5%, 0, 50% 5%, 80, from(rgba(67, 132, 155, .09)), color-stop(90%, rgba(67, 132, 155, .2)), to(transparent)) ,-webkit-gradient(radial, 50% 97%, 0, 50% 97%, 133, from(rgba(197, 184, 244, .09)), color-stop(90%, rgba(197, 184, 244, .2)), to(transparent)) ,-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 0, from(transparent), to(rgba(226, 226, 226, .97)), color-stop(90%, transparent));} #wrapper{background:-webkit-gradient(linear, 0 0, 0 0, from(transparent), to(transparent));}
css代码片段2:
html:hover{background:-webkit-gradient(radial, 10% 8%, 0, 10% 8%, 50, from(rgba(155, 102, 253, .09)), color-stop(90%, rgba(155, 102, 253, .05)), to(transparent)) ,-webkit-gradient(radial, 5% 20%, 0, 5% 20%, 37, from(rgba(82, 254, 183, .09)), color-stop(90%, rgba(82, 254, 183, .05)), to(transparent)) ,-webkit-gradient(radial, 0% 29%, 0, 0% 29%, 93, from(rgba(215, 77, 29, .09)), color-stop(90%, rgba(215, 77, 29, .05)), to(transparent)) ,-webkit-gradient(radial, 13% 17%, 0, 13% 17%, 109, from(rgba(84, 121, 221, .09)), color-stop(90%, rgba(84, 121, 221, .05)), to(transparent)) ,-webkit-gradient(radial, 13% 35%, 0, 13% 35%, 70, from(rgba(223, 4, 78, .09)), color-stop(90%, rgba(223, 4, 78, .05)), to(transparent)) ,-webkit-gradient(radial, 14% 42%, 0, 14% 42%, 123, from(rgba(165, 133, 151, .09)), color-stop(90%, rgba(165, 133, 151, .05)), to(transparent)) ,-webkit-gradient(radial, 16% 53%, 0, 16% 53%, 70.5, from(rgba(92, 20, 142, .09)), color-stop(90%, rgba(92, 20, 142, .05)), to(transparent)) ,-webkit-gradient(radial, 2% 50%, 0, 2% 50%, 63, from(rgba(165, 133, 151, .09)), color-stop(90%, rgba(1, 117, 221, .05)), to(transparent)) ,-webkit-gradient(radial, 6% 62%, 0, 6% 62%, 63, from(rgba(8, 161, 95, .09)), color-stop(90%, rgba(8, 161, 95, .05)), to(transparent)) ,-webkit-gradient(radial, 9% 70%, 0, 9% 70%, 63, from(rgba(165, 133, 151, .09)), color-stop(90%, rgba(165, 133, 151, .05)), to(transparent)) ,-webkit-gradient(radial, 6% 75%, 0, 6% 75%, 73, from(rgba(223, 149, 76, .09)), color-stop(90%, rgba(223, 149, 76, .05)), to(transparent)) ,-webkit-gradient(radial, 5% 92%, 0, 5% 92%, 63, from(rgba(165, 133, 151, .09)), color-stop(90%, rgba(24, 98, 115, .05)), to(transparent)) ,-webkit-gradient(radial, 9% 97%, 0, 9% 97%, 54, from(rgba(218, 117, 44, .09)), color-stop(90%, rgba(218, 117, 44, .05)), to(transparent)) ,-webkit-gradient(radial, 98% 7%, 0, 98% 7%, 63, from(rgba(63, 129, 245, .09)), color-stop(90%, rgba(63, 129, 245, .05)), to(transparent)) ,-webkit-gradient(radial, 95% 17%, 0, 95% 17%, 93, from(rgba(223, 4, 78, .09)), color-stop(90%, rgba(223, 4, 78, .05)), to(transparent)) ,-webkit-gradient(radial, 85% 29%, 0, 85% 26%, 129, from(rgba(116, 197, 202, .09)), color-stop(90%, rgba(116, 197, 202, .05)), to(transparent)) ,-webkit-gradient(radial, 96% 28%, 0, 96% 28%, 63, from(rgba(223, 101, 39, .09)), color-stop(90%, rgba(223, 101, 39, .05)), to(transparent)) ,-webkit-gradient(radial, 90% 35%, 0, 90% 35%, 63, from(rgba(79, 6, 106, .09)), color-stop(90%, rgba(79, 6, 106, .05)), to(transparent)) ,-webkit-gradient(radial, 96% 46%, 0, 96% 46%, 80, from(rgba(255, 40, 110, .09)), color-stop(90%, rgba(255, 40, 110, .05)), to(transparent)) ,-webkit-gradient(radial, 90% 52%, 0, 90% 52%, 63, from(rgba(9, 233, 23, .09)), color-stop(90%, rgba(9, 233, 23, .05)), to(transparent)) ,-webkit-gradient(radial, 96% 53%, 0, 96% 53%, 80, from(rgba(123, 201, 221, .09)), color-stop(90%, rgba(123, 201, 221, .05)), to(transparent)) ,-webkit-gradient(radial, 96% 69%, 0, 96% 69%, 70.5, from(rgba(19, 225, 148, .09)), color-stop(90%, rgba(19, 225, 148, .05)), to(transparent)) ,-webkit-gradient(radial, 93% 79%, 0, 93% 79%, 43, from(rgba(174, 187, 203, .09)), color-stop(90%, rgba(174, 187, 203, .05)), to(transparent)) ,-webkit-gradient(radial, 92% 93%, 0, 92% 90%, 143, from(rgba(183, 44, 116, .09)), color-stop(90%, rgba(183, 44, 116, .05)), to(transparent)) ,-webkit-gradient(radial, 50% 5%, 0, 50% 5%, 80, from(rgba(67, 132, 155, .09)), color-stop(90%, rgba(67, 132, 155, .05)), to(transparent)) ,-webkit-gradient(radial, 50% 97%, 0, 50% 97%, 133, from(rgba(197, 184, 244, .09)), color-stop(90%, rgba(197, 184, 244, .05)), to(transparent)) ,-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 0, from(transparent), to(rgba(226, 226, 226, .97)), color-stop(90%, transparent));}
css代码片段3:
html{min-height:100%;background:-webkit-gradient(radial, 10% 8%, 0, 10% 8%, 50, from(rgba(155, 102, 253, .09)), color-stop(90%, rgba(155, 102, 253, .05)), to(transparent)) ,-webkit-gradient(radial, 5% 20%, 0, 5% 20%, 37, from(rgba(82, 254, 183, .09)), color-stop(90%, rgba(82, 254, 183, .05)), to(transparent)) ,-webkit-gradient(radial, 0% 29%, 0, 0% 29%, 93, from(rgba(215, 77, 29, .09)), color-stop(90%, rgba(215, 77, 29, .05)), to(transparent)) ,-webkit-gradient(radial, 13% 17%, 0, 13% 17%, 109, from(rgba(84, 121, 221, .09)), color-stop(90%, rgba(84, 121, 221, .05)), to(transparent)) ,-webkit-gradient(radial, 13% 35%, 0, 13% 35%, 70, from(rgba(223, 4, 78, .09)), color-stop(90%, rgba(223, 4, 78, .05)), to(transparent)) ,-webkit-gradient(radial, 14% 42%, 0, 14% 42%, 123, from(rgba(165, 133, 151, .09)), color-stop(90%, rgba(165, 133, 151, .05)), to(transparent)) ,-webkit-gradient(radial, 16% 53%, 0, 16% 53%, 70.5, from(rgba(92, 20, 142, .09)), color-stop(90%, rgba(92, 20, 142, .05)), to(transparent)) ,-webkit-gradient(radial, 2% 50%, 0, 2% 50%, 63, from(rgba(165, 133, 151, .09)), color-stop(90%, rgba(1, 117, 221, .05)), to(transparent)) ,-webkit-gradient(radial, 6% 62%, 0, 6% 62%, 63, from(rgba(8, 161, 95, .09)), color-stop(90%, rgba(8, 161, 95, .05)), to(transparent)) ,-webkit-gradient(radial, 9% 70%, 0, 9% 70%, 63, from(rgba(165, 133, 151, .09)), color-stop(90%, rgba(165, 133, 151, .05)), to(transparent)) ,-webkit-gradient(radial, 6% 75%, 0, 6% 75%, 73, from(rgba(223, 149, 76, .09)), color-stop(90%, rgba(223, 149, 76, .05)), to(transparent)) ,-webkit-gradient(radial, 5% 92%, 0, 5% 92%, 63, from(rgba(165, 133, 151, .09)), color-stop(90%, rgba(24, 98, 115, .05)), to(transparent)) ,-webkit-gradient(radial, 9% 97%, 0, 9% 97%, 54, from(rgba(218, 117, 44, .09)), color-stop(90%, rgba(218, 117, 44, .05)), to(transparent)) ,-webkit-gradient(radial, 98% 7%, 0, 98% 7%, 63, from(rgba(63, 129, 245, .09)), color-stop(90%, rgba(63, 129, 245, .05)), to(transparent)) ,-webkit-gradient(radial, 95% 17%, 0, 95% 17%, 93, from(rgba(223, 4, 78, .09)), color-stop(90%, rgba(223, 4, 78, .05)), to(transparent)) ,-webkit-gradient(radial, 85% 29%, 0, 85% 26%, 129, from(rgba(116, 197, 202, .09)), color-stop(90%, rgba(116, 197, 202, .05)), to(transparent)) ,-webkit-gradient(radial, 96% 28%, 0, 96% 28%, 63, from(rgba(223, 101, 39, .09)), color-stop(90%, rgba(223, 101, 39, .05)), to(transparent)) ,-webkit-gradient(radial, 90% 35%, 0, 90% 35%, 63, from(rgba(79, 6, 106, .09)), color-stop(90%, rgba(79, 6, 106, .05)), to(transparent)) ,-webkit-gradient(radial, 96% 46%, 0, 96% 46%, 80, from(rgba(255, 40, 110, .09)), color-stop(90%, rgba(255, 40, 110, .05)), to(transparent)) ,-webkit-gradient(radial, 90% 52%, 0, 90% 52%, 63, from(rgba(9, 233, 23, .09)), color-stop(90%, rgba(9, 233, 23, .05)), to(transparent)) ,-webkit-gradient(radial, 96% 53%, 0, 96% 53%, 80, from(rgba(123, 201, 221, .09)), color-stop(90%, rgba(123, 201, 221, .05)), to(transparent)) ,-webkit-gradient(radial, 96% 69%, 0, 96% 69%, 70.5, from(rgba(19, 225, 148, .09)), color-stop(90%, rgba(19, 225, 148, .05)), to(transparent)) ,-webkit-gradient(radial, 93% 79%, 0, 93% 79%, 43, from(rgba(174, 187, 203, .09)), color-stop(90%, rgba(174, 187, 203, .05)), to(transparent)) ,-webkit-gradient(radial, 92% 93%, 0, 92% 90%, 143, from(rgba(183, 44, 116, .09)), color-stop(90%, rgba(183, 44, 116, .05)), to(transparent)) ,-webkit-gradient(radial, 50% 5%, 0, 50% 5%, 80, from(rgba(67, 132, 155, .09)), color-stop(90%, rgba(67, 132, 155, .05)), to(transparent)) ,-webkit-gradient(radial, 50% 97%, 0, 50% 97%, 133, from(rgba(197, 184, 244, .09)), color-stop(90%, rgba(197, 184, 244, .05)), to(transparent)) ,-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 0, from(transparent), to(rgba(226, 226, 226, .97)), color-stop(90%, transparent));} #wrapper{background:-webkit-gradient(linear, 0 0, 0 0, from(transparent), to(transparent));}
使用说明(下面三种效果任选其一):
效果1:编辑K Blue风格文件夹的g.css,在最下面加入 css片段1+css片段2。默认背景是比较亮的圆组成,鼠标移动到页面上,背景里的圆颜色变浅(既是本页效果)。
效果2:复制css片段1,在g.css的最下面加入。效果:背景圆一直都是深色的,鼠标移动到页面无变化。
效果3:复制ss片段3,在g.css的最下面加入。效果:背景圆一直都是浅色的,鼠标移动到页面无变化。
K Blue G1是K Blue的一个小分支,想使用G1风格只需按照上面的步骤修改css文件即可。
Ps:K Blue、K Blue G1、K Blue G2的区别:
K Blue :基础简洁版,背景色是灰色的过度,背景无彩色圆。
K Blue G1 : 跟"K Blue"类似,背景色加上了26个彩色的圆。
K Blue G2 : 暗色调,背景色是黑色加上了26个彩色的圆。