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;
}
}