CSS
语言：
CSSSCSS
确定
html {
background: #333;
}
.polygon {
-webkit-clip-path: polygon(50% 0%, 79.38926% 9.54915%, 97.55283% 34.54915%, 97.55283% 65.45085%, 79.38926% 90.45085%, 50% 100%, 20.61074% 90.45085%, 2.44717% 65.45085%, 2.44717% 34.54915%, 20.61074% 9.54915%);
clip-path: polygon(50% 0%, 79.38926% 9.54915%, 97.55283% 34.54915%, 97.55283% 65.45085%, 79.38926% 90.45085%, 50% 100%, 20.61074% 90.45085%, 2.44717% 65.45085%, 2.44717% 34.54915%, 20.61074% 9.54915%);
-webkit-animation: clip-path-animation 15s linear infinite;
animation: clip-path-animation 15s linear infinite;
width: 300px;
height: 300px;
background: url(/assets/beauty.jpg);
background-size: cover;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
@-webkit-keyframes clip-path-animation {
0% {
-webkit-clip-path: polygon(50% 0%, 79.38926% 9.54915%, 97.55283% 34.54915%, 97.55283% 65.45085%, 79.38926% 90.45085%, 50% 100%, 20.61074% 90.45085%, 2.44717% 65.45085%, 2.44717% 34.54915%, 20.61074% 9.54915%);
clip-path: polygon(50% 0%, 79.38926% 9.54915%, 97.55283% 34.54915%, 97.55283% 65.45085%, 79.38926% 90.45085%, 50% 100%, 20.61074% 90.45085%, 2.44717% 65.45085%, 2.44717% 34.54915%, 20.61074% 9.54915%);
}
100% {
-webkit-clip-path: polygon(79.38926% 9.54915%, 97.55283% 34.54915%, 97.55283% 65.45085%, 79.38926% 90.45085%, 50% 100%, 20.61074% 90.45085%, 2.44717% 65.45085%, 2.44717% 34.54915%, 20.61074% 9.54915%, 50% 0%);
clip-path: polygon(79.38926% 9.54915%, 97.55283% 34.54915%, 97.55283% 65.45085%, 79.38926% 90.45085%, 50% 100%, 20.61074% 90.45085%, 2.44717% 65.45085%, 2.44717% 34.54915%, 20.61074% 9.54915%, 50% 0%);
}
}
@keyframes clip-path-animation {
0% {
-webkit-clip-path: polygon(50% 0%, 79.38926% 9.54915%, 97.55283% 34.54915%, 97.55283% 65.45085%, 79.38926% 90.45085%, 50% 100%, 20.61074% 90.45085%, 2.44717% 65.45085%, 2.44717% 34.54915%, 20.61074% 9.54915%);
clip-path: polygon(50% 0%, 79.38926% 9.54915%, 97.55283% 34.54915%, 97.55283% 65.45085%, 79.38926% 90.45085%, 50% 100%, 20.61074% 90.45085%, 2.44717% 65.45085%, 2.44717% 34.54915%, 20.61074% 9.54915%);
}
100% {
-webkit-clip-path: polygon(79.38926% 9.54915%, 97.55283% 34.54915%, 97.55283% 65.45085%, 79.38926% 90.45085%, 50% 100%, 20.61074% 90.45085%, 2.44717% 65.45085%, 2.44717% 34.54915%, 20.61074% 9.54915%, 50% 0%);
clip-path: polygon(79.38926% 9.54915%, 97.55283% 34.54915%, 97.55283% 65.45085%, 79.38926% 90.45085%, 50% 100%, 20.61074% 90.45085%, 2.44717% 65.45085%, 2.44717% 34.54915%, 20.61074% 9.54915%, 50% 0%);
}
}
