java 辐射渐变,CSS3 各种辐射状渐变效果

CSS

语言：

CSSSCSS

确定

*, *:before, *:after {

box-sizing: border-box; }

#frame {

width: 100vw;

display: flex;

flex-flow: column; }

#frame .pattern {

width: 100vw;

height: 100vh;

background-attachment: fixed !important;

background-position: center !important;

background-size: 10vw 10vw !important; }

#frame .pattern:nth-child(1) {

background: #39a4ab repeating-radial-gradient(#40b7bf 0%, #40b7bf 50%, transparent 50%, transparent 75%, #40b7bf 75%, #40b7bf 90%, transparent 90%, transparent 100%); }

#frame .pattern:nth-child(2) {

background: #39a4ab repeating-radial-gradient(#40b7bf 0%, #40b7bf 25%, #3cadb5 25%, #3cadb5 50%, #40b7bf 50%, #40b7bf 75%, transparent 75%, transparent 100%); }

#frame .pattern:nth-child(3) {

background: #3cadb5 repeating-radial-gradient(#40b7bf 0%, #40b7bf 10%, #2c8085 10%, #2c8085 20%, #40b7bf 20%, #40b7bf 30%, #339298 30%, #339298 40%, #40b7bf 40%, #40b7bf 50%, #39a4ab 50%, #39a4ab 60%, #40b7bf 60%, #40b7bf 70%, transparent 70%, transparent 80%); }

#frame .pattern:nth-child(4) {

background: #369ba2 repeating-radial-gradient(#40b7bf 0%, #40b7bf 25%, transparent 25%, transparent 35%, #40b7bf 35%, #40b7bf 45%, transparent 45%, transparent 75%, #40b7bf 75%, #40b7bf 80%, transparent 80%, transparent 100%); }

#frame .pattern:nth-child(5) {

background: #39a4ab repeating-radial-gradient(#40b7bf 0%, #40b7bf 10%, transparent 10%, transparent 20%, #40b7bf 20%, #40b7bf 30%, transparent 30%, transparent 40%, #40b7bf 40%, #40b7bf 50%, transparent 50%, transparent 100%); }

#frame .pattern:nth-child(6) {

background: #3cadb5 repeating-radial-gradient(#40b7bf 0%, #40b7bf 5%, #2c8085 5%, #2c8085 10%, #40b7bf 10%, #40b7bf 15%, transparent 15%, transparent 20%, #40b7bf 20%, #40b7bf 25%, #339298 25%, #339298 30%, #40b7bf 30%, #40b7bf 35%, transparent 35%, transparent 40%, #40b7bf 40%, #40b7bf 45%, #39a4ab 45%, #39a4ab 50%, #40b7bf 50%, #40b7bf 60%, transparent 60%, transparent 70%, #40b7bf 70%, #40b7bf 80%, transparent 80%, transparent 100%); }