CSS吃吃吃loading动画

*{

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;

总结

其他的内容都可以按照路线图里面整理出来的知识点逐一去熟悉，学习，消化，不建议你去看书学习，最好是多看一些视频，把不懂地方反复看，学习了一节视频内容第二天一定要去复习，并总结成思维导图，形成树状知识网络结构，方便日后复习。

这里还有一份很不错的《Java基础核心总结笔记》，特意跟大家分享出来

目录：

部分内容截图：

看，学习了一节视频内容第二天一定要去复习，并总结成思维导图，形成树状知识网络结构，方便日后复习。

这里还有一份很不错的《Java基础核心总结笔记》，特意跟大家分享出来

目录：

[外链图片转存中…(img-LfudzfvU-1719198710964)]

部分内容截图：

[外链图片转存中…(img-jRCiv0cr-1719198710965)]

[外链图片转存中…(img-tvjsa3PR-1719198710965)]