css实现一个萌萌的大嘴巴说话唠叨动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现一个萌萌的大嘴巴说话唠叨动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> /* Variables */ /* Reset */ *, *::after, *::before { margin: 0; padding: 0; box-sizing: border-box; } /* Generic */ body { display: flex; justify-content: center; align-items: flex-end; width: 100%; height: 100vh; background-color: #1C27B5; } .main { display: flex; justify-content: center; align-items: flex-end; position: relative; width: 800px; height: 600px; transform-origin: bottom; } @media (max-width: 800px) { .main { transform: scale(0.7); } } @media (max-width: 700px) { .main { transform: scale(0.6); } } @media (max-width: 500px) { .main { transform: scale(0.5); } } @media (max-width: 400px) { .main { transform: scale(0.3); } } .monster { display: flex; justify-content: center; position: relative; width: 370px; height: 490px; border-top-left-radius: 200px; border-top-right-radius: 200px; background-color: #3C47D7; box-shadow: 80px 80px 0 #07129C; } .monster__face { display: flex; justify-content: center; align-items: center; flex-direction: column; position: absolute; top: 19%; width: 75%; height: 200px; } .monster__eyes { display: flex; justify-content: space-between; width: 28%; height: auto; margin-bottom: 10px; } .monster__eye { width: 17px; height: 30px; border-radius: 20px; background: #000000; } .monster__mouth { display: flex; justify-content: center; align-items: center; position: relative; width: 100%; height: 0%; overflow: hidden; border: 25px solid #FFC333; border-radius: 100px; background-color: #810332; animation: mouth 1.75s infinite; } .monster__mouth::before { content: ""; position: absolute; width: 150px; height: 80px; border-radius: 100px; background-color: #400018; } .monster__mouth::after { content: ""; position: absolute; bottom: -80px; width: 160px; height: 80px; border-top-left-radius: 50%; border-top-right-radius: 50%; background-color: #DC1B50; animation: tongue 1.75s infinite; } .monster__top { position: absolute; top: -30px; width: 170px; height: 30px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; background-color: #ffffff; z-index: 100; animation: t 1.75s infinite; } .monster__bottom { position: absolute; bottom: 0; width: 100px; height: 30px; border-top-l.........完整代码请登录后点击上方下载按钮下载查看
网友评论0