html图片多边形怎么写,使用CSS3构建的图像多边形裁剪动画特效

最新推荐文章于 2022-07-18 14:50:14 发布

远方有城

最新推荐文章于 2022-07-18 14:50:14 发布

阅读量216

点赞数

文章标签： html图片多边形怎么写

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% {

}

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% {

}

100% {

}