主页 / 问题 / 770486
Accepted
Raz Galstyan
Asked:2020-01-14 14:25:43 +0000 UTC2020-01-14 14:25:43 +0000 UTC

没有`svg`的css pacman动画

  • 772

如何在css. 最好没有svg.

在此处输入图像描述

html

1 个回答

  1. Best Answer

    这里有两个漂亮的选择。

    先从这里开始。

    代码的第二个版本取自这里。

    @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;
  }
  }
}
    <div class="pacman">
  <div class="pacman-top"></div>
  <div class="pacman-bottom"></div>
  <div class="feed"></div>
</div>

     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);     
		 }          
	}
    <div class="pacman-holder moving">
	<div class="pacman-container">
		<div class="pacman-body"></div>
		<div class="pacman-mouth"><div class="pacman"></div></div>
	</div>
	
	<div class="dot"></div>
</div>

    • 8

相关问题