css3clip裁剪,CSS3 clip-path 裁剪轮廓线变换动画

CSS

语言：

CSSSCSS

确定

.clip {

height: 100%;

width: 100%;

background: #f57f17;

-webkit-clip-path: polygon(0 0, 40% 40%, 50% 86.60254%, 60% 40%, 100% 0, 50% 20%, 0 0);

clip-path: polygon(0 0, 40% 40%, 50% 86.60254%, 60% 40%, 100% 0, 50% 20%, 0 0);

-webkit-animation: morph 10s linear infinite;

animation: morph 10s linear infinite;

}

@-webkit-keyframes morph {

50% {

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

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

}

}

@keyframes morph {

50% {

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

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

}

}

.outline {

position: absolute;

top: 50%;

left: 50%;

height: 50vmin;

width: 50vmin;

margin: -25vmin;

-webkit-filter: drop-shadow(-1px 1px 0 #1a237e) drop-shadow(1px 1px 0 #1a237e) drop-shadow(0 1px 0 #1a237e) drop-shadow(1px 0 0 #1a237e) drop-shadow(1px -1px 0 #1a237e) drop-shadow(-1px -1px 0 #1a237e) drop-shadow(0 -1px 0 #1a237e) drop-shadow(-1px 0 0 #1a237e);

filter: drop-shadow(-1px 1px 0 #1a237e) drop-shadow(1px 1px 0 #1a237e) drop-shadow(0 1px 0 #1a237e) drop-shadow(1px 0 0 #1a237e) drop-shadow(1px -1px 0 #1a237e) drop-shadow(-1px -1px 0 #1a237e) drop-shadow(0 -1px 0 #1a237e) drop-shadow(-1px 0 0 #1a237e);

}