css球体表面显示文字,CSS3 圆点聚合成粘稠的球体

CSS

语言：

CSSSCSS

确定

.container {

position: absolute;

top: 50%;

left: 50%;

width: 100%;

height: 100%;

transform: translate(-50%, -50%);

background: transparent;

-webkit-filter: contrast(10);

-moz-filter: contrast(10);

-o-filter: contrast(10);

-ms-filter: contrast(10);

filter: contrast(10);

background: #000;

}

.dot {

position: absolute;

top: 50%;

left: 50%;

margin-top: -12px;

margin-left: -12px;

}

.dot:nth-child(1) {

transform: translate(12px) rotate(135deg);

}

.dot:nth-child(1) span {

background-color: #f0d175;

-webkit-filter: blur(6px);

-moz-filter: blur(15px);

-o-filter: blur(15px);

-ms-filter: blur(15px);

filter: blur(2px);

}

.dot:nth-child(2) {

transform: translate(12px) rotate(180deg);

}

.dot:nth-child(2) span {

background-color: #b3f075;

-webkit-filter: blur(6px);

-moz-filter: blur(15px);

-o-filter: blur(15px);

-ms-filter: blur(15px);

filter: blur(2px);

}

.dot:nth-child(3) {

transform: translate(12px) rotate(225deg);

}

.dot:nth-child(3) span {

background-color: #75f094;

-webkit-filter: blur(6px);

-moz-filter: blur(15px);

-o-filter: blur(15px);

-ms-filter: blur(15px);

filter: blur(2px);

}

.dot:nth-child(4) {

transform: translate(12px) rotate(270deg);

}

.dot:nth-child(4) span {

background-color: #75f0f0;

-webkit-filter: blur(6px);

-moz-filter: blur(15px);

-o-filter: blur(15px);

-ms-filter: blur(15px);

filter: blur(2px);

}

.dot:nth-child(5) {

transform: translate(12px) rotate(315deg);

}

.dot:nth-child(5) span {

background-color: #7594f0;

-webkit-filter: blur(6px);

-moz-filter: blur(15px);

-o-filter: blur(15px);

-ms-filter: blur(15px);

filter: blur(2px);

}

.dot:nth-child(6) {

transform: translate(12px) rotate(360deg);

}

.dot:nth-child(6) span {

background-color: #b275f0;

-webkit-filter: blur(6px);

-moz-filter: blur(15px);

-o-filter: blur(15px);

-ms-filter: blur(15px);

filter: blur(2px);

}

.dot:nth-child(7) {

transform: translate(12px) rotate(405deg);

}

.dot:nth-child(7) span {

background-color: #f075d1;

-webkit-filter: blur(6px);

-moz-filter: blur(15px);

-o-filter: blur(15px);

-ms-filter: blur(15px);

filter: blur(2px);

}

.dot:nth-child(8) {

transform: translate(12px) rotate(450deg);

}

.dot:nth-child(8) span {

background-color: #f07575;

-webkit-filter: blur(6px);

-moz-filter: blur(15px);

-o-filter: blur(15px);

-ms-filter: blur(15px);

filter: blur(2px);

}

.dot span {

position: absolute;

width: 24px;

height: 24px;

border-radius: 50%;

animation: 2s pop 0s ease-in-out infinite;

}

body,

html {

width: 100%;

height: 100%;

margin: 0;

padding: 0;

background: linear-gradient(135deg, #136a8a 10%, #267871 90%);

}

@keyframes rotate {

0% {

transform: rotate(0);

}

100% {

transform: rotate(360deg);

}

}

@keyframes pop {

0% {

transform: translateX(0);

}

50% {

transform: translateX(75px);

}

100% {

transform: translateX(0);

}

}