html5桌面背景,HTML5界面背景色选择器界面模板

CSS

语言：

CSSSCSS

确定

@charset "UTF-8";

* {

font-family: 'Source Sans Pro', sans-serif;

margin: 0;

padding: 0;

}

body {

background: #B7B7B7;

}

h1 {

color: gray;

text-align: center;

}

h2 {

color: #ededed;

text-align: center;

}

span {

color: gray;

text-align: center;

display: block;

margin-top: 20px;

}

.tooltip {

position: absolute;

bottom: 110px;

left: 370px;

font-weight: 600;

}

img {

position: absolute;

bottom: 30px;

left: 200px;

transform: rotate(120deg);

width: 150px;

opacity: .5;

}

.head {

background: #292D43;

font-family: 'Source Sans Pro', sans-serif;

font-weight: 200;

color: #fff;

font-size: 13px;

font-weight: bold;

height: 30px;

position: relative;

width: 190px;

padding: 10px 0px 0px 10px;

}

.head #expandcolors {

position: absolute;

margin-top: -2px;

right: 10px;

background: none;

border: none;

color: white;

opacity: 0.5;

transition: .5s ease-in-out;

cursor: pointer;

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-ms-transform: rotate(45deg);

-o-transform: rotate(45deg);

transform: rotate(45deg);

transition: .5s ease-in-out;

}

.head #expandcolors:focus {

outline: 0;

}

.transform {

-webkit-transform: rotate(0deg) !important;

-moz-transform: rotate(0deg) !important;

-ms-transform: rotate(0deg) !important;

-o-transform: rotate(0deg) !important;

transform: rotate(0deg) !important;

transition: .5s ease-in-out;

}

.wrap {

background: white;

-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);

-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);

box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);

position: fixed;

bottom: 0;

left: 20px;

max-width: 200px;

}

.colors {

background: #31364E;

list-style-type: none;

margin: 0;

max-height: 1000px;

overflow: hidden;

padding: 5px;

transition: max-height .5s ease-in;

}

.colors li {

background: none;

cursor: auto;

display: inline-block;

height: 31px;

margin: 0 -4px 0 0;

padding: 10px 0;

text-align: center;

width: 25%;

}

.colors li:hover .color {

box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45), 0 0 0 2px rgba(205, 205, 205, 0.9);

transform: scale(1.05);

}

.colors li.selected .color {

opacity: .9;

position: relative;

transform: scale(1.25);

}

.colors li.selected .color::after {

color: azure;

content: '✓';

height: 100%;

left: 0;

line-height: 34px;

position: absolute;

text-indent: 0;

width: 100%;

}

.colors .color {

border-radius: 100%;

cursor: pointer;

height: 33px;

margin: 0 auto;

text-indent: -9999px;

-webkit-transition: all 0.5s ease;

transition: all 0.5s ease;

width: 33px;

}