【css】css实现吃豆人加载动画

html:

<div id="pacman1"></div>

css:

            #pacman1 {
			  display: block;
			  position: absolute;
			  top: 50%;
			  left: 50%;
			  height: 50px;
			  width: 50px;
			  margin: -25px 0 0 -25px;
			}
			#pacman1:before, #pacman1:after {
			  content: '';
			  position: absolute;
			  display: block;
			  width: 25px;
			  height: 50px;
			  -webkit-transform-origin: 100% 50%;
			          transform-origin: 100% 50%;
			  -ms-transform-origin: 100% 50%;
			  -webkit-transform-origin: 100% 50%;
			          transform-origin: 100% 50%;
			  background-color: #000000;
			  border-radius: 1000px 0 0 1000px;
			}
			#pacman1:before {
			  -webkit-transform: rotate(45deg);
			          transform: rotate(45deg);
			  -ms-transform: rotate(45deg);
			  -webkit-transform: rotate(45deg);
			          transform: rotate(45deg);
			  -webkit-animation: pacman-upper .5s ease infinite;
			          animation: pacman-upper .5s ease infinite;
			}
			#pacman1:after {
			  -webkit-transform: rotate(-45deg);
			          transform: rotate(-45deg);
			  -ms-transform: rotate(-45deg);
			  -webkit-transform: rotate(-45deg);
			          transform: rotate(-45deg);
			  -webkit-animation: pacman-lower .5s ease infinite;
			          animation: pacman-lower .5s ease infinite;
			}
			@-webkit-keyframes pacman-upper {
			  0% {
			    -webkit-transform: rotate(45deg);
			            transform: rotate(45deg);
			    -webkit-transform: rotate(45deg);
			            transform: rotate(45deg);
			  }
			  50% {
			    -webkit-transform: rotate(90deg);
			            transform: rotate(90deg);
			    -webkit-transform: rotate(90deg);
			            transform: rotate(90deg);
			  }
			  100% {
			    -webkit-transform: rotate(45deg);
			            transform: rotate(45deg);
			    -webkit-transform: rotate(45deg);
			            transform: rotate(45deg);
			  }
			}
			@keyframes pacman-upper {
			  0% {
			    -webkit-transform: rotate(45deg);
			            transform: rotate(45deg);
			    -webkit-transform: rotate(45deg);
			            transform: rotate(45deg);
			  }
			  50% {
			    -webkit-transform: rotate(90deg);
			            transform: rotate(90deg);
			    -webkit-transform: rotate(90deg);
			            transform: rotate(90deg);
			  }
			  100% {
			    -webkit-transform: rotate(45deg);
			            transform: rotate(45deg);
			    -webkit-transform: rotate(45deg);
			            transform: rotate(45deg);
			  }
			}
			@-webkit-keyframes pacman-lower {
			  0% {
			    -webkit-transform: rotate(-45deg);
			            transform: rotate(-45deg);
			    -webkit-transform: rotate(-45deg);
			            transform: rotate(-45deg);
			  }
			  50% {
			    -webkit-transform: rotate(-90deg);
			            transform: rotate(-90deg);
			    -webkit-transform: rotate(-90deg);
			            transform: rotate(-90deg);
			  }
			  100% {
			    -webkit-transform: rotate(-45deg);
			            transform: rotate(-45deg);
			    -webkit-transform: rotate(-45deg);
			            transform: rotate(-45deg);
			  }
			}
			@keyframes pacman-lower {
			  0% {
			    -webkit-transform: rotate(-45deg);
			            transform: rotate(-45deg);
			    -webkit-transform: rotate(-45deg);
			            transform: rotate(-45deg);
			  }
			  50% {
			    -webkit-transform: rotate(-90deg);
			            transform: rotate(-90deg);
			    -webkit-transform: rotate(-90deg);
			            transform: rotate(-90deg);
			  }
			  100% {
			    -webkit-transform: rotate(-45deg);
			            transform: rotate(-45deg);
			    -webkit-transform: rotate(-45deg);
			            transform: rotate(-45deg);
			  }
			}