css案例：小黄人案例

最新推荐文章于 2024-07-05 17:30:57 发布
最新推荐文章于 2024-07-05 17:30:57 发布
阅读量521 收藏
点赞数
文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45295262/article/details/130312217
版权

css案例：小黄人案例

  1. 先看效果图
    眼睛和嘴巴有做动画的，但是我懒得上传gif了。
    在这里插入图片描述3. 源码 html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<style>
		.contain {
			width: 400px;
			height: 600px;
			border: 1px solid #000;
			margin: 0 auto;

			position: relative;
			z-index: -2;
			background-color: pink;
		}
		/* 身体 */
		.body {
			width: 250px;
			height: 400px;
			background-color: #FBF404;
			border: 5px solid #000;
			border-radius: 120px;
			box-shadow: 6px 0px 6px rgba(0, 0, 0, 0.3);
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			overflow: hidden;
		}
		/* 头发 */
		.hair_l,
		.hair_r {
			width: 130px;
			height: 100px;
			/* background-color: #000; */
			border-top: 10px solid #000;
			border-radius:50%;
			position: absolute;
			transform: rotate(48deg);
			z-index: -1;

		}
		.hair_l {
			top: 89px;
			left: 98px;
		}
		.hair_r {
			top: 80px;
			left: 99px;
		}
		/* 眼睛 */
		.eyes {
			width: 100%;
			height: 100px;
			/* border: 1px solid #000; */
			position: absolute;
			top: 75px;
			overflow: hidden;
		}
		/* 眼戴直接用父亲伪元素做 */
		.eyes::before {
			content: "";
			width: 60px;
			height: 20px;
			background-color: #000;
			position: absolute;
			top: 31px;
			left: -15px;
			transform: rotate(25deg);
		}

		.eyes::after {
			content: "";
			width: 60px;
			height: 20px;
			background-color: #000;
			position: absolute;
			top: 31px;
			right: -15px;
			transform: rotate(-25deg);
		}

		/* 大眼眶 */
		.eyes .eyes_l,
		.eyes .eyes_r {
			width: 90px;
			height: 90px;
			border-radius: 50%;
			border: 5px solid #000;
			position: absolute;
			background-color: #fff;
			z-index: 999;
		}
		.eyes .eyes_l {
			left: 25px;
		}
		.eyes .eyes_r {
			right: 25px;
		}
		/* 黑眼珠 */
		.eyes .eyes_l .black_l,
		.eyes .eyes_r .black_r {
			width: 50px;
			height: 50px;
			background-color: #000;
			border-radius: 50%;
			position: absolute;
			top: 20px;
			left: 20px;
			/* 如果用transform定位，再加动画时这个定位就失效了 */
			/* transform: translate(-50%, -50%); */
			/* animation: eye 3s ease infinite; */

		}
		
		/* 白眼珠 */
		.eyes .eyes_l .black_l .white_l,
		.eyes .eyes_r .black_r .white_r {
			width: 20px;
			height: 20px;
			background: #fff;
			border-radius: 50%;
			position: absolute;
			top: 15px;
			
            
		}
		.eyes .eyes_l .black_l .white_l {
			left: 23px;
		}
		.eyes .eyes_r .black_r .white_r {
            left: 6px;
		}
		/* 嘴巴 */
		.mouth {
			width: 80px;
			height: 40px;
			background-color: #fff;
			position: absolute;
			border: 5px solid #000;
			top: 190px;
			left: 80px;
			border-radius: 0 0 45px 45px;
		}
		.mouth::before {
			content: "";
			width: 5px;
			height: 40px;
			background-color: #000;
			position: absolute;
			left: 20px;
		}
		.mouth::after {
			content: "";
			width: 5px;
			height: 40px;
			background-color: #000;
			position: absolute;
			left: 52px;
		}
		
		/* 手臂 */
		.hand_l,
		.hand_r {
			width: 100px;
			height: 100px;
			border: 5px solid #000;
			background-color: #FBF404;
			border-radius: 24px;
			position: absolute;
			top: 300px;		
			z-index: -1;
			

		}
		.hand_l {
			transform: rotate(45deg);
			left:50px;

		}
		.hand_r {
			transform: rotate(-45deg);
			right: 50px;
		}
		.hand_l::after,
		.hand_r::after {
			content: "";
			width: 20px;
			height: 20px;
			background-color: #000;
			border-radius: 7px;
			position: absolute;
			top: 64px;
			/* z-index: 9999; */


		}
		.hand_l::after {
           left: 18px;
		}
		.hand_r::after {
			right: 18px;

		}

		/* 衣服 */
		.clothes {
			width: 260px;
			height: 140px;
			/* border: 1px solid #000; */
			position: absolute;
			bottom: 0;
			left: -5px;
		}
		/* 衣服肩带 */
		.clothes .clothes_jl {
			content: "";
			width: 110px;
			height: 15px;
			border: 5px dashed #000;
			background-color: blue;
			position: absolute;
			top:-15px;
			left: -22px;
			z-index: 2;
			transform: rotate(24deg);

		}
		.clothes .clothes_jr {
			content: "";
			width: 110px;
			height: 15px;
			border: 5px dashed #000;
			background-color: blue;
			position: absolute;
			top:-15px;
			right: -22px;
			z-index: 2;
			transform: rotate(-24deg);

		}
		/* 肩带圆点 */
		.clothes .clothes_jl::after {
			content: "";
			width: 10px;
			height: 10px;
			background-color: #000;
			border-radius: 50%; 
			position: absolute;
			top: 2px;
			right: 3px;
		}
		.clothes .clothes_jr::after {
			content: "";
			width: 10px;
			height: 10px;
			background-color: #000;
			border-radius: 50%; 
			position: absolute;
			top: 2px;
			left: 3px;

		}
		.clothes .clothes_t {
			width: 100px;
			height: 40px;
			background-color: blue;
			border: 5px dashed #000;
			border-bottom: 0;
			position: absolute;
			left: 50%;
			transform: translate(-50%, 0);
			z-index: 1;

		}
		.clothes .clothes_b {
			width: 100%;
			height: 100px;
			background-color: blue;
			border: 5px dashed #000;
			position: absolute;
			bottom: -10px;

		}
		/* 口袋 */
		.clothes .clothes_k {
			width: 80px;
			height: 50px;
			background-color: blue;
			border-radius: 0 0 25px 25px;
			border: 3px dashed #000;
			position: absolute;
			top: 60px;
			left: 88px;
		}
		/* 口袋里面的圆形 */
		.clothes .clothes_k .clothes_k_y {
			content: "";
			width: 30px;
			height: 30px;
			border-radius: 50%;
			/* background-color: ; */
			background-color: #000;
			border: 2px dashed #000;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

		}
		 /* .clothes_k .clothes_k_y {
			background-color: yellow;
		} */
		/* 正方形 */
		.clothes .clothes_k .clothes_k_y::after {
			content: "";
			width: 20px;
			height: 20px;
			background-color: blue;
			border: 2px solid #000;
			position: absolute;
			top: 3px;
			left: 3px;
			transform: rotate(45deg);


		}
		/* 小圆点 */
		.clothes .clothes_k .clothes_k_y::before {
			content: "";
			width: 10px;
			height: 10px;
			border-radius: 50%;
			background-color: #000;
			position: absolute;
			top: 10px;
			left: 10px;
			z-index: 999;
		}
		/* 脚部 */
		.foot .foot_l,
		.foot .foot_r {
			width: 30px;
			height: 80px;
			background-color: #000;

			position: absolute;
			bottom: 80px;
			z-index: -1;		
		}

		.foot .foot_l {
			left: 165px;

		}
		.foot .foot_r {
			left: 220px;

		}
		.foot .foot_l::after,
		.foot .foot_r::after {
			content: "";
			width: 60px;
			height: 30px;
			background-color: #000;
			box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
			position: absolute;
			bottom: -30px;
					
		}
		.foot .foot_l::after {
			left: -30px;
			border-radius: 15px 0 0 15px;
		}
		.foot .foot_r::after {
			right: -30px;
			border-radius: 0px 15px 15px 0px;
		}
		/* 动画 */
		/* 黑眼珠动画 */
		.eyes .black_l,
		.eyes .black_r {
          animation: black_eye 3s infinite;
		}
		@keyframes black_eye {
			0% {
				transform: translate(0, 0);
			}
			25% {
				transform: translate(18px, 0);
			}
			50% {
				transform: translate(0px, 0);
			}
			75% {
				transform: translate(-18px, 0);
			}
			100% {
				transform: translate(0px, 0);
			}

		}
		/* 白眼珠动画 */
		.eyes .black_l .white_l,
		.eyes .black_r .white_r {
			animation: white_eye 3s infinite;
		}
		@keyframes white_eye {
			0% {
				transform: translate(0, 0);
			}
			25% {
				transform: translate(0px, 5px);
			}
			50% {
				transform: translate(0px, 0);
			}
			75% {
				transform: translate(0px, -5px);
			}
			100% {
				transform: translate(0px, 0);
			}

		}
		/* 手臂动画 */
		.hand_l{
			animation: hand_l_mov 3s linear infinite;
		}
		@keyframes hand_l_mov {
			0% {
				transform: rotate(45deg);
			}
			25% {
				transform: rotate(52deg);
				
			}
			50% {
				transform: rotate(45deg);
				
			}
			75% {
				transform: rotate(52deg);
				
			}
			100% {
				transform: rotate(45deg);
				
			}

		}

		.hand_r{
			animation: hand_r_mov 3s linear infinite;
		}
		@keyframes hand_r_mov {
			0% {
				transform: rotate(-45deg);
			}
			25% {
				transform: rotate(-52deg);
				
			}
			50% {
				transform: rotate(-45deg);
				
			}
			75% {
				transform: rotate(-52deg);
				
			}
			100% {
				transform: rotate(-45deg);
				
			}

		}
		/* 头发动画 */
		.hair_l,.hair_r {
			animation: hair_mov 3s linear infinite;
		}
		@keyframes hair_mov {
			0% {
				transform: rotate(48deg);
			}
			25% {
				transform: rotate(55deg);
				
			}
			50% {
				transform: rotate(48deg);
				
			}
			75% {
				transform: rotate(55deg);
				
			}
			100% {
				transform: rotate(48deg);
				
			}

		}
		/* 嘴巴动画 */
		.mouth {
			animation: mouth_mov 1s linear infinite;
		}

       		@keyframes mouth_mov {
			0% {
				transform: translate(0, 0);
			}
			25% {
				transform: translate(0px, 5px);
			}
			50% {
				transform: translate(0px, 0);
			}
			75% {
				transform: translate(0px, -5px);
			}
			100% {
				transform: translate(0px, 0);
			}

		}



	</style>
