css3 万花筒原理,使用CSS3 clip-path实现的三角形万花筒

CSS

语言：

CSSSCSS

确定

body {

background-color: #111;

overflow: hidden;

}

.triangles {

position: absolute;

top: calc(50% - 192px);

left: calc(50% - 192px);

-webkit-transform: rotate(22.5deg);

transform: rotate(22.5deg);

}

.img {

width: 250px;

height: 207px;

position: absolute;

-webkit-clip-path: polygon(100% 50%, 0 0, 0 100%);

clip-path: polygon(100% 50%, 0 0, 0 100%);

background: url(/uploads/161001/lighten3.jpg) right center/200%;

-webkit-transform-origin: 248px center;

transform-origin: 248px center;

-webkit-animation: shift 6s infinite linear;

animation: shift 6s infinite linear;

}

@-webkit-keyframes shift {

to {

background-position: 300% center;

}

}

@keyframes shift {

to {

background-position: 300% center;

}

}

.img--2 {

-webkit-transform: rotate(-45deg) rotateX(180deg);

transform: rotate(-45deg) rotateX(180deg);

}

.img--3 {

-webkit-transform: rotate(-90deg);

transform: rotate(-90deg);

}

.img--4 {

-webkit-transform: rotate(-135deg) rotateX(180deg);

transform: rotate(-135deg) rotateX(180deg);

}

.img--5 {

-webkit-transform: rotate(-180deg);

transform: rotate(-180deg);

}

.img--6 {

-webkit-transform: rotate(-225deg) rotateX(180deg);

transform: rotate(-225deg) rotateX(180deg);

}

.img--7 {

-webkit-transform: rotate(-270deg);

transform: rotate(-270deg);

}

.img--8 {

-webkit-transform: rotate(-315deg) rotateX(180deg);

transform: rotate(-315deg) rotateX(180deg);

}

.link {

display: inline-block;

margin: 10px;

padding: 10px 20px;

font: 14px Roboto, Arial, sans-serif;

text-decoration: none;

color: white;

background: #222;

border-radius: 4px;

opacity: 0;

-webkit-animation: fade-in 0.5s 4s forwards;

animation: fade-in 0.5s 4s forwards;

-webkit-transition: 0.2s;

transition: 0.2s;

}

.link:hover {

background: #444;

}

@-webkit-keyframes fade-in {

to {

opacity: 1;

}

}

@keyframes fade-in {

to {

opacity: 1;

}

}