本文主要包含css3实现动画,css3实现旋转动画,css3实现动画效果,html5 css3动画特效,css3关键帧动画等相关知识,佚名 希望在学习及工作中可以帮助到您
本文运用CSS3的旋转Transform属性和动画的执行百分比制作而成，很特别的CSS3实现粒子旋转伸缩加载动画，具体内容如下
- #loader6 {
- margin: 60px 50px;
- float: left;
- font-size: 90px;
- text-indent: -9999em;
- overflow: hidden;
- width: 1em;
- height: 1em;
- border-radius: 50%;
- position: relative;
- -webkit-animation: load6 1.7s infinite ease;
- animation: load6 1.7s infinite ease;
- }
- @-webkit-keyframes load6 {
- 0% {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,
- -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,
- -0.11em -0.83em 0 -0.477em #ff0000;
- }
- 5%,
- 95% {
- box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,
- -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,
- -0.11em -0.83em 0 -0.477em #ff0000;
- }
- 30% {
- box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.51em -0.66em 0 -0.42em #ff0000,
- -0.75em -0.36em 0 -0.44em #ff0000, -0.83em -0.03em 0 -0.46em #ff0000,
- -0.81em 0.21em 0 -0.477em #ff0000;
- }
- 55% {
- box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.29em -0.78em 0 -0.42em #ff0000,
- -0.43em -0.72em 0 -0.44em #ff0000, -0.52em -0.65em 0 -0.46em #ff0000,
- -0.57em -0.61em 0 -0.477em #ff0000;
- }
- 100% {
- -webkit-transform: rotate(360deg);
- transform: rotate(360deg);
- box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,