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

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

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

外部文件引入:在css包里创建css文件,在html里将css文件引入
前端利用div划分区域实战:猫脸动画_第1张图片
回到html(index.html)里引入css文件
前端利用div划分区域实战:猫脸动画_第2张图片
设置背景颜色:
前端利用div划分区域实战:猫脸动画_第3张图片

区域划分:

前端利用div划分区域实战:猫脸动画_第4张图片

头:

设置圆角
前端利用div划分区域实战:猫脸动画_第5张图片

前端利用div划分区域实战:猫脸动画_第6张图片

边框:

前端利用div划分区域实战:猫脸动画_第7张图片

头上的花纹:

前端利用div划分区域实战:猫脸动画_第8张图片

前端利用div划分区域实战:猫脸动画_第9张图片
前端利用div划分区域实战:猫脸动画_第10张图片

橘色花纹:

小知识:溢出隐藏:
前端利用div划分区域实战:猫脸动画_第11张图片
前端利用div划分区域实战:猫脸动画_第12张图片

耳朵:

耳朵是和头同级的,并且分左右耳
前端利用div划分区域实战:猫脸动画_第13张图片
先划分耳朵区域
耳朵放在头后面,用到层级
小知识点:悬停溢出效果
前端利用div划分区域实战:猫脸动画_第14张图片
前端利用div划分区域实战:猫脸动画_第15张图片
前端利用div划分区域实战:猫脸动画_第16张图片
图这里的猫耳朵是会动的
前端利用div划分区域实战:猫脸动画_第17张图片
前端利用div划分区域实战:猫脸动画_第18张图片
前端利用div划分区域实战:猫脸动画_第19张图片
前端利用div划分区域实战:猫脸动画_第20张图片
前端利用div划分区域实战:猫脸动画_第21张图片

眼睛部分

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

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

眼睛溢出隐藏
前端利用div划分区域实战:猫脸动画_第25张图片
眼睛下眼皮静态效果
和眼圈是同级的

左右眼的下眼皮:

前端利用div划分区域实战:猫脸动画_第26张图片
前端利用div划分区域实战:猫脸动画_第27张图片

腮红:

前端利用div划分区域实战:猫脸动画_第28张图片
前端利用div划分区域实战:猫脸动画_第29张图片
设置对应的动画效果
下眼皮变化;腮红变化,设置透明度腮红的渐现;眼瞳宽度变宽了;
前端利用div划分区域实战:猫脸动画_第30张图片
下眼皮:去掉眼睛部分的溢出隐藏
前端利用div划分区域实战:猫脸动画_第31张图片

左右脸颊的花纹:

也是先写左侧
左侧的脸颊花纹有5个点
前端利用div划分区域实战:猫脸动画_第32张图片
前端利用div划分区域实战:猫脸动画_第33张图片
前端利用div划分区域实战:猫脸动画_第34张图片
右侧将左侧的脸颊花纹进行以y轴为中心翻转:
这样两边脸颊的花纹就画好了
前端利用div划分区域实战:猫脸动画_第35张图片

鼻子:

前端利用div划分区域实战:猫脸动画_第36张图片
和之前一样先划分出鼻子的区域:
前端利用div划分区域实战:猫脸动画_第37张图片
前端利用div划分区域实战:猫脸动画_第38张图片
记得把鼻子的区域去掉
前端利用div划分区域实战:猫脸动画_第39张图片

嘴巴:

分成三部分,竖线,嘴左边,嘴右边
前端利用div划分区域实战:猫脸动画_第40张图片
前端利用div划分区域实战:猫脸动画_第41张图片
前端利用div划分区域实战:猫脸动画_第42张图片
前端利用div划分区域实战:猫脸动画_第43张图片
设置嘴巴微笑的动态效果:
前端利用div划分区域实战:猫脸动画_第44张图片
前端利用div划分区域实战:猫脸动画_第45张图片
完成!
效果:鼠标放上去会微笑,拿下来停止微笑
前端利用div划分区域实战:猫脸动画_第46张图片
整体代码:

html:

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
	head>
	
	<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;
}

你可能感兴趣的:(Web应用开发笔记,前端,html,css)