飘落的花朵css3,CSS3 绽放的小花朵

CSS

语言：

CSSSCSS

确定

html,

body {

width: 100%;

height: 100%;

overflow: hidden;

background: #e6e3cc;

}

body::before {

content: '';

width: 330px;

height: 330px;

position: absolute;

top: 50%;

left: 50%;

-webkit-transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

background: #e6e3cc no-repeat;

background-size: 200px 200px;

background-image: -webkit-radial-gradient(rgba(40, 0, 0, 0.5) 98px, rgba(0, 0, 0, 0) 100px), -webkit-radial-gradient(rgba(40, 0, 0, 0.5) 98px, rgba(0, 0, 0, 0) 100px), -webkit-radial-gradient(rgba(40, 0, 0, 0.5) 98px, rgba(0, 0, 0, 0) 100px), -webkit-radial-gradient(rgba(40, 0, 0, 0.5) 98px, rgba(0, 0, 0, 0) 100px), -webkit-radial-gradient(rgba(40, 0, 0, 0.5) 98px, rgba(0, 0, 0, 0) 100px), -webkit-radial-gradient(rgba(40, 0, 0, 0.5) 98px, rgba(0, 0, 0, 0) 100px), -webkit-radial-gradient(rgba(40, 0, 0, 0.5) 98px, rgba(0, 0, 0, 0) 100px), -webkit-radial-gradient(rgba(40, 0, 0, 0.5) 98px, rgba(0, 0, 0, 0) 100px), -webkit-radial-gradient(rgba(40, 0, 0, 0.5) 98px, rgba(0, 0, 0, 0) 100px), -webkit-radial-gradient(rgba(40, 0, 0, 0.5) 98px, rgba(0, 0, 0, 0) 100px);

background-image: radial-gradient(rgba(40, 0, 0, 0.5) 98px, rgba(0, 0, 0, 0) 100px), radial-gradient(rgba(40, 0, 0, 0.5) 98px, rgba(0, 0, 0, 0) 100px), radial-gradient(rgba(40, 0, 0, 0.5) 98px, rgba(0, 0, 0, 0) 100px), radial-gradient(rgba(40, 0, 0, 0.5) 98px, rgba(0, 0, 0, 0) 100px), radial-gradient(rgba(40, 0, 0, 0.5) 98px, rgba(0, 0, 0, 0) 100px), radial-gradient(rgba(40, 0, 0, 0.5) 98px, rgba(0, 0, 0, 0) 100px), radial-gradient(rgba(40, 0, 0, 0.5) 98px, rgba(0, 0, 0, 0) 100px), radial-gradient(rgba(40, 0, 0, 0.5) 98px, rgba(0, 0, 0, 0) 100px), radial-gradient(rgba(40, 0, 0, 0.5) 98px, rgba(0, 0, 0, 0) 100px), radial-gradient(rgba(40, 0, 0, 0.5) 98px, rgba(0, 0, 0, 0) 100px);

background-position: 65px 65px, 65px 65px, 65px 65px, 65px 65px, 65px 65px, 65px 65px, 65px 65px, 65px 65px, 65px 65px, 65px 65px;

-webkit-animation: flower 3.2s cubic-bezier(0.9, 0, 0.1, 1) infinite;

animation: flower 3.2s cubic-bezier(0.9, 0, 0.1, 1) infinite;

}

@supports (background-blend-mode: overlay) {

body::before {

background-blend-mode: overlay;

}

}

@supports (-webkit-filter: contrast(2)) {

body::before {

-webkit-filter: blur(1px) contrast(2);

}

html,

body {

background: #fff;

}

}

@-webkit-keyframes flower {

5% {

background-position: 65px 65px, 65px 65px, 65px 65px, 65px 65px, 65px 65px, 65px 65px, 65px 65px, 65px 65px, 65px 65px, 65px 65px;

}

50% {

background-position: 125px 65px, 113.54102px 29.73288px, 83.54102px 7.93661px, 46.45898px 7.93661px, 16.45898px 29.73288px, 5px 65px, 16.45898px 100.26712px, 46.45898px 122.06339px, 83.54102px 122.06339px, 113.54102px 100.26712px;

}

}

@keyframes flower {

5% {

background-position: 65px 65px, 65px 65px, 65px 65px, 65px 65px, 65px 65px, 65px 65px, 65px 65px, 65px 65px, 65px 65px, 65px 65px;

}

50% {

background-position: 125px 65px, 113.54102px 29.73288px, 83.54102px 7.93661px, 46.45898px 7.93661px, 16.45898px 29.73288px, 5px 65px, 16.45898px 100.26712px, 46.45898px 122.06339px, 83.54102px 122.06339px, 113.54102px 100.26712px;

}

}