css 实现小猪佩奇 peppa

最新推荐文章于 2023-05-16 12:07:37 发布
最新推荐文章于 2023-05-16 12:07:37 发布
阅读量373 收藏 2
点赞数 1
文章标签： css javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37882457/article/details/88058534
版权

 

www.qinkejicn张博博客

先上图

标题

代码：

<html><head>
	<title></title>
	<style type="text/css">

		div {
			position: absolute;
			transform-origin: left top;
		}
		.pig_container {
			width: 800px;
			height: 800px;
			top: 0;
			left: 50px;
		}

		.pig_head {
			width: 300px;
			height: 200px;
			top: 100px;
			left: 100px;
			border-radius: 95% 50% 50% 50%/ 87% 80% 68% 50%;
			border: 6px solid #ef96c2;
			background-color: #ffb3da;
			transform: rotate(30deg);
			z-index: 100;
			box-sizing: border-box;
		}
		.pig_head_white_left_bottom {
			width: 200px;
			height: 154px;
			bottom: -7px;
			left: -38px;
			background-color: #fff;
			box-sizing: border-box;
		}
		.pig_head_white_left_top {
			/*	width: 200px;
				height: 64px;
				bottom: 84px;
				left: 52px;
				background-color: #ffb3da;
				box-sizing: border-box;*/
			width: 200px;
			height: 66px;
			bottom: 84px;
			background-color: #ffb3da;
			box-sizing: border-box;
			top: 166px;
			left: 134px;
			transform: rotate(34deg);
			z-index: 103;
		}
		.left_eye, .right_eye, .face, .mouth {
			z-index: 104;
		}
		.pig_nose {
			width: 51px;
			height: 70px;
			top: 147px;
			left: 107px;
			border-radius: 72% 72% 72% 72%/ 72% 72% 72% 72%;
			border: 6px solid #ef96c2;
			background-color: #ffb3da;
			transform: rotate(36deg);
			z-index: 103;
			box-sizing: border-box;
		}
		.pig_nose_bottom {
			width: 88px;
			height: 13px;
			top: 209px;
			left: 84px;
			border-radius: 50% 50% 50% 50%/ 0% 0% 100% 100%;
			border: 6px solid #ef96c2;
			background-color: #ffb3da;
			transform: rotate(35deg);
			z-index: 102;
			box-sizing: border-box;
			border-top-color: #ffb3da;
		}
		.pig_jaw {
			width: 97px;
			height: 104px;
			top: 249px;
			left: 141px;
			border-radius: 0% 0% 0% 76%/ 0% 0% 0% 74%;
			border: 6px solid #ef96c2;
			background-color: #ffb3da;
			transform: rotate(22deg);
			z-index: 100;
			box-sizing: border-box;
			border-top-color: #ffb3da;
			border-right-color: #ffb3da;
		}
		.pig_jaw_right {
			width: 13px;
			height: 6px;
			background-color: #ef96c2;
			top: 373px;
			left: 186px;
			transform: rotate(19deg);
			z-index: 100;
		}
		.left_eye_bg {
			width: 29px;
			height: 29px;
			top: 177px;
			left: 170px;
			border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
			border: 6px solid #fff;
			background-color: #fff;
			z-index: 101;
			box-sizing: border-box;
		}
		.left_eye_ball {
			width: 10px;
			height: 10px;
			top: 181px;
			left: 171px;
			border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
			border: 6px solid #000;
			background-color: #000;
			z-index: 101;
			box-sizing: border-box;
		}
		.left_eye_border {
			width: 34px;
			height: 34px;
			top: 174px;
			left: 166px;
			border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
			border: 6px solid #ef96c2;
			background-color: transparent;
			z-index: 101;
			box-sizing: border-box;
		}

		.right_eye_bg {
			width: 28px;
			height: 28px;
			top: 194px;
			left: 205px;
			border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
			border: 6px solid #fff;
			background-color: #fff;
			z-index: 101;
			box-sizing: border-box;
		}
		.right_eye_ball {
			width: 10px;
			height: 10px;
			top: 199px;
			left: 208px;
			border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
			border: 6px solid #000;
			background-color: #000;
			z-index: 101;
			box-sizing: border-box;
		}
		.right_eye_border {
			width: 35px;
			height: 37px;
			top: 191px;
			left: 202px;
			border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
			border: 6px solid #ef96c2;
			background-color: transparent;
			z-index: 101;
			box-sizing: border-box;
		}

		.mouth_bottom {
			width: 97px;
			height: 45px;
			top: 273px;
			left: 154px;
			border-radius: 50% 50% 50% 50%/ 0% 0% 100% 100%;
			border: 6px solid #d44b81;
			background-color: #000;
			z-index: 101;
			box-sizing: border-box;
			transform: rotate(19deg);
		}
		.mouth_middle {
			width: 98px;
			height: 27px;
			top: 272px;
			left: 154px;
			border-radius: 0% 0% 50% 50%/ 0% 0% 100% 100%;
			border: 6px solid #d44b81;
			background-color: #ffb3da;
			z-index: 101;
			box-sizing: border-box;
			transform: rotate(19deg);
			border-top-color: #ffb3da;
		}
		.mouth_top {
			width: 135px;
			height: 66px;
			top: 231px;
			left: 149px;
			border-radius: 50% 50% 50% 50%/ 0% 0% 100% 100%;
			background-color: #ffb3da;
			z-index: 101;
			transform: rotate(13deg);

			/*	width: 131px;
				height: 55px;
				top: 231px;
				left: 152px;
				border-radius: 50% 50% 50% 50%/ 0% 0% 100% 100%;
				background-color: #ffb3da;
				z-index: 101;
				transform: rotate(19deg);*/
		}
		.face {
			width: 49px;
			height: 59px;
			top: 243px;
			left: 269px;
			border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
			background-color: #ff96ce;
			transform: rotate(26deg);
		}

		.nose_kong_left {
			width: 12px;
			height: 12px;
			top: 179px;
			left: 93px;
			border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
			background-color: #da6c9b;
			z-index: 104;
		}
		.nose_kong_right {
			width: 12px;
			height: 12px;
			top: 182px;
			left: 109px;
			border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
			background-color: #da6c9b;
			z-index: 104;
		}

		.ear_left {
			width: 24px;
			height: 52px;
			top: 126px;
			left: 226px;
			border: 6px solid #ef96c2;
			border-radius: 50% 50% 50% 50%/ 35% 40% 50% 50%;
			background-color: #ffb3da;
			z-index: 99;
			transform: rotate(18deg);
		}
		.ear_right {
			width: 24px;
			height: 52px;
			top: 150px;
			left: 280px;
			border: 6px solid #ef96c2;
			border-radius: 50% 50% 50% 50%/ 35% 40% 50% 50%;
			background-color: #ffb3da;
			z-index: 99;
			transform: rotate(36deg);
		}

		.pig_body_bottom {
			width: 215px;
			height: 197px;
			top: 305px;
			left: 108px;
			border: 6px solid #e33b32;
			border-radius: 50% 50% 50% 50%/ 100% 100% 0% 0%;
			background-color: #eb5b50;
			z-index: 99;
		}

		.hand_left_middle {
			width: 78px;
			height: 12px;
			top: 432px;
			left: 63px;
			border-radius: 100% 100% 100% 17%/ 100% 90% 16% 90%;
			background-color: #ffbadf;
			z-index: 99;
			transform: rotate(-35deg);
		}
		.hand_left_top {
			width: 28px;
			height: 9px;
			top: 415px;
			left: 63px;
			border-radius: 100% 100% 100% 35%/ 100% 90% 16% 90%;
			background-color: #ffbadf;
			z-index: 99;
		}
		.hand_left_bottom {
			width: 20px;
			height: 9px;
			top: 420px;
			left: 93px;
			border-radius: 60% 59% 65% 90%/ 100% 90% 89% 90%;
			background-color: #ffbadf;
			z-index: 99;
			transform: rotate(98deg);
		}

		.hand_right_middle {
			width: 79px;
			height: 11px;
			top: 374px;
			left: 309px;
			border-radius: 100% 100% 15% 17%/ 99% 92% 90% 90%;
			background-color: #ffbadf;
			z-index: 99;
			transform: rotate(28deg);
		}
		.hand_right_top {
			width: 28px;
			height: 10px;
			top: 397px;
			left: 350px;
			border-radius: 100% 100% 15% 17%/ 99% 92% 90% 90%;
			background-color: #ffbadf;
			z-index: 99;
			transform: rotate(-7deg);
		}
		.hand_right_bottom {
			width: 28px;
			height: 11px;
			top: 395px;
			left: 356px;
			border-radius: 100% 100% 62% 17%/ 99% 92% 90% 90%;
			background-color: #ffbadf;
			z-index: 99;
			transform: rotate(69deg);
		}
		.left_foot {
			width: 11px;
			height: 52px;
			top: 507px;
			left: 175px;
			border-radius: 100% 100% 100% 100%/ 50% 50% 21% 20%;
			background-color: #ffbadf;
			z-index: 99;
		}
		.left_shoes {
			width: 51px;
			height: 14px;
			top: 553px;
			left: 138px;
			border-radius: 58% 187% 180% 50%/ 130% 123% 113% 100%;
			background-color: #000;
			z-index: 99;
			transform: rotate(0deg);
		}
		.right_foot {
			left: 268px;
		}
		.right_shoes {
			left: 230px;
		}
		.pig_shadow {
			width: 240px;
			height: 47px;
			top: 535px;
			left: 101px;
			border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
			background-color: rgba(171, 171, 171, 0.7);
			transform: rotate(-1deg);
		}
		.tail_left {
			width: 19px;
			height: 8px;
			top: 472px;
			left: 330px;
			border-radius: 50% 50% 50% 50%/ 0% 0% 100% 100%;
			transform: rotate(-9deg);
			background-color: #ffbadf;
			z-index: 99;
		}
		.tail_left_blank {
			width: 30px;
			height: 15px;
			top: 466px;
			left: 332px;
			border-radius: 50% 50% 50% 50%/ 0% 0% 100% 100%;
			transform: rotate(-36deg);
			background-color: #fff;
			z-index: 99;
		}
		.tail_right {
			width: 21px;
			height: 5px;
			top: 451px;
			left: 343px;
			border-radius: 0% 0% 51% 50%/ 0% 0% 100% 100%;
			transform: rotate(31deg);
			background-color: #fff;
			z-index: 99;
			border: 8px solid #ffbadf;
			border-top-color: #fff;
		}
		.tail_blank {
			width: 36px;
			height: 21px;
			top: 437px;
			left: 351px;
			transform: rotate(34deg);
			background-color: #fff;
			z-index: 99;
		}
		.tail_middle {
			width: 7px;
			height: 11px;
			top: 450px;
			left: 336px;
			border: 8px solid #ffbadf;
			border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
			background-color: #fff;
			z-index: 99;
		}
		.tail_circle {
			width: 17px;
			height: 8px;
			top: 475px;
			left: 358px;
			border-radius: 36% 37% 62% 63%/ 99% 92% 90% 90%;
			background-color: #ffbadf;
			z-index: 99;
			transform: rotate(-40deg);
		}

	</style>