</head>
<body>
<!-- 小黄人容器 -->
	<div class="contain">
	   <!-- 身体 -->
		<div class="body">	
		<!-- 眼睛 -->
          <div class="eyes">
          <div class="eyes_l">
          	<div class="black_l">
          		<div class="white_l">	</div>
          	</div>
          </div>
          <div class="eyes_r">
          	<div class="black_r">
          		<div class="white_r">	</div>
          	</div>
          </div>

          </div>
          <!-- 嘴巴 -->
          <div class="mouth">	</div>
          <!-- 衣服 -->
          <div class="clothes">
          <!-- 上部 -->
          	<div class="clothes_t"></div>
          	<!-- 下部 -->
          	<div class="clothes_b"></div>
          	<!-- 口袋 -->
          	<div class="clothes_k">
          		<div class="clothes_k_y">
          			
          		</div>
          	</div>
          	<!-- 肩带 -->
          	<div class="clothes_jl"></div>
          	<div class="clothes_jr"></div>

          </div>
		</div>
		<!-- 头发 -->
		<div class="hair">
			<div class="hair_l"></div>
			<div class="hair_r"></div>

		</div>
		<!-- 手臂 -->
		<div class="hand">
			<div class="hand_l"></div>
			<div class="hand_r"></div>
		</div>
		<!-- 脚部 -->
		<div class="foot">
			<div class="foot_l">
				
			</div>
			<div class="foot_r">
				
			</div>
		</div>
	</div>
