css3 万花筒原理,纯CSS做的万花筒效果

CSS

语言：

CSSSCSS

确定

body {

background-color: #222;

}

.circle {

top: 20px;

width: 300px;

height: 300px;

background-color: #000;

margin: 0 auto;

border-radius: 300px;

position: relative;

overflow: hidden;

border: solid;

border-color: #888;

}

.segment {

width: 250px;

height: 250px;

overflow: hidden;

position: absolute;

margin-left: -100px;

margin-top: -100px;

background-color: #444;

mix-blend-mode: lighten;

}

.pattern {

width: 200%;

height: 200%;

background-size: 100px 100px;

background-image: url("/uploads/160301/grey.jpg");

background-repeat: repeat;

position: relative;

animation: motion 3s linear infinite;

}

.segment:nth-of-type(1) {

transform: rotate(36deg);

transform-origin: 100% 100%;

}

.segment:nth-of-type(2) {

transform: rotate(72deg);

transform-origin: 100% 100%;

}

.segment:nth-of-type(3) {

transform: rotate(108deg);

transform-origin: 100% 100%;

}

.segment:nth-of-type(4) {

transform: rotate(144deg);

transform-origin: 100% 100%;

}

.segment:nth-of-type(5) {

transform: rotate(180deg);

transform-origin: 100% 100%;

}

.segment:nth-of-type(6) {

transform: rotate(216deg);

transform-origin: 100% 100%;

}

.segment:nth-of-type(7) {

transform: rotate(252deg);

transform-origin: 100% 100%;

}

.segment:nth-of-type(8) {

transform: rotate(288deg);

transform-origin: 100% 100%;

}

.segment:nth-of-type(9) {

transform: rotate(324deg);

transform-origin: 100% 100%;

}

.segment:nth-of-type(10) {

transform: rotate(360deg);

transform-origin: 100% 100%;

}

.segment:nth-of-type(11) {

transform: rotate(396deg);

transform-origin: 100% 100%;

}

.segment:nth-of-type(12) {

transform: rotate(432deg);

transform-origin: 100% 100%;

}

.segment:nth-of-type(13) {

transform: rotate(468deg);

transform-origin: 100% 100%;

}

.segment:nth-of-type(14) {

transform: rotate(504deg);

transform-origin: 100% 100%;

}

.segment:nth-of-type(15) {

transform: rotate(540deg);

transform-origin: 100% 100%;

}

.segment:nth-of-type(16) {

transform: rotate(576deg);

transform-origin: 100% 100%;

}

.segment:nth-of-type(17) {

transform: rotate(612deg);

transform-origin: 100% 100%;

}

.segment:nth-of-type(18) {

transform: rotate(648deg);

transform-origin: 100% 100%;

}

.segment:nth-of-type(19) {

transform: rotate(684deg);

transform-origin: 100% 100%;

}

.segment:nth-of-type(20) {

transform: rotate(720deg);

transform-origin: 100% 100%;

}

@keyframes motion {

0% {

margin-top: 0px;

}

100% {

margin-top: -100px;

}

}