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%);

}

}

總結

以上是生活随笔為你收集整理的html图片多边形怎么写,使用CSS3构建的图像多边形裁剪动画特效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。