css3漂亮的渐变图案,CSS3 带渐变图案的圆球

CSS

语言：

CSSSCSS

确定

body {

height: 100vh;

widt: 100vw;

margin: 0;

background: cadetblue;

}

.wrapper {

position: absolute;

top: 50%;

left: 50%;

height: 600px;

width: 600px;

margin: -300px;

border-radius: 50%;

background: rebeccapurple;

overflow: hidden;

}

.inner {

position: absolute;

top: 50%;

left: 50%;

height: 600px;

width: 600px;

margin: -300px;

border-radius: 50%;

background-color: #222;

background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.2));

background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.2));

-webkit-filter: contrast(7);

overflow: hidden;

mix-blend-mode: luminosity;

opacity: 1;

}

.inner:before {

content: '';

z-index: 1;

position: absolute;

top: 0;

right: 0;

border-radius: inherit;

bottom: 0;

left: 0;

background: rgba(255, 255, 255, 0.25);

box-shadow: inset -150px -150px 150px 0 rgba(0, 0, 0, 0.05);

}

.dot {

position: absolute;

top: 50%;

left: 50%;

height: 8px;

width: 8px;

background: none;

border: 8px solid transparent;

border-width: 0 4px 8px;

box-sizing: border-box;

border-bottom-color: #999;

margin: -4px;

-webkit-transform-origin: 50% 50%;

-ms-transform-origin: 50% 50%;

transform-origin: 50% 50%;

-webkit-transition: -webkit-transform 1s;

transition: transform 1s;

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

-webkit-filter: blur(6px);

mix-blend-mode: luminosity;

}

.dot:nth-child(1) {

-webkit-transform: rotate3d(0, 0, 1, 0deg) translate3d(0, 150px, 0) scale3d(39.26991, 37.5, 1);

transform: rotate3d(0, 0, 1, 0deg) translate3d(0, 150px, 0) scale3d(39.26991, 37.5, 1);

}

.dot:nth-child(2) {

-webkit-transform: rotate3d(0, 0, 1, 60deg) translate3d(0, 150px, 0) scale3d(39.26991, 37.5, 1);

transform: rotate3d(0, 0, 1, 60deg) translate3d(0, 150px, 0) scale3d(39.26991, 37.5, 1);

}

.dot:nth-child(3) {

-webkit-transform: rotate3d(0, 0, 1, 120deg) translate3d(0, 150px, 0) scale3d(39.26991, 37.5, 1);

transform: rotate3d(0, 0, 1, 120deg) translate3d(0, 150px, 0) scale3d(39.26991, 37.5, 1);

}

.dot:nth-child(4) {

-webkit-transform: rotate3d(0, 0, 1, 180deg) translate3d(0, 150px, 0) scale3d(39.26991, 37.5, 1);

transform: rotate3d(0, 0, 1, 180deg) translate3d(0, 150px, 0) scale3d(39.26991, 37.5, 1);

}

.dot:nth-child(5) {

-webkit-transform: rotate3d(0, 0, 1, 240deg) translate3d(0, 150px, 0) scale3d(39.26991, 37.5, 1);

transform: rotate3d(0, 0, 1, 240deg) translate3d(0, 150px, 0) scale3d(39.26991, 37.5, 1);

}

.dot:nth-child(6) {

-webkit-transform: rotate3d(0, 0, 1, 300deg) translate3d(0, 150px, 0) scale3d(39.26991, 37.5, 1);

transform: rotate3d(0, 0, 1, 300deg) translate3d(0, 150px, 0) scale3d(39.26991, 37.5, 1);

}