</body>
</html>
前端辣么菜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
h5-LittleYellow:小黄人H5原始码
03-23
这个项目可能是一个网页应用，允许用户通过浏览器与小黄人进行交互，比如玩游戏、观看动画或者参与其他形式的互动体验。 【描述】"h5-LittleYellow:小黄人H5原始码" 暗示了这个项目是基于HTML5技术构建的，HTML5是...
CSS3实现可爱的小黄人动画
09-24
总的来说，创建这个小黄人动画是一个实践CSS3 3D转换和动画的绝佳案例。通过深入理解并熟练运用这些知识点，你可以创建出更复杂、更具吸引力的交互式网页元素。如果你对这些概念还不熟悉，建议查看提供的链接...
眼睛会动的小黄人CSS3特效
07-14
在本案例中，我们讨论的是一个名为"眼睛会动的小黄人CSS3特效"的项目，它利用了CSS3的关键帧动画（keyframes animation）特性来创建一个动态的、生动的小黄人卡通形象。这个特效让小黄人的特征，特别是其眼睛，具有...
用css3写的小黄人
09-12
本项目“用css3写的小黄人”聚焦于利用CSS3的特性来创建一个生动有趣的小黄人动画，这无疑是一个学习和实践CSS3技术的好案例。小黄人是电影《神偷奶爸》中的经典角色，以其独特的形象和幽默的性格深受喜爱。通过这个...
CSS3 实现的小黄人眨眼动画效果源码.zip
10-31
总的来说，这个小黄人眨眼动画源码是一个很好的学习案例，展示了CSS3如何通过关键帧动画实现动态效果，同时也提醒我们，即使没有JavaScript，仅靠CSS也能创造丰富的用户体验。通过对这个源码的分析和学习，我们可以...
css中伪元素 :: before的用法
金木编程
07-05 224
在这个例子中，CSS规则 ::before 将在类为 example 的元素前插入一个金色的星星符号。这样，你在HTML中只需要定义一段文本，通过CSS可以很容易地在它前面添加图标或装饰性的内容。在CSS中，伪元素 ::before 用于在选定元素的内容前插入内容。它常用于添加图标、文本或装饰性的元素，而不需要在HTML中实际添加额外的标签。::before 伪元素对于丰富网页内容和设计非常有用，特别是在需要在不改变HTML结构的情况下添加装饰性元素时。::before 属性详解。
css使用伪元素after或者before的时候想要给after设置z-index无效
qq_49416650的博客
07-05 274
css使用伪元素after或者before的时候想要给after或者before设置一个层级关系，使该伪类写入的样式在box的下面，发现给box设置z-index无效，需要找到父级元素，在父级元素上设置z-index值并且将伪类设置z-index:-1。
html高级篇
qq_48257021的博客
07-04 757
translform:translateZ（100px）：仅仅是在z轴上移动（注意：translateZ一般用px单位）transform:translate3d（x，y，）：其中x、y、z分别指要移动的轴的方向的距离。translform:translateX（100px）：仅仅是在x轴上移动。translform:translateY（100px）：仅仅是在Y轴上移动。·z轴：垂直屏幕注意：往外面是正值，往里面是负值。·x轴：水平向右注意：X右边是正值，左边是负值。
暑假前端知识速成【CSS】系列一
大学生小郑的博客
07-05 995
暑假速成前端知识（基于黑马）
Vite 中怎么添加全局 scss 文件
前端原创分享，常年坚持记录和分享，全网阅读量超百万
07-05 351
通过这些步骤，你就可以在 Vite 项目中成功添加并使用全局 SCSS 文件了。这种方法可以让你在整个项目中共享 SCSS 变量、mixins 和其他全局样式，提高代码的复用性和维护性。注意，对于 mixin 文件，需要在 vite.config.ts 中进行配置，而不是在 main.ts 中直接导入.当我们使用 scss 时，希望能够把一些定义变量，定义mixin 的文件全局加载，避免每处用到还要单独引入这些文件。在 src 目录下创建一个 styles 文件夹，并添加你的全局 SCSS 文件，例如。
前端学习（三）CSS介绍及选择符
Janice01的博客
07-04 177
2024/7/4。
css的长度单位详解
博哥的二进制世界
07-03 1045
px是相对于显示器屏幕分辨率而言的，且一旦设置就无法因为适应页面大小而改变，所以通常可以设置字体、内外边距、border等一些不需要依据页面而改变数值大小的属性。em是依据父盒子的字体大小来调整数值的，因为其是依据父盒子字体来确定实际大小，不同元素的字体有可能不同，所以通常也不用于自适应。rem是依据根节点的字体大小来调整数值的，所以通常会配合媒体查询做自适应，但其自适应通常需要引入js文件。百分比%是依据父盒子宽高的百分比来确定实际大小的，通常会用百分比做一些局部的宽高调整。
vue 启动项目报错Syntax Error: Error: PostCSS received undefined instead of CSS string
小秋的博客
07-04 356
因为要开发不同的项目使用不同的node版本，所以就用nvm切换，所以导致了node-sass编译问题。node-sass对于node高版本和低版本切换进行的编译不一样，所以重新依赖一下。启动vue项目然后报错如下图。这个是跟node版本有关系。
CSS原子化
最新发布
qq_44930306的博客
07-05 791
定义：使用一系列的助记词，利用类名来代表样式。
在 CSS 中，怎样有效地优化样式表的加载性能，减少页面加载时间？
xy520521的博客
07-01 283
内联关键样式：将页面上的关键样式直接内联到HTML中，以避免额外的网络请求。延迟样式加载：将非关键的样式移动到页面底部，或使用异步加载方式加载，以确保页面的主要内容优先加载。最小化样式表：移除不必要的代码和注释，并将多个样式合并为一个文件，以减少样式表的大小。使用缓存：使用适当的缓存策略，如HTTP缓存头来缓存样式表，以减少网络请求和响应时间。压缩和合并样式表：使用工具压缩和合并多个样式表文件，以减少文件大小和网络请求的数量。使用媒体查询：只加载适用于特定设备或屏幕尺寸的样式表，以避免不必要的样式加载。
使用css，让div消失在视野中的方法
博哥的二进制世界
07-03 362
使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。给元素设置visibility: hidden也可以隐藏这个元素，但是隐藏元素仍需占用与未隐藏时一样的空间，也就是说虽然元素不可见了，但是仍然会影响页面布局。visibility:hidden是视觉上消失了，在文档流中占位，浏览器会解析该元素；
html+js+css做的扫雷
w11111xxxl的博客
06-28 1039
做了个大小 源代码在文章最后。
HTML常见标签
secret010的博客
07-05 281
<h1>薛之谦</h1><p>1983年7月17日出生于上海</p><p>毕业于格里昂酒店管理学院</p><p>华语流行乐男歌手、影视演员、音乐制作人</p><p>2005年，因参加选秀节目《我型我秀》而正式出道</p><p>2006年6月12日，发行个人首张同名专辑《薛之谦》</p><p>随后凭借歌曲《认真的雪》获得广泛关注</p>
html三级菜单
qq_70036866的博客
07-05 740
三级菜单</a></li><li><a href="#">三级菜单</a></li>-- <li><a href="#">一级菜单</a></li> --><li><a href="#">二级菜单</a></li><a href="#">二级菜单</a><a href="#">一级菜单
小黄人动画css代码
05-28
小黄人动画是一个非常有趣的CSS动画，可以通过CSS3中的一些特性来实现。以下是一个基本的小黄人动画的CSS代码： ```css /* 设置小黄人动画的容器 */ .minion { position: relative; width: 250px; height: 250px; } /* 设置小黄人的身体 */ .minion .body { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; border-radius: 50%; background-color: yellow; } /* 设置小黄人的眼睛 */ .minion .eye { position: absolute; top: 30%; left: 25%; width: 20px; height: 20px; border-radius: 50%; background-color: white; } /* 设置小黄人眼睛里的黑色部分 */ .minion .eye::before { content: ''; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; border-radius: 50%; background-color: black; } /* 设置小黄人眼睛的另一只 */ .minion .eye.right { left: auto; right: 25%; } /* 设置小黄人的嘴巴 */ .minion .mouth { position: absolute; top: 60%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 20px; border-radius: 0px 0px 20px 20px; border-bottom: solid black 3px; } /* 设置小黄人的带子 */ .minion .goggles { position:absolute; top:-10px; left:-10px; width:120px; height:120px; border-radius:50%; border:10px solid #2D2D2D; background-color:white; } /* 设置小黄人的带子上面的金属部分 */ .minion .goggles::before { content:""; display:block; position:absolute; top:-8px; left:-8px; width:10px; height:10px; border-radius:50%; background-color:#B8B8B8; } /* 设置小黄人的带子下面的金属部分 */ .minion .goggles::after { content:""; display:block; position:absolute; bottom:-8px; right:-8px; width:10px; height:10px; border-radius:50%; background-color:#B8B8B8 } /* 定义小黄人动画的关键帧 */ @keyframes rotate { from { transform : rotate(0deg); } to { transform : rotate(360deg); } } /* 设置小黄人动画 */ .minion:hover .goggles, .minion:hover .eye::before { animation-name: rotate; /* 使用刚才定义的关键帧 */ animation-duration:2s; /* 持续时间为2秒 */ animation-timing-function: linear; /* 时间函数为线性 */ animation-iteration-count: infinite; /* 循环无限次 */ } ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值