css svg做动图,使用CSS3和SVG图片实现的样式图案动画

CSS

语言：

CSSSCSS

确定

DIV {

width: 500px;

height: 300px;

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style=%22transform: rotate(45deg); transform-origin: 50% 50%;background: black;box-shadow: 0 0 0 .5rem orangered, 0 0 0 1rem black,0 0 0 1.5rem indigo, 0 0 0 2rem black, 0 0 0 2.5rem teal, 0 0 0 .5rem black inset, 0 0 0 1rem gold inset, 0 0 0 1.5rem black inset, 0 0 0 2rem yellowgreen inset, 0 0 0 2.5rem black inset, 0 0 0 3rem teal inset, 0 0 0 3.5rem black inset, 0 0 0 4rem purple inset, 0 0 0 4.5rem black inset, 0 0 0 5rem crimson inset, 0 0 0 5.5rem black inset, 0 0 0 6rem orange inset, 0 0 0 6.5rem black inset, 0 0 0 7rem yellow inset, 0 0 0 7.5rem black inset, 0 0 0 8rem aqua inset, 0 0 0 8.5rem black inset, 0 0 0 9rem teal inset;%22%3E%3C/svg%3E");

background-size: 8rem 8rem;

background-position: 50% 50%;

-webkit-animation: bg 10s infinite;

animation: bg 10s infinite;

}

@-webkit-keyframes bg {

25% {

background-size: 10rem 10rem;

}

50% {

background-size: 5rem 5rem;

}

75% {

background-size: 22rem 22rem;

}

}

@keyframes bg {

25% {

background-size: 10rem 10rem;

}

50% {

background-size: 5rem 5rem;

}

75% {

background-size: 22rem 22rem;

}

}

/* Base

--------------------------------- */

HTML,

BODY {

height: 100%;

}

BODY {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

background: #000;

}