前端利用div划分区域实战：猫脸动画

已于 2022-11-11 13:10:36 修改
阅读量509 收藏 2
点赞数
分类专栏： Web应用开发笔记 文章标签： 前端 html css
于 2022-11-10 22:01:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51704382/article/details/127703176
版权

此次学习目标：学会利用div划分区域

通过过度效果、圆角来实现

外部文件引入：在css包里创建css文件，在html里将css文件引入
在这里插入图片描述
回到html（index.html）里引入css文件
在这里插入图片描述
设置背景颜色：
在这里插入图片描述

区域划分：

在这里插入图片描述

头：

设置圆角
在这里插入图片描述

在这里插入图片描述

边框：

在这里插入图片描述

头上的花纹：

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

橘色花纹：

小知识：溢出隐藏：
在这里插入图片描述
在这里插入图片描述

耳朵：

耳朵是和头同级的，并且分左右耳
在这里插入图片描述
先划分耳朵区域
耳朵放在头后面，用到层级
小知识点：悬停溢出效果：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
图这里的猫耳朵是会动的
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

眼睛部分

也是在猫的区域里面，和耳朵和头部是同级
在这里插入图片描述
眼睛也是先划分出一个区域，再添加眼睛部分的操作
知识点：子绝父相
相对定位、绝对定位
相对于头部甚至的眼睛位置
注意层级问题
在这里插入图片描述
先写左眼
右眼和左眼是一样的，写完左眼复制就好了，像图里的一样
在这里插入图片描述
html里右眼代码可以和左眼一样，复制过来稍微改改，css里加下面这几行就够了
在这里插入图片描述

这里涉及到的知识点：子代选择器
复习：子代选择器、伪类选择器

眼睛溢出隐藏
在这里插入图片描述
眼睛下眼皮静态效果
和眼圈是同级的

左右眼的下眼皮：

在这里插入图片描述
在这里插入图片描述

腮红：

在这里插入图片描述
在这里插入图片描述
设置对应的动画效果
下眼皮变化；腮红变化，设置透明度腮红的渐现；眼瞳宽度变宽了；
在这里插入图片描述
下眼皮：去掉眼睛部分的溢出隐藏
在这里插入图片描述

左右脸颊的花纹：

也是先写左侧
左侧的脸颊花纹有5个点
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
右侧将左侧的脸颊花纹进行以y轴为中心翻转：
这样两边脸颊的花纹就画好了
在这里插入图片描述

鼻子：

在这里插入图片描述
和之前一样先划分出鼻子的区域：
在这里插入图片描述
在这里插入图片描述
记得把鼻子的区域去掉
在这里插入图片描述

嘴巴：

分成三部分，竖线，嘴左边，嘴右边
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
设置嘴巴微笑的动态效果：
在这里插入图片描述
在这里插入图片描述
完成！
效果：鼠标放上去会微笑，拿下来停止微笑
在这里插入图片描述
整体代码：

html：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<!-- 将css文件引入 -->
	<link rel="stylesheet" type="text/css" href="css/mao.css" />
	<body>
		<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="yanjing_right">
					<div class="yanquan">
						<div></div>
					</div>
					<div class="yanquan_hedding"></div>
					<div class="hong"></div>
				</div>
			</div>
			<div class="face">
				<div class="face_huawen">
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
				</div>
				<div class="face_huawen face_huawen_right">
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
				</div>
			</div>
			<div class="bizi">
				<div></div>
			</div>
			<div class="zuiba_box">
				<div class="zuiba">
					<div></div>
					<div></div>
					<div></div>
				</div>
			</div>
		</div>
	</body>
</html>

css代码：

