首先非常感谢网友Null的无私分享，此作品是jquery学堂2群的网友Null改写基于W3CPLUS漠漠的荷花开再次创作而来，加入了保持最后一帧停留，支持偶次播放时逆向播放达到收回的效果css3制作莲花开放动画效果，仅提供给网友们学习css3用。
主要的css3样式代码如下：
.leaf:nth-child(2) {
/*animation: show-2 5s ease-in-out infinite（infinite参数可以设置重复播放）*/
animation: show-2 5s ease-in-out;
/*保持结束状态*/
-webkit-animation-fill-mode:forwards;
/*animation-direction:alternate;(逆向播放)*/
}
.leaf:nth-child(3) {
animation: show-3 5s ease-in-out;
-webkit-animation-fill-mode:forwards;
}
.leaf:nth-child(4) {
animation: show-4 5s ease-in-out;
-webkit-animation-fill-mode:forwards;
}
.leaf:nth-child(5) {
animation: show-5 5s ease-in-out;
-webkit-animation-fill-mode:forwards;/
}
.leaf:nth-child(6) {
animation: show-6 5s ease-in-out;
-webkit-animation-fill-mode:forwards;/
}
.leaf:nth-child(7) {
animation: show-7 5s ease-in-out;
-webkit-animation-fill-mode:forwards;
}
.leaf:nth-child(8) {
animation: show-8 5s ease-in-out;
-webkit-animation-fill-mode:forwards;
}
@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);
}
}
效果如下：
如果您觉得本作品对您的学习有所帮助：
关键字：
网友Null HTML5 css3 动画插件 360度旋转 图片3D旋转 3D效果 2D特效 box2d