Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- @-moz-keyframes pacman1 {
- 0% {-moz-transform: rotate(45deg);}
- 100% {-moz-transform: rotate(0deg);}
- }
- @-webkit-keyframes pacman1 {
- 0% {-webkit-transform: rotate(45deg);}
- 100% {-webkit-transform: rotate(0deg);}
- }
- @-moz-keyframes pacman2 {
- 0% {-moz-transform: rotate(-45deg);}
- 100% {-moz-transform: rotate(0deg);}
- }
- @-webkit-keyframes pacman2{
- 0% {-webkit-transform: rotate(-45deg);}
- 100% {-webkit-transform: rotate(0deg);}
- }
- @-moz-keyframes pacman3 {
- 0% { box-shadow: 100px 65px 0 0 white, 160px 65px 0 0 white, 220px 65px 0 0 white, 220px 125px 0 0 white, 220px 185px 0 0 white, 220px 245px 0 0 white, 280px 245px 0 0 white, 340px 245px 0 0 white, 400px 245px 0 0 transparent; }
- 100% { box-shadow: 40px 65px 0 0 white, 100px 65px 0 0 white, 160px 65px 0 0 white, 220px 65px 0 0 white, 220px 125px 0 0 white, 220px 185px 0 0 white, 220px 245px 0 0 white, 280px 245px 0 0 white, 340px 245px 0 0 white; }
- }
- @-webkit-keyframes pacman3{
- 0% { box-shadow: 100px 65px 0 0 white, 160px 65px 0 0 white, 220px 65px 0 0 white, 220px 125px 0 0 white, 220px 185px 0 0 white, 220px 245px 0 0 white, 280px 245px 0 0 white, 340px 245px 0 0 white, 400px 245px 0 0 transparent; }
- 100% { box-shadow: 40px 65px 0 0 transparent, 100px 65px 0 0 white, 160px 65px 0 0 white, 220px 65px 0 0 white, 220px 125px 0 0 white, 220px 185px 0 0 white, 220px 245px 0 0 white, 280px 245px 0 0 white, 340px 245px 0 0 white; }
- }
- body {
- background-color: black;
- }
- #pacman {
- margin: 20px;
- margin-left: 85px;
- width: 30px;
- height: 30px;
- border-radius: 50%;
- -moz-animation: pacman3 1.4s linear 0s infinite;
- -webkit-animation: pacman3 1.4s linear 0s infinite;
- }
- #pacman > div {
- content: "";
- display: block;
- position: absolute;
- width: 0;
- height: 0;
- margin-left: -65px;
- border-radius: 50%;
- border: 80px solid yellow;
- border-right-color: transparent;
- }
- #pacman > :nth-of-type(1) {
- -moz-animation: pacman1 0.7s linear 0s infinite alternate;
- -webkit-animation: pacman1 0.7s linear 0s infinite alternate;
- }
- #pacman > :nth-of-type(2) {
- -moz-animation: pacman2 0.7s linear 0s infinite alternate;
- -webkit-animation: pacman2 0.7s linear 0s infinite alternate;
- }
Add Comment
Please, Sign In to add comment