*{
	margin: 0;
	padding: 0;
}
body{
	background-color: #F6F7A7;
}
/* class选择器 */
.mao{
	width: 400px;
	height: 340px;
	background-color: tan;
	margin: 100px auto;
	/* 上100px auto左右居中 */
	/* 相对定位 */
	position: relative;
}
.mao_head{
	width: 400px;
	height: 340px;
	background-color: white;
	/* 设置圆角 */
	border-radius: 50% 50% 35% 35%;
	/* 边框 */
	border: 2px solid black;
	/* 相对定位 */
	position: relative;
	/* 设置溢出隐藏 */
	overflow: hidden;
	z-index: 10;
}
.huawen{
	width: 180px;
	height: 160px;
	/* 绝对定位 */
	position:absolute;
	left: 110px;
	background-color: #8D8D8D;
	/* 设置圆角 */
	border-radius: 0% 0% 50% 50%;
	/* 设置溢出隐藏 */
	overflow: hidden;
}
.huawen >div{
	height: 160px;
	width: 90px;
	background-color: orange;
}
.erduo{
	width:374px;
	height: 120px;
	/* 绝对定位 */
	position:absolute;
	top: -6px;
	left: 50%;
	/* background-color: teal; */
	/* 左边距 */
	margin-left: -187px;
}
.erduo >div:first-child{
	width: 160px;
	height: 200px;
	background-color: white;
	/* 绝对定位 */
	position:absolute;
	top: 0px;
	left: -20px;
	/* 边框 */
	border: 2px solid black;
	/* 设置圆角 */
	border-radius: 4% 80% 0% 50%;
	transform: rotate(-15deg);
	transition: all 1s linear;
	/* transition：过渡  linear线性 */
}
.erduo >div:last-child{
	width: 160px;
	height: 200px;
	background-color: white;
	/* 绝对定位 */
	position:absolute;
	top: 0px;
	right: -20px;
	/* 边框 */
	border: 2px solid black;
	/* 设置圆角 */
	border-radius: 80% 4% 50% 0%;
	transform: rotate(15deg);
	transition: all 1s linear;
	/* transition：过渡  linear线性 */
}
/* 悬停过度效果 */
.mao:hover .erduo >div:first-child{
	left:-10px;
	transform:rotate(0deg);
	border-radius: 4% 80% 0% 60%;

}
.mao:hover .erduo >div:last-child{
	right: -10px;
	transform: rotate(0deg);
	border-radius: 80% 4% 60% 0%;

}
.yanjing{
	width: 300px;
	height: 60px;
	position: absolute;
	/* 绝对定位 */
	left: 50%;
	margin-left: -150px;
	top: 200px;
	/* background-color: teal; */
	z-index: 20;
	/* 设置溢出隐藏 */
	overflow: hidden;
	
	
}
.yanquan{
	width: 100px;
	height: 100px;
	border: 2px solid black;
	border-radius: 50%;
	
}
.yanquan >div{
	width: 30px;
	height: 100px;
	background-color: black;
	margin-left: 35px;
	transition: all 1s linear;
	/* transition：过渡  linear线性 */
}
.yanquan_hedding{
	width: 180px;
	height: 100px;
	border: 2px solid black;
	background-color: white;
	border-radius: 50%;
	position: absolute;
	left: -40px;
	top: 50px;
	transition: all 1s linear;
	/* transition：过渡  linear线性 */
}
.hong{
	width: 70px;
	height: 28px;
	background-color: red;
	position: absolute;
	left: 18px;
	top: 34px;
	border-radius: 50%;
	/* 设置透明度： 1不透明 0透明 */
	opacity: 0;
	transition: all 1s linear;
	/* transition：过渡  linear线性 */
}
.mao:hover .yanquan_hedding{
	top: 30px;
}
.mao:hover .hong{
	/* 透明度 */
	opacity: 0.8;
}
.mao:hover .yanquan >div:first-child{
	width: 40px;
	margin-left: 30px;
}
.yanjing_right{
	position: absolute;
	left: 196px;
	top: 0px;
}
.face{
	width: 380px;
	height: 80px;
	position: absolute;
	left: 50%;
	top: 190px;
	margin-left: -190px;
	/* 划分脸部花纹区域 */
	/* background-color: pink; */
	z-index: 20;
}
.face_huawen >div:first-child{
	width: 30px;
	height: 10px;
	border-radius: 30% 80% 20% 50%;
	margin-left: 20px;
	border-top: 6px #E53941 solid;
	transform: rotate(25deg);
}
.face_huawen >div:nth-child(2){
	width: 20px;
	height: 6px;
	border-radius: 50%;
	margin-left: 20px;
	background-color: #E53941;
	transform: rotate(25deg);
}
.face_huawen >div:nth-child(3){
	width: 32px;
	height: 10px;
	border-radius: 30% 0% 90% 30%;
	margin-left: 8px;
	border-bottom: 4px #E53941 solid;
	transform: rotate(25deg);
}
.face_huawen >div:nth-child(4){
	width: 26px;
	height: 20px;
	border-radius: 30% 0% 90% 30%;
	margin-left: 28px;
	border-bottom: 4px #E53941 solid;
	transform: rotate(30deg);
	margin-top: 20px;
}
.face_huawen > div:last-child{
	width: 22px;
	height: 10px;
	border-radius: 0% 0% 50% 50%;
	margin-left: 40px;
	border-bottom: 3px #E53941 solid;
	transform: rotate(-15deg);
	margin-top: -8px;
}
.face_huawen_right{
	position: absolute;
	right: 0;
	top: 0;
	transform: rotateY(180deg);
}
.bizi{
	width: 30px;
	height: 36px;
	position: absolute;
	left: 50%;
	margin-left: -15px;
	top: 260px;
	/* background-color: teal; */
	z-index: 30;
}
.bizi > div:first-child{
	width: 30px;
	height: 10px;
	border-bottom: 8px solid black;
	border-radius: 0% 0% 50% 50%;
	margin-top: -10px;
}
.zuiba_box{
	width: 200px;
	height: 36px;
	position: absolute;
	left: 50%;
	margin-left: -100px;
	top: 260px;
	z-index: 30;
	overflow: hidden;
	/* background-color: teal; */
}
.zuiba{
	margin-left: 85px;
	margin-top: 6px;
}
.zuiba > div:first-child{
	width: 4px;
	height: 8px;
	background-color: black;
	margin-left: 13px;
}
.zuiba > div:nth-child(2){
	width: 50px;
	height: 40px;
	border-bottom: 4px solid black;
	border-left: 4px solid black;
	border-radius: 40% 0% 20% 50%;
	margin-left: 13px;
	margin-top: -26px;
	position: absolute;
	transition: all 1s linear;
}
.zuiba > div:nth-child(3){
	width: 50px;
	height: 40px;
	border-bottom: 4px solid black;
	border-right: 4px solid black;
	border-radius: 0% 40% 50% 20%;
	margin-left: -38px;
	margin-top: -26px;
	position: absolute;
	transition: all 1s linear;
}
.mao:hover .zuiba>div:nth-child(2){
	border-radius: 50%;
	width: 40px;
}
.mao:hover .zuiba>div:nth-child(3){
	border-radius: 50%;
	width: 40px;
	margin-left: -30px;
}
凑热闹分子
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html将页面分成四部分,html – 如何使用flexbox将网页划分为四个部分？
weixin_36071439的博客
06-03 1481
您可以简化代码并获得所需的输出.在这里,我删除了行并使用了一个容器.这种结构的主要好处是,如果您认为有必要,可以改变列的顺序.我也选择使用flex-basis而不是flex-grow来使它们保持50％的宽度,无论其内容大小如何.在更宽的屏幕上,使用媒体查询,将列设置为50％宽,并将容器设置为：flex; flex-wrap：wrap;.在较窄的屏幕上,以及作为块元素,它们默认堆叠在一起html, ...
前端学习（38）：css颜色小练习
歌谣的博客
12-07 348
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...
html div 切割 上下左右 四个div
lanqibaoer的专栏
03-30 1万+
.box{ width:1200px; height:100%; min-height:550px; border: 1px solid #c0c0c0; } /**box上*/ .box-top{ margin: 0 auto; width: auto; height:100%; min-height:80px; border: 1px solid #
html中一个div中平均一行分配四个盒子，可展开与收起所有的盒子
最新发布
骨子里的偏爱
12-08 1360
【代码】html中一个div中平均一行分配四个盒子，可展开与收起所有的盒子。
web第六课：div标签和span标签
YY的博客
08-23 3418
div标签和span标签
div+css实战之单页模板下载
04-02
Div（Division）是HTML中的一个容器元素，用于组织网页内容，它可以将网页划分为多个独立区域，便于管理和样式化。通过设置div的CSS（Cascading Style Sheets）属性，我们可以精确控制网页的布局、颜色、字体、边距...
基于web前端开发下div+css第二课堂管理系统
05-25
- **布局策略**：利用CSS的`display`属性，可以将Div转换为行内块（inline-block）或表格单元格（table-cell），实现更灵活的布局控制。常见的布局模式有流式布局、网格布局和响应式布局。 - **定位技巧**：使用`...
精通DIV+CSS3网页布局与样式源代码
03-09
DIV（Division）是HTML中一个非常重要的布局容器，通过它可以将网页内容划分为多个独立的区域，便于管理和控制网页结构。而CSS3（Cascading Style Sheets Level 3）则是最新的CSS规范，带来了诸多增强网页表现力的新...
个人博客div+css可以作为作业交的
05-05
4. 内容区域：使用Div划分文章、图片、评论等模块，通过CSS设置间距、对齐方式以及边框。 5. 侧边栏：可包含最新文章、热门文章、分类链接等，通过CSS调整其宽度和位置。 6. 底部信息：包括版权信息、社交网络链接...
DIV+CSS教程
09-24
3. 图片轮播和滑动效果：利用CSS动画和过渡效果，可以实现图片轮播、滑动面板等交互功能。 总之，掌握DIV+CSS技术，是成为一名合格前端开发者的基础。通过不断地学习和实践，你可以创造出美观、高效且易维护的网页...
css一个div分为四部分,css使用填充将div分成四个相等部分
weixin_28771631的博客
08-04 2552
我有一个内容div，并且在那里我想要一个具有四个相等div的页面，其宽度和高度取决于 。css使用填充将div分成四个相等部分目前这是我的代码：HTML：CSS：#content {border: 2px solid;width: 100%;height: 100%;position: relative;top: -15px;left: -15px;padding: 10px;}#content ...
html中怎么把一页分成两半写,HTML+CSS入门 如何将一个页面平均分成四个部分
weixin_33284411的博客
05-31 2436
本篇教程介绍了HTML+CSS入门 如何将一个页面平均分成四个部分，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。<数据监控页面需要同时显示4个板块内容，如下图：CSS如何将一个页面平均分成四个部分(div)呢？html>将页面平均分成四部分*{margin:0;padding:0;}.main{width:100%;height:100%;position...
前端div块的瀑布流布局
qq_39352780的博客
06-23 1419
前言 如图，每个新闻类别是一个块。新闻类别个数是动态的，每个类别的新闻条数是动态的，产品经理要求做成图中这样的瀑布流布局。借鉴别人图片的瀑布流布局，来实现这个新闻块的瀑布流布局。 开始 对于图片的瀑布流布局来说，有定宽或者定高。我选择定宽的方法。但是在实际情况中，浏览器有多种屏幕宽度，既要给每个div块定宽，又要做到自适应。 所以在这里， 1、我用css计算并设置不同屏幕下div块的宽度：如在>1500宽度下，可以放置5列，除去中间的间距，每列宽度为width:calc(100% - 30px*4)
html div将页面划分,css+div网页布局
weixin_42447265的博客
06-03 4715
div+css排版是最新的网页排版理念，完全有别旧的排版方式(比如说table排版)。首先在页面整体上进行div标签划分内容区域，然后再用css进行定位，最后再对相应的区域添加内容。div+css这种排版十分简单，而且相对容易操作。下面为大家介绍css+div布局方法。1、用div将页面划分用div将页面划分这是对网站页面排版第一步，网页整体框架确定后才能进行下一步。主要是用div划分出各个内容区...
html布局四个正方形,分享一个css小技巧，实现给正方形的四个角设置小方块的方法...
weixin_39838798的博客
05-31 1609
项目的UI设计中有这样的样式，一开始用的背景图，简单粗暴，后来在其他地方出了问题，因为是背景图的原因，这个框框被拉长了后小方块的宽度也变宽了，然后想用纯css实现，百度居然没查到类似的东东，后来在umi的交流群里有个牛人给我指点了下 css backgrund: linear-gradient渐变属性可以实现，因为它可以设置渐变从哪开始，这就可以让我们实现4个顶点的位置定位咯，上代码：html{c...
CSS 将一个页面平均分成四个部分（div）
热门推荐
weixin_34174105的博客
08-11 1万+
在项目中遇到需求，数据监控页面需要同时显示4个板块内容，如下图： CSS 如何将一个页面平均分成四个部分（div）呢？ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>将页面平均分成四部分</t...
html div分屏,js 实现用div 上下分屏
weixin_35740814的博客
06-22 637
之前用的frameSet，但是在谷歌浏览器下有bug，所以自己查资料写了个用js 实现的div 上下分屏demo,下面的div 高度还可以任意拖动，以后有需要的可以直接拿去修改yoga了。上下分屏body {/*font: 14px/1.5 Arial;color: #666;*/}#box {position: relative;width: 100%;height: 500px;border:...
PHP项目案例开发从入门到实战微课视频版课件第章前端技术.pptx
11-13
作者解释了如何利用这些语言来创建符合预期显示效果的网页，并举例说明了标记（如`<div>`）及其属性的使用。 第二篇是项目案例部分，从第5章开始，包括内容管理系统、日程管理系统、在线课程系统、校园信息平台、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值