目录
一、运行效果
图片效果
二、项目概述
三、开发环境
四、实现步骤及代码
1.创建空文件夹
2.完成页面内容
3.完成css样式
五、项目总结
六、源码获取
一、运行效果
图片效果
二、项目概述
该项目是一个基于HTML和CSS的动态小猫动画。通过使用CSS样式和动画效果，实现了一个可爱小猫的动态效果，包括耳朵的浮动、眼珠子的移动等。
三、开发环境
开发环境：VsCode
编程语言：HTML5+CSS3
操作系统：Windows
四、实现步骤及代码
1.创建空文件夹
<!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>公众号《编程乐学》- 小猫笑脸动画效果</title>
</head>
<body>
</body>
</html>
2.完成页面内容
<div class="mao_box">
<div class="mao">
<div class="mao_head">
<div class="huawen">
<div>
<!--头部花纹——左边橙色-->
</div>
</div>
</div>
<div class="erduo">
<div></div>
<div></div>
</div>
<div class="yanjing">
<div>
<div class="yanquan">
<div></div>
</div>
<div class="yanquan_hedding">
</div>
<div class="hong"></div>
</div>
<div class="yan_right">
<div class="yanquan">
<div></div>
</div>
<div class="yanquan_hedding">
</div>
<div class="hong"></div>
</div>
<div style="clear:both"></div>
</div>
<div class="face_huawen">
<div class="face_huawen_huawen huawen_left">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="face_huawen_huawen huawen_right">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div style="clear:both"></div>
</div>
<div class="bizi">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="zuiba_box">
<div class="zuiba">
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
</div>3.完成css样式
这段代码是用CSS创建一个猫头鹰动画效果的样式表。代码中使用了一些关键的CSS属性和选择器来定义页面布局和元素样式。
首先，通过设置body元素的高度、对齐方式和背景颜色，创建了一个居中显示的页面布局。
接下来，定义了一个名为"mao_box"的类，用于设置猫头鹰的整体样式，包括相对定位和位置偏移。
然后，通过定义"mao"类来设置猫头鹰的宽度和居中显示。
"mao_head"类定义了猫头鹰头部的样式，包括背景颜色、边框样式和圆角效果。
"huawen"类用于设置猫头鹰头部花纹的样式，包括绝对定位和尺寸。
"erduo"类定义了猫头鹰的耳朵样式，包括宽度、高度、位置和圆角效果。
在"erduo"类中，通过选择子元素来分别定义左耳和右耳的样式，包括边框样式、背景颜色和旋转效果。
通过:hover伪类选择器来设置鼠标悬停时的耳朵样式，包括位置偏移、旋转角度和过渡效果。
接下来，定义了猫头鹰的眼睛样式，包括位置、尺寸和层级。
然后，通过定义"yanquan"类来设置眼睛的样式，包括边框样式和圆角效果。
最后，通过选择子元素来设置眼珠子的样式，包括尺寸、背景颜色和过渡效果。
<style>
body {
height: 90vh;
display: flex;
justify-content: center;
align-items: center;
margin: 0px;
background: #F6F7A7;
}
.mao_box {
position: relative;
top: 50px;
/*width:424px;*/
}
.mao {
margin: 0 auto;
width: 400px;
}
.mao_head {
margin: 0 auto;
width: 400px;
height: 340px;
background: #F6F7F2;
position: relative;
border-radius: 50% 50% 35% 35%;
border: solid 2px #2e2e2e;
overflow: hidden;
z-index: 10;
}
.huawen {
position: absolute;
height: 160px;
width: 180px;
}
.huawen>div:first-child {
height: 160px;
width: 90px;
background: #F0AC6B;
}
/*耳朵*/
.erduo {
width: 374px;
height: 120px;
position: absolute;
top: -6px;
left: 50%;
margin-left: -187px;
border-radius: 0% 0% 0% 0%;
}
/*左耳*/
.erduo>div:first-child {
height: 200px;
width: 160px;
border: 2px solid #2e2e2e;
background: #f3f3f3;
transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
border-radius: 4% 80% 0% 50%;
position: absolute;
left: -20px;
top: 0px;
transition: transform 1s, left 1s;
}
/*右耳*/
.erduo>div:last-child {
height: 180px;
width: 160px;
border: 2px solid #2e2e2e;
background: #f3f3f3; }
/*鼠标浮动耳朵样式*/
/*左耳*/
.mao:hover .erduo>div:first-child {
left: -10px;
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
border-radius: 4% 80% 0% 60%;
/*transition: all 1s;*/
/*transition: transform 1s,left 1s;*/
}
.mao:hover .erduo>div:last-child {
right: -10px;
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
border-radius: 80% 4% 60% 0%;
/*transition: transform 1s,right 1s;*/
}
/*眼睛*/
.yanjing {
height: 60px;
width: 300px;
position: absolute;
top: 200px;
z-index: 20;
left: 50%;
margin-left: -150px;
overflow: hidden;
}
/*左眼*/
.yanquan {
height: 100px;
width: 100px;
border: 2px solid #2e2e2e;
border-radius: 50% 50% 50% 50%;
overflow: hidden;
position: absolute;
}
/*眼珠子 左*/
.yanquan>div:first-child {
height: 100px;
width: 30px;
background-color: #2e2e2e;
margin-left: 35px;
transition: all 1s;
}
</style>五、项目总结
这个项目主要是通过HTML和CSS来实现动态小猫的效果。首先，使用HTML标签来搭建页面结构，包括小猫的头部、耳朵和眼睛等。然后，通过CSS来设置样式和动画效果，包括小猫的颜色、形状、位置和动作等。
在CSS中，使用了一些关键的属性和选择器来实现动态效果。通过设置元素的定位、大小、边框、背景等属性，可以实现小猫的外观效果。同时，通过使用过渡效果和动画效果，可以实现小猫的动态效果，如耳朵的浮动和眼珠子的移动。
六、源码获取
✨还可以关注宫纵号《编程乐学》，菜单栏有很多优质的开源项目以及更多的编程资料等你来学习。
