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;
}