正方形动态html效果图,HTML5一款漂亮的内含花朵的正方形动画背景图案

CSS

语言：

CSSSCSS

确定

body {

background: #2e2e2e;

margin: 0;

}

#app {

width: 600px;

height: 600px;

margin: 0 auto;

}

.square {

float: left;

position: relative;

will-change: transform;

overflow: hidden;

}

.square:before {

content: '';

position: absolute;

width: 140%;

height: 140%;

top: -20%;

left: -20%;

animation: scale 8s ease-in-out infinite;

}

.square--odd:before {

background: linear-gradient(to right top, black 70%, transparent 70%);

transform-origin: left bottom;

}

.square--odd:nth-child(odd):before {

background: linear-gradient(to left top, black 70%, transparent 70%);

transform-origin: right bottom;

}

.square--even:before {

background: linear-gradient(to right bottom, black 70%, transparent 70%);

transform-origin: left top;

}

.square--even:nth-child(odd):before {

background: linear-gradient(to left bottom, black 70%, transparent 70%);

transform-origin: right top;

}

@keyframes scale {

0% {

transform: scale(0.8) rotate(-30deg);

opacity: 0.15;

}

45% {

transform: scale(0.6) rotate(30deg);

opacity: 0.3;

}

55% {

transform: scale(0.6) rotate(30deg);

opacity: 0.3;

}

100% {

transform: scale(0.8) rotate(-30deg);

opacity: 0.15;

}

}