1.分析元素
因为我是新手，没什么发言权，就分享一下我coding的过程，先分析元素，两个半圆通过转动即可实现类似张嘴的动画，然后写豆豆就慢慢调优就好，最后写个小眼睛注入灵魂。其他的元素自己发挥，我这里就是再复习一下昨天学的，这种小型的我们可以快速的在脑袋中思考，然后编码会发现很顺利，然后如果说对于稍微大点的程序的话，最好有设计稿，有脑图等等，帮助梳理的辅助。好了，那就coding吧！
2.html
就是写元素盒子，不必多说，哈哈，你可以说我命名不规范，可我会的都用英文来命名了，我也是很严谨的，哈哈哈🤣
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>吃吃吃loading</title> </head> <body> <div class="div"> /*⚪*/ <div class="yuan"></div> /*豆豆*/ <div class="doudou"></div> /*眼睛，哈哈，我可是用的英文*/ <div class="eye"></div> /*写的字*/ <div class="wenzi">快到嘴里来</div> /*边框*/ <div class="box"></div> </div> </body> </html>
3.CSS
有关CSS的注释我基本都写了，看代码就完事了
*{ margin: 0; padding: 0; } body{ background-color: rgb(111, 111, 111); } .div{ height: 200px; width: 200px; position: absolute; left: 50%; top: 50%; /* 2d */ transform: translate(-50%,-50%); } /* 画两个⚪ */ .yuan{ width: 100%; height: 100%; position: absolute; } /* 伪元素选择器,分别使用after，before的伪类画出两个半圆，然后再寻转角度 */ .yuan::after{ /* 设置相对的圆角边框 */ bottom: 0; border-radius: 0 0 200px 200px; content: ""; width: 100%; height: 50%; position: absolute; background-color: rgb(240, 190, 11); /* 设置旋转元素的基点位置 */ transform-origin: 50% 0%; /* 顺时针旋转45° */ transform: rotate(45deg); /* 使用关键帧,让它一直吃吃吃吃 */ animation: eatMove 1s linear infinite; } .yuan::before{ /* 设置相对的圆角边框 */ top: 0; border-radius: 200px 200px 0 0; content: ""; width: 100%; height: 50%; position: absolute; background-color: rgb(240, 190, 11); /* 设置旋转元素的基点位置 */ transform-origin: 50% 100%; /* 逆时针旋转45° */ transform: rotate(-45deg); animation: eatMove 1s linear infinite; } .doudou{ width: 200px; height: 50px; position: absolute; right: -50%; top: 50%; /* 只设置Y轴,使得对齐 */ transform: translateY(-50%); /* 浮动元素的 z-index属性默认为0,谁大谁显示在上面,这是为了产生吃掉的效果 */ z-index: -1; } .doudou::before, .doudou::after{ content: ""; width: 30px; height: 30px; border-radius: 50%; position: absolute; top: 50%; background-color: rgb(255, 170, 0); transform: translateY(-50%); right: -30px; } .doudou::before{ animation: doudouMove 0.8s linear infinite; } /* 这里的延时使得看上去一次吃了两个,其实是由最后的参数延时一秒造成的 */ .doudou::after{ animation: doudouMove 0.8s linear infinite /*1s*/; } /* 眼睛注入灵魂 */ .eye{ width: 30px; height: 30px; background-color: black; border-radius: 50%; position: absolute; top: 15%; left: 50%; } .wenzi{ width: 90px; height: 30px; display: block; position: absolute; top: 110%; left: 25%; color: rgba(255, 170, 0); font-family: fangsong; font-size: 18px; line-height: 30px; text-align: center; box-shadow: 2px 2px 3px 2px rgb(218, 134, 134),inset 2px 2px 3px 2px royalblue; } .box{ width: 400px; height: 400px; border: 1px solid rgb(240, 190, 11); border-radius: 10px; position: absolute; top: -50%; left: -50%; box-shadow: 2px 2px 3px 2px rgb(218, 134, 134),inset 2px 2px 3px 2px royalblue; } /* doudou关键帧 */ @keyframes doudouMove{ 100%{ right: 100%; } } /* chi关键帧 */ @keyframes eatMove{ 50%{ /* 复制粘贴,把旋转的再转回来就OK */ transform: rotate(0deg); } }
