html中写色块,CSS3 彩虹色块

CSS

语言：

CSSSCSS

确定

html,

body {

min-height: 100%;

}

body {

background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBkMzI1YyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMjI0NSIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');

background-size: 100%;

background-image: -moz-radial-gradient(#0d325c, #002245);

background-image: -webkit-radial-gradient(#0d325c, #002245);

background-image: radial-gradient(#0d325c, #002245);

}

.loveWins {

color: #fff;

font-size: 95px;

line-height: 100px;

margin: -50px 0 0 0;

position: fixed;

text-align: center;

top: 50%;

width: 100%;

z-index: 100;

}

.rainbow {

position: fixed;

height: 50px;

width: 100%;

background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U1MWQzOSIvPjxzdG9wIG9mZnNldD0iMTYuNjY2NjclIiBzdG9wLWNvbG9yPSIjZTUxZDM5Ii8+PHN0b3Agb2Zmc2V0PSIxNi42NjY2NyUiIHN0b3AtY29sb3I9IiNmNThmMjMiLz48c3RvcCBvZmZzZXQ9IjMzLjMzMzMzJSIgc3RvcC1jb2xvcj0iI2Y1OGYyMyIvPjxzdG9wIG9mZnNldD0iMzMuMzMzMzMlIiBzdG9wLWNvbG9yPSIjZjRlYzI1Ii8+PHN0b3Agb2Zmc2V0PSI1MC4wJSIgc3RvcC1jb2xvcj0iI2Y0ZWMyNSIvPjxzdG9wIG9mZnNldD0iNTAuMCUiIHN0b3AtY29sb3I9IiM1N2FkNDgiLz48c3RvcCBvZmZzZXQ9IjY2LjY2NjY3JSIgc3RvcC1jb2xvcj0iIzU3YWQ0OCIvPjxzdG9wIG9mZnNldD0iNjYuNjY2NjclIiBzdG9wLWNvbG9yPSIjMWM2MWFlIi8+PHN0b3Agb2Zmc2V0PSI4My4zMzMzMyUiIHN0b3AtY29sb3I9IiMxYzYxYWUiLz48c3RvcCBvZmZzZXQ9IjgzLjMzMzMzJSIgc3RvcC1jb2xvcj0iIzViNDM5YiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');

background-size: 100%;

background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #e51d39), color-stop(16.66667%, #e51d39), color-stop(16.66667%, #f58f23), color-stop(33.33333%, #f58f23), color-stop(33.33333%, #f4ec25), color-stop(50%, #f4ec25), color-stop(50%, #57ad48), color-stop(66.66667%, #57ad48), color-stop(66.66667%, #1c61ae), color-stop(83.33333%, #1c61ae), color-stop(83.33333%, #5b439b));

background-image: -moz-linear-gradient(left, #e51d39, #e51d39 16.66667%, #f58f23 16.66667%, #f58f23 33.33333%, #f4ec25 33.33333%, #f4ec25 50%, #57ad48 50%, #57ad48 66.66667%, #1c61ae 66.66667%, #1c61ae 83.33333%, #5b439b 83.33333%);

background-image: -webkit-linear-gradient(left, #e51d39, #e51d39 16.66667%, #f58f23 16.66667%, #f58f23 33.33333%, #f4ec25 33.33333%, #f4ec25 50%, #57ad48 50%, #57ad48 66.66667%, #1c61ae 66.66667%, #1c61ae 83.33333%, #5b439b 83.33333%);

background-image: linear-gradient(to right, #e51d39, #e51d39 16.66667%, #f58f23 16.66667%, #f58f23 33.33333%, #f4ec25 33.33333%, #f4ec25 50%, #57ad48 50%, #57ad48 66.66667%, #1c61ae 66.66667%, #1c61ae 83.33333%, #5b439b 83.33333%);

}

.rainbow.bottom {

bottom: 0;

}

.rainbow.top {

top: 0;

}