css анимация pacman без `svg`

Как реализовать такую анимацию на css. Желательно без svg

Ответ

Вот два красивых варианта.
Первый отсюда
Второй вариант кода взят отсюда
@import url(https://fonts.googleapis.com/css?family=Press+Start+2P); html{ background-color:#000; border-bottom:solid 5px blue; border-top:solid 5px blue; overflow-x:hidden; padding-bottom:142px; } p{ color:#FFF; font: 50px 'Press Start 2P', cursive; margin:200px 139px; position:absolute; text-align:center; } .pacman{ margin:40px 10px; } .pacman-top{ background-color:yellow; height:100px; width:200px; border-radius:100px 100px 0 0; animation: spin1 0.5s infinite linear; } .pacman-bottom{ background-color:yellow; height:100px; width:200px; border-radius:0 0 100px 100px; animation: spin2 0.5s infinite linear; } .feed { margin-top: -185px; margin-left:15px; width: 45px; height: 45px; border-radius: 30%; -moz-animation: eat 1s linear 0s infinite; -webkit-animation: eat 1s linear 0s infinite; animation: eat 1s linear 0s infinite; } /* Animation*/ @keyframes spin1 { 0% {transform: rotate(0deg);} 50%{transform: rotate(-35deg);} } @keyframes spin2 { 0% {transform: rotate(0deg);} 50%{transform: rotate(35deg);} } @-moz-keyframes spin1 { 0% {transform: rotate(0deg);} 50%{transform: rotate(-35deg);} } @-moz-keyframes spin2 { 0% {transform: rotate(0deg);} 50%{transform: rotate(35deg);} } @-webkit-keyframes spin1 { 0% {transform: rotate(0deg);} 50%{transform: rotate(-35deg);} } @-webkit-keyframes spin2 { 0% {transform: rotate(0deg);} 50%{transform: rotate(35deg);} } @keyframes eat { 0% { box-shadow: 100px 65px 0 0 white, 300px 65px 0 0 white, 500px 65px 0 0 white, 700px 65px 0 0 white, 900px 65px 0 0 white, 1100px 65px 0 0 white, 1300px 65px 0 0 white;} 100% { box-shadow: 0px 65px 0 0 white, 100px 65px 0 0 white, 300px 65px 0 0 white, 500px 65px 0 0 white, 700px 65px 0 0 white, 900px 65px 0 0 white, 1100px 65px 0 0 white;} } } @-moz-keyframes eat { 0% { box-shadow: 100px 65px 0 0 white, 300px 65px 0 0 white, 500px 65px 0 0 white, 700px 65px 0 0 white, 900px 65px 0 0 white, 1100px 65px 0 0 white, 1300px 65px 0 0 white;} 100% { box-shadow: 0px 65px 0 0 white, 100px 65px 0 0 white, 300px 65px 0 0 white, 500px 65px 0 0 white, 700px 65px 0 0 white, 900px 65px 0 0 white, 1100px 65px 0 0 white;} } } @-webkit-keyframes eat { 0% { box-shadow: 100px 65px 0 0 white, 300px 65px 0 0 white, 500px 65px 0 0 white, 700px 65px 0 0 white, 900px 65px 0 0 white, 1100px 65px 0 0 white, 1300px 65px 0 0 white; } 100% { box-shadow: 0px 65px 0 0 white, 100px 65px 0 0 white, 300px 65px 0 0 white, 500px 65px 0 0 white, 700px 65px 0 0 white, 900px 65px 0 0 white, 1100px 65px 0 0 white; } } }

body{ background:#222; color:#ddd; font-family:Exo; text-shadow:0 -1px 0 #000; } h1,h2{ color:#ff0; text-shadow:0 -3px 3px #000; font-weight:normal; } .wrapper{ max-width:600px; padding:0 20px; margin:0 auto; } .pacman-holder{ position:relative; width:200px; margin:100px auto; } .pacman-container { display:block; width:100px; height: 100px; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); -moz-animation: bite 0.5s linear infinite; -webkit-animation: bite 0.5s linear infinite; animation: bite 0.5s linear infinite; } .pacman-body { background-color: #ff0; position: absolute; width: 100px; height: 100px; -moz-border-radius: 50px; -webkit-border-radius: 50px; -o-border-radius: 50px; border-radius: 50px; } .dot { background-color: #fff; position: absolute; z-index:0; top:40px; left:200px; width: 20px; height: 20px; -moz-border-radius: 50px; -webkit-border-radius: 50px; -o-border-radius: 50px; border-radius: 50px; -moz-animation: movedot 0.5s linear infinite; -webkit-animation: movedot 0.5s linear infinite; animation: movedot 0.5s linear infinite; -moz-animation-delay:0.2s; -webkit-animation-delay:0.2s; animation-delay:0.2s; } .pacman { position: absolute; width: 100px; height: 100px; -moz-border-radius: 50px; -webkit-border-radius: 50px; -o-border-radius: 50px; border-radius: 50px; clip: rect(0px, 50px, 100px, 0px); z-index:2; } .pacman-mouth { position: absolute; left:2px; width: 102px; height: 102px; -moz-border-radius: 50px; -webkit-border-radius: 50px; -o-border-radius: 50px; border-radius: 50px; clip: rect(0px, 100px, 100px, 52px); } .pacman-mouth .pacman { background-color: #222; -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -o-transform:rotate(90deg); transform:rotate(90deg); -moz-animation: munch 0.5s linear infinite; -webkit-animation: munch 0.5s linear infinite; animation: munch 0.5s linear infinite; /* To fix a yellow border on pacman's mouth */ border: 3px solid #222; } .pacman-holder.moving{ width:100px; -moz-animation: move 2.7s linear infinite; -webkit-animation: move 2.7s linear infinite; animation: move 2.7s linear infinite; } .pacman-holder.moving .dot{ -moz-animation: movedot 1s linear infinite; -webkit-animation: movedot 1s linear infinite; animation: movedot 1s linear infinite; -moz-animation-delay:0.2s; -webkit-animation-delay:0.2s; animation-delay:0.2s; } @-moz-keyframes munch { 0% { -moz-transform:rotate(90deg); } 50% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(90deg); } } @-webkit-keyframes munch { 0% { -webkit-transform:rotate(90deg); } 50% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(90deg); } } @keyframes munch { 0% { transform:rotate(90deg); } 50% { transform:rotate(0deg); } 100% { transform:rotate(90deg); } } @-moz-keyframes bite { 0% { -moz-transform:rotate(45deg); } 50% { -moz-transform:rotate(90deg); } 100% { -moz-transform:rotate(45deg); } } @-webkit-keyframes bite { 0% { -webkit-transform:rotate(45deg); } 50% { -webkit-transform:rotate(90deg); } 100% { -webkit-transform:rotate(45deg); } } @keyframes bite { 0% { transform:rotate(45deg); } 50% { transform:rotate(90deg); } 100% { transform:rotate(45deg); } } @-webkit-keyframes movedot { 0% { left:200px; } 100% { left:50px; } } @-moz-keyframes movedot { 0% { left:200px; } 100% { left:50px; } } @keyframes movedot { 0% { left:200px; } 100% { left:50px; } } @-webkit-keyframes move { 0% { -webkit-transform: scaleX(1); left:0px; } 49.999% { left:200px; -webkit-transform: scaleX(1); } 50%{ -webkit-transform: scaleX(-1); } 100% { left:0px; -webkit-transform: scaleX(-1); } } @-moz-keyframes move { 0% { -moz-transform: scaleX(1); left:0px; } 49.999% { left:200px; -moz-transform: scaleX(1); } 50%{ -moz-transform: scaleX(-1); } 100% { left:0px; -moz-transform: scaleX(-1); } } @keyframes move { 0% { transform: scaleX(1); left:0px; } 49.999% { left:200px; transform: scaleX(1); } 50%{ transform: scaleX(-1); } 100% { left:0px; transform: scaleX(-1); } }