html 浇水动画,纯CSS3实现动画插件spinkit

spinkit使用CSS3的特性实现多种动画效果，元素移动、放大缩小、翻转、进度条加载效果等等，使用了很多CSS3新的特性，是一个学习CSS3不错的网站。

.spinner {

width: 30px;

height: 30px;

background-color: #333;

margin: 100px auto;

-webkit-animation: rotateplane 1.2s infinite ease-in-out;

animation: rotateplane 1.2s infinite ease-in-out;

}

@-webkit-keyframes rotateplane {

0% { -webkit-transform: perspective(120px) }

50% { -webkit-transform: perspective(120px) rotateY(180deg) }

100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }

}

@keyframes rotateplane {

0% {

transform: perspective(120px) rotateX(0deg) rotateY(0deg);

-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)

} 50% {

transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);

-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)

} 100% {

transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);

-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);

}

}