Как реализовать такую анимацию на 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);
}
}