</head>
<body>

<div class="pig_container">
	<!-- 尾巴 -->
	<div class="tail_left"></div>
	<div class="tail_right"></div>
	<div class="tail_blank"></div>
	<div class="tail_middle"></div>
	<div class="tail_circle"></div>
	<!-- 底部阴影 -->
	<div class="pig_shadow"></div>
	<!-- 左脚 -->
	<div class="left_foot"></div>
	<div class="left_foot right_foot"></div>
	<!-- 左鞋 -->
	<div class="left_shoes"></div>
	<div class="left_shoes right_shoes"></div>
	<!-- 左手 -->
	<div>
		<div class="hand_left_top"></div>
		<div class="hand_left_bottom"></div>
		<div class="hand_left_middle"></div>
	</div>
	<!-- 身体 -->
	<div class="pig_body_bottom"></div>
	<!-- 右手 -->
	<div>
		<div class="hand_right_top"></div>
		<div class="hand_right_bottom"></div>
		<div class="hand_right_middle"></div>
	</div>

	<!-- 猪头 -->
	<div>
		<!-- 耳朵 -->
		<div class="ear_left"></div>
		<div class="ear_right"></div>
		<div class="pig_head">
			<div class="pig_head_white_left_bottom"></div>
		</div>
		<div class="pig_head_white_left_top"></div>
		<!-- 鼻子 -->
		<div class="pig_nose"></div>
		<!-- 下巴 -->
		<div class="pig_jaw"></div>
		<div class="pig_jaw_right"></div>
		<div class="pig_nose_bottom"></div>
		<!-- 鼻孔 -->
		<div class="nose_kong_left"></div>
		<div class="nose_kong_right"></div>
		<!-- 左眼 -->
		<div class="left_eye">
			<div class="left_eye_bg"></div>
			<div class="left_eye_ball"></div>
			<div class="left_eye_border"></div>
		</div>
		<!-- 右眼 -->
		<div class="right_eye">
			<div class="right_eye_bg"></div>
			<div class="right_eye_ball"></div>
			<div class="right_eye_border"></div>
		</div>
		<!-- 嘴巴 -->
		<div class="mouth">
			<div class="mouth_bottom"></div>
			<div class="mouth_middle"></div>
			<div class="mouth_top"></div>
		</div>
		<!-- 脸颊 -->
		<div class="face"></div>
	</div>
	<p style="text-align:left;font-size:20px;line-height:60px;padding-left:140px">this is peppa</p>

