Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for Animated pacman in HTML/CSS
Leiv Fredrik Berge
Leiv Fredrik Berge

Posted on

     

Animated pacman in HTML/CSS

You never know when you need a pacman to appear on your site. And when you do, you need it to be lightweight and performant.

Inspired byhttps://codepen.io/wifi,https://codepen.io/wifi/pen/olKxE

Lets make our pacman HTML structure, eye is optional I guess.

<divclass="pacman"><divclass="eye"></div></div>
Enter fullscreen modeExit fullscreen mode

My pacman is more squareish, since that is what i needed, feel free to change the border radius to 50%, and have a more default looking figure.

.pacman{background-color:yellow;border-radius:24px;height:210px;width:210px;clip-path:polygon(100%0,100%25%,50%50%,50%50%,100%75%,100%100%,0100%,00);}
Enter fullscreen modeExit fullscreen mode

Screenshot 2021-07-01 at 14-36-41 CSS3 Animated Pacman

Lets animate it! Drop the clip-path, and add the keyframe animation. Set it to infinite and alternate direction. An unnessesary complicated animation curve, and your pacman lives!

.pacman{animation:mouth.35sinfinitecubic-bezier(0.85,0,0.15,1);animation-direction:alternate;}@keyframesmouth{0%{clip-path:polygon(100%0,100%25%,50%50%,50%50%,100%75%,100%100%,0100%,00)}100%{clip-path:polygon(100%0,100%50%,50%50%,50%50%,100%50%,100%100%,0100%,00)}}
Enter fullscreen modeExit fullscreen mode

All together with some food:

Top comments(2)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
cmuralisree profile image
Chittoji Murali Sree Krishna
open source enthusiast, I like to learn and share My Knowledge around.

Nice work, 👍

CollapseExpand
 
lfbergee profile image
Leiv Fredrik Berge
  • Location
    Oslo
  • Work
    Javascript developer at Elate
  • Joined

Thanks ☺️

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

  • Location
    Oslo
  • Work
    Javascript developer at Elate
  • Joined

Trending onDEV CommunityHot

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp