css3 clip-path

来源：互联网发布：金蝶软件标准版破解编辑：程序博客网时间：2024/05/21 06:54
section{position:absolute;width:800px;height:400px;border:1px solid grey;}.x{position: absolute;top:0;right:0;bottom:0;left:0;background:#f4a034;-webkit-transition: all .3s; transition: all .3s;}section:hover .x{-webkit-animation: x 10s ease-in infinite alternate;animation: x 10s ease-in infinite alternate;}@-webkit-keyframes x {  0%, 10% {    -webkit-clip-path: polygon(49% 99%,51% 99%,51% 100%,49% 100%,49% 100%,49% 100%,49% 100%,49% 100%,49% 100%,49% 100%);            }  10%, 15% {    -webkit-clip-path: polygon(60% 60%,70% 60%,75% 45%,50% 40%,60% 80%,69% 79%,68% 48%,56% 56%,67% 87%,45% 67%);      }  15%, 25% {    -webkit-clip-path: polygon(60% 60%,70% 60%,75% 45%,35% 40%,60% 80%,69% 79%,47% 48%,56% 56%,67% 87%,60% 67%);      }  25%, 35% {    -webkit-clip-path: polygon(60% 30%,70% 60%,45% 45%,35% 60%,60% 80%,69% 39%,47% 48%,56% 56%,67% 87%,60% 67%);      }  35%, 45% {    -webkit-clip-path: polygon(70% 30%,100% 60%,45% 45%,35% 60%,60% 40%,69% 39%,47% 48%,56% 56%,67% 87%,60% 67%);      }  45%, 60% {    -webkit-clip-path: polygon(75% 25%,100% 45%,75% 40%,79% 45%,70% 40%,75% 39%,47% 40%,35% 45%,37% 30%,47% 40%);      }  60%, 80% {    -webkit-clip-path: polygon(80% 23%,100% 40%,80% 35%,83% 40%,90% 40%,75% 39%,44% 35%,33% 43%,33% 26%,44% 37%);      }  80%, 100% {    -webkit-clip-path: polygon(80% 20%, 100% 30%, 90% 35%, 83% 35%, 90% 35%, 80% 40%, 40% 30%, 30% 40%, 30% 20%, 40% 30%);            }}
1 0