</div>


</body></html>

有兴趣请关注 张博星球博客www.qinkeji.cn/peppa

qq_37882457
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html小猪佩奇的代码,jquery4Demo.html
weixin_30811273的博客
06-07 428
div{background-color: #e5eecc;padding: 7px;border: #c3c3c3;}$(document).ready(function () {$(".hide1").click(function () {$(".ex1").hide("slow");});$(".hide2").click(function () {$(".ex1").show("slow"...
html 小猪佩奇代码,HTML5之canvas画小猪佩奇~
weixin_36386962的博客
06-09 2231
看到有知乎网友用python和css画了一个小猪佩奇，我不一样，我用JavaScript画社会人。小猪佩奇身上纹，掌声送给社会人！小猪佩奇原本是一部儿童动画片，但是在网友的各种调侃下，现在已经成为了社会人的标志，并且引发了众人的效仿。虽然在成年人看来是一种有趣时髦的调侃方式，但是对于还没有树立正确三观的小朋友们来说，的确会带来不良的影响。所以。。前段时间听说了抖音封杀小猪佩奇。程序调试：我是用了h...
小猪佩奇网页 html源码 期末大作业 课程设计
m0_37916936的博客
05-16 207
小猪佩奇网页 html源码 期末大作业 课程设计。
html css画小猪佩琪,【前端切图】用css画一个卡通形象-小猪佩奇
weixin_34117129的博客
08-04 939
最近在腾讯云技术社区遇到了一位奇才，用css画出了一个社会人小猪佩奇，不得不服。研究了一下他的文章https://segmentfault.com/a/1190000014909658，感觉甚是有趣，果断收藏。话不多说，直接贴一张生动到一塌糊涂的图。图片.png前端代码如下：html>用css画一个小猪佩奇div{position:absolute;tra...
前端绘制小猪佩奇（CSS）
MichaelAn的博客
01-19 2659
绘制小猪佩奇的方法有很多。从前端的角度，可以在 canvas 中绘制，或者直接使用 css3 绘制。这里就练习最基本的CSS绘制小猪佩奇。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;用css画一个小猪佩奇&lt;/title&gt; &lt;style type="text/css"&gt;
用CSS画小猪佩奇 纯HTML画小猪佩奇 你就是下一个社会人（附带课件教程）
08-09
8. **动画（animation）**：结合关键帧（@keyframes），实现小猪佩奇的动态动作，如摇头晃脑。 在"PPT课件"中，"用CSS画小猪佩奇，你就是下一个社会人！.pptx"很可能会详细介绍以上这些概念，并通过步骤演示如何将...
小猪佩奇中英文对照目录(第567季)PeppaPigSeasons5-7.pdf
04-05
小猪佩奇中英文对照目录(第567季)PeppaPigSeasons5-7
小猪佩奇小游戏peppa pig.7z
02-07
"小猪佩奇小游戏peppa pig.7z"就是一个生动的例子，它是由Python编程语言的pygame模块精心制作的。这个游戏不仅寓教于乐，还为家长提供了一种新颖的方式来吸引孩子们的兴趣，同时让他们接触到编程的基础知识。 ...
儿童填色画小猪佩奇迪士尼经典汇编.pdf
11-13
"儿童填色画小猪佩奇迪士尼经典汇编.pdf" 这是一本旨在帮助儿童发展绘画和创造能力的填色画册。通过这本书，儿童可以学习绘画小猪佩奇和迪士尼经典角色，并逐步发展自己的艺术天赋。 认识小猪佩奇 小猪佩奇是一只...
Python 画小猪佩奇代码
11-26
Python 画小猪佩奇代码
canvas的小猪佩奇实现！12-3-1.html
12-04
canvas的小猪佩奇实现！
小猪佩奇画图源代码
10-08
python画图模块自动画小猪佩奇，可以熟悉python的画图模块。
基于python+turtle库实现画一个小猪佩奇源码
最新发布
06-12
总结一下，本示例中的"基于python+turtle库实现画一个小猪佩奇源码"是一个利用Python的基础图形库turtle进行教学实践的例子。通过这个项目，初学者可以学习到如何控制turtle对象移动、改变颜色、绘制形状并填充颜色...
小猪佩奇及蓝色小考拉英文字幕
04-27
标题中的“小猪佩奇及蓝色小考拉英文字幕”指的是两个著名的儿童动画片的英文版字幕，它们是“Peppa Pig”和“Penelope Blue”。这两个动画片在全世界范围内广受欢迎，尤其适合儿童英语学习。字幕文件为观看动画片...
【前端切图】用css画一个卡通形象-小猪佩奇
祈澈菇凉
05-28 2770
最近在腾讯云技术社区遇到了一位奇才，用css画出了一个社会人小猪佩奇，不得不服。研究了一下他的文章https://segmentfault.com/a/1190000014909658，感觉甚是有趣，果断收藏。话不多说，直接贴一张生动到一塌糊涂的图。前端代码如下：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;用cs...
纯CSS+HTML绘制小猪佩奇---泥腿子前端出品
weixin_34331102的博客
02-10 1082
年前也不知从具体什么时候开始我儿子迷上了小猪佩奇，再加上朋友圈疯狂传播的鼓风机版小猪佩奇宣传片，这两件事情促使我这个泥腿子前端产生了用代码绘制一副小猪佩奇图案的想法，作为一名“优秀的”开发来说，有想法就落实到行动中，这是必须的职业素养。代码是1月22号完成的，当时想发表出来的，由于年底工作比较繁忙，就拖到了现在。话不多说，先上效果图：绘制这张图时，HTML主要就是div盒模型，css主要运用到了b...
代码实现小猪佩奇（最社会的代码）
qq_36552707的博客
10-11 9051
一、Html的小猪佩奇画法 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt;用css画一个小猪佩奇&amp;lt;/title&amp;gt; &amp;lt;style type=&quot;text/css&quot;&amp;gt
绘制佩奇matlab代码-playMATLAB:无聊时候就玩MATLAB来找乐子吧~
05-20
这套程序是我真的无聊的时候搞的：把小猪佩奇的位图导入到 cdr 文件，再获取坐标，用二次曲线或者椭圆之类的拟合……总之就是十分无聊。 再让我看一下哪个曲线是什么函数，恐怕我也不知道了。 PS：分段曲线拟合，...
小猪佩奇python代码
07-27
这段代码定义了一个 `PeppaPig` 类，它具有一个名称属性 `name` 和一个方法 `oink()` 来模拟小猪佩奇的叫声。我们创建了一个名为 `peppa` 的实例，并调用 `oink()` 方法来打印出小猪佩奇的叫声。你可以根据自己的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值