css3 呼吸的莲花_CSS3制作莲花盛开动画

[css]代码库

CSS3制作莲花盛开动画

body {

background-color: #d4d4d4;

}

.demo {

margin: 40px auto 0;

width: 500px;

}

.box {

position: relative;

height: 400px;

}

.box .leaf {

position: absolute;

}

.leaf {

margin-top: 400px;

width: 300px;

height: 300px;

border-radius: 300px 0px;

background: -*-linear-gradient(45deg, rgba(188, 190, 192, 1) 8%, rgba(158, 31, 99, 1) 30%, rgba(158, 31, 99, 1) 100%);

opacity: 0.5;

filter:alpha(opacity=50);

transform: rotate(45deg);

transform-origin: top right;

}

.leaf:nth-child(2) {

animation: show-2 5s ease-in-out infinite;

}

.leaf:nth-child(3) {

animation: show-3 5s ease-in-out infinite;

}

.leaf:nth-child(4) {

animation: show-4 5s ease-in-out infinite;

}

.leaf:nth-child(5) {

animation: show-5 5s ease-in-out infinite;

}

.leaf:nth-child(6) {

animation: show-6 5s ease-in-out infinite;

}

.leaf:nth-child(7) {

animation: show-7 5s ease-in-out infinite;

}

.leaf:nth-child(8) {

animation: show-8 5s ease-in-out infinite;

}

@keyframes show-2 {

0% {

transform: rotate(45deg);

}

100% {

transform: rotate(71deg);

}

}

@keyframes show-3 {

0% {

transform: rotate(45deg);

}

100% {

transform: rotate(96deg);

}

}

@keyframes show-4 {

0% {

transform: rotate(45deg);

}

100% {

transform: rotate(123deg);

}

}

@keyframes show-5 {

0% {

transform: rotate(45deg);

}

100% {

transform: rotate(149deg);

}

}

@keyframes show-6 {

0% {

transform: rotate(45deg);

}

100% {

transform: rotate(175deg);

}

}

@keyframes show-7 {

0% {

transform: rotate(45deg);

}

100% {

transform: rotate(200deg);

}

}

@keyframes show-8 {

0% {

transform: rotate(45deg);

}

100% {

transform: rotate(225deg);

}

}

CSS3制作莲花盛开动画

作者：藤藤

[代码运行效果截图]

[源代码打包下载]