HTML、CSS招财猫

最新推荐文章于 2024-09-15 21:53:51 发布
最新推荐文章于 2024-09-15 21:53:51 发布
阅读量760 收藏
点赞数
文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52899829/article/details/122338467
版权 
<!DOCTYPE html>
<html lang="en">

	<head>

		<meta charset="UTF-8">

		<link rel="apple-touch-icon" type="image/png"
			href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" />
		<meta name="apple-mobile-web-app-title" content="CodePen">

		<link rel="shortcut icon" type="image/x-icon"
			href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />

		<link rel="mask-icon" type="image/x-icon"
			href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg"
			color="#111" />


		<title>新年快乐</title>




		<style>
			body {
				background-color: darkslategrey;
			}

			.wrapper {
				display: flex;
				width: 100%;
				height: 100%;
				margin-top: 20px;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}

			.container {
				position: relative;
				width: 340px;
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				/*   transform: scale(0.5); */
			}

			.ears {
				display: flex;
				width: 100%;
				justify-content: space-between;
			}

			.ear-left-out {
				height: 110px;
				width: 110px;
				border: solid 8px black;
				background-color: white;
				border-radius: 26% 74% 72% 28% / 28% 38% 62% 72%;
				position: relative;
				transform: rotate(3deg);
			}

			.ear-left-inner {
				height: 60px;
				position: absolute;
				top: 30px;
				left: 30px;
				width: 60px;
				background-color: #DF4A63;
				border-radius: 26% 74% 72% 28% / 28% 38% 62% 72%;
				border: solid 8px black;
			}

			.ear-right-out {
				height: 110px;
				width: 110px;
				border: solid 8px black;
				background-color: white;
				border-radius: 26% 74% 72% 28% / 28% 38% 62% 72%;
				position: relative;
				transform: rotate(84deg);
			}

			.ear-right-inner {
				height: 60px;
				position: absolute;
				top: 30px;
				right: 30px;
				width: 60px;
				background-color: #DF4A63;
				border-radius: 26% 74% 72% 28% / 28% 38% 62% 72%;
				transform: rotate(88deg);
				border: solid 8px black;
			}

			.head {
				height: 250px;
				width: 300px;
				top: 10px;
				left: 10px;
				border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
				border: solid 8px black;
				background-color: white;
				position: absolute;
				z-index: 2;
			}

			.eyes {
				display: flex;
				justify-content: space-around;
				padding-top: 85px;
				height: 35px;
			}

			.eye-left::after {
				content: ' ';
				position: absolute;
				height: 12px;
				display: inline-block;
				width: 12px;
				left: 1px;
				top: 0px;
				background-color: black;
				border-radius: 61%;
			}

			.eye-left::before {
				content: ' ';
				position: absolute;
				height: 12px;
				display: inline-block;
				width: 12px;
				right: 1px;
				top: 0px;
				background-color: black;
				border-radius: 61%;
			}

			.eye-left {
				z-index: 1;
				width: 74px;
				height: 74px;
				border: 12px solid;
				border-color: black transparent transparent transparent;
				-webkit-border-radius: 50%;
				-moz-border-radius: 50%;
				border-radius: 50%;
				-webkit-transform: rotate(30deg);
				-moz-transform: rotate(30deg);
				transform: rotate(3deg);
			}

			.eye-right::after {
				content: ' ';
				position: absolute;
				height: 12px;
				display: inline-block;
				width: 12px;
				left: 1px;
				top: 0px;
				background-color: black;
				border-radius: 61%;
			}

			.eye-right::before {
				content: ' ';
				position: absolute;
				height: 12px;
				display: inline-block;
				width: 12px;
				right: 1px;
				top: 0px;
				background-color: black;
				border-radius: 61%;
			}

			.eye-right {
				z-index: 1;
				width: 74px;
				height: 74px;
				border: 12px solid;
				border-color: black transparent transparent transparent;
				-webkit-border-radius: 50%;
				-moz-border-radius: 50%;
				border-radius: 50%;
				-webkit-transform: rotate(30deg);
				-moz-transform: rotate(30deg);
				transform: rotate(-3deg);
			}

			.face-center {
				display: flex;
				width: 100%;
			}

			.face-wrapper {
				/*   position: relative;   */
			}

			.mustache-left {
				background-color: black;
				width: 50px;
				height: 8px;
				border-radius: 7% 93% 93% 7% / 47% 53% 47% 53%;
				position: absolute;
				top: 140px;
				left: 14px;
			}

			.mustache-right-bottom {
				background-color: black;
				width: 50px;
				height: 8px;
				border-radius: 93% 7% 7% 93% / 53% 47% 53% 47%;
				position: absolute;
				top: 155px;
				left: 240px;
				transform: rotate(8deg);
			}

			.mustache-right {
				background-color: black;
				width: 50px;
				height: 8px;
				border-radius: 93% 7% 7% 93% / 53% 47% 53% 47%;
				position: absolute;
				top: 140px;
				left: 240px;
			}

			.mustache-left-bottom {
				background-color: black;
				width: 50px;
				height: 8px;
				border-radius: 7% 93% 93% 7% / 47% 53% 47% 53%;
				position: absolute;
				top: 155px;
				left: 14px;
				transform: rotate(-8deg);
			}

			.nose {
				position: absolute;
				top: 130px;
				left: 135px;
				height: 20px;
				width: 35px;
				background-color: black;
				border-radius: 46% 54% 49% 51% / 66% 65% 35% 34%;
			}

			.mouth {
				position: absolute;
				z-index: 1;
				top: 110px;
				left: 80px;
				width: 60px;
				height: 60px;
				border: 8px solid;
				border-color: transparent black black transparent;
				-webkit-border-radius: 50%;
				-moz-border-radius: 50%;
				border-radius: 50%;
				-webkit-transform: rotate(30deg);
				-moz-transform: rotate(30deg);
				transform: rotate(45deg);
			}

			.mouth-right {
				position: absolute;
				z-index: 1;
				top: 110px;
				left: 147px;
				width: 60px;
				height: 60px;
				border: 8px solid;
				border-color: transparent black black transparent;
				-webkit-border-radius: 50%;
				-moz-border-radius: 50%;
				border-radius: 50%;
				-webkit-transform: rotate(30deg);
				-moz-transform: rotate(30deg);
				transform: rotate(45deg);
			}

			.necklace {
				height: 95px;
				background-color: #DF4A63;
				margin-top: 70px;
				border-radius: 50% 50% 50% 50% / 0% 0% 100% 100%;
				width: 250px;
				align-self: center;
				border: solid 8px black;
				position: relative;
				z-index: 1;
			}

			.bell {
				background-color: #F9D552;
				border-radius: 50%;
				position: absolute;
				top: 82px;
				left: 90px;
				height: 50px;
				width: 50px;
				border: solid 8px black;
			}

			.reflect {
				height: 13px;
				width: 20px;
				background-color: white;
				border-radius: 50%;
				position: absolute;
				top: 5px;
				right: 9px;
				transform: rotate(25deg);
			}

			.bell:before {
				content: '';
				height: 16px;
				width: 16px;
				border-radius: 50%;
				background-color: black;
				position: absolute;
				bottom: 3px;
				left: 18px;
			}

			.bell:after {
				content: '';
				height: 15px;
				width: 8px;
				background-color: black;
				position: absolute;
				bottom: 0px;
				left: 22px;
			}

			.arm-top-left-wrapper {
				z-index: 0;
			}

			.arm-top-left {
				position: absolute;
				display: flex;
				top: 200px;
				width: 220px;
				left: 6px;
				height: 240px;
				background: #fff;
				border: 8px solid black;
				transform: rotate(50deg);
				border-radius: 50%;
				border-color: transparent transparent black black;
			}

			.arm-top-left-tip:after {
				content: '';
				position: absolute;
				height: 67px;
				width: 49px;
				background: white;
				border-radius: 50%;
				bottom: -21px;
				left: 17px;
				transform: rotate(17deg);
			}

			.arm-top-left-tip {
				left: 70px;
				bottom: 132px;
				position: absolute;
				display: flex;
				z-index: 1;
				background: white;
				width: 68px;
				height: 60px;
				border: 8px solid black;
				transform: rotate(92deg);
				border-radius: 50%;
				border-color: black black transparent black;
			}

			@keyframes arm-right {
				0% {
					transform: rotate(35deg);
					transform-origin: center;
				}

				50% {
					transform-origin: left;
					transform: rotate(35deg) translateY(-10px) translateX(-10px) scaleY(0.8);
				}

				100% {
					transform-origin: center;
					transform: rotate(35deg);
				}
			}

			.arm-top-right {
				position: absolute;
				display: flex;
				z-index: -1;
				top: 132px;
				width: 106px;
				right: -26px;
				height: 200px;
				background: #fff;
				border: 8px solid black;
				transform: rotate(35deg);
				border-radius: 50%;
				border-color: transparent black transparent transparent;
				animation: arm-right 1.5s both infinite;
			}

			@keyframes arm-tip-right {
				0% {
					top: 128px;
				}

				50% {
					top: 175px;
				}

				100% {
					top: 128px;
				}
			}

			.arm-top-right-tip {
				position: absolute;
				display: flex;
				z-index: 0;
				/*       transform: rotate(-15deg); */
				/*     top: 128px; */
				top: 175px;
				right: -66px;
				width: 85px;
				background: white;
				height: 60px;
				border: 8px solid black;
				border-radius: 50%;
				border-color: black black black transparent;
				animation: arm-tip-right 1.5s both infinite;
			}

			.back-legs {
				width: 100%;
				height: 200px;
				position: relative;
				display: flex;
				justify-content: space-between;
			}

			.back-leg-left {
				width: 120px;
				height: 180px;
				z-index: -2;
				border-radius: 53% 47% 50% 50% / 59% 61% 39% 41%;
				background-color: white;
				position: relative;
				padding-top: 30px;
				border: solid 8px black;
				border-color: transparent transparent transparent black;
				transform: rotate(10deg);
			}

			.back-leg-right {
				width: 120px;
				height: 180px;
				z-index: -2;
				border-radius: 47% 53% 50% 50% / 61% 59% 41% 39%;
				background-color: white;
				position: relative;
				padding-top: 30px;
				border: solid 8px black;
				border-color: black black transparent transparent;
				transform: rotate(-10deg);
			}

			.paws {
				position: relative;
				width: 100%;
				height: 100px;
				margin-top: -28px;
				display: flex;
				justify-content: space-between;
			}

			.paw-left {
				height: 60px;
				width: 100px;
				margin-right: 4px;
				border-radius: 47% 53% 50% 50% / 60% 60% 40% 40%;
				border: solid 8px black;
				background-color: white;
			}

			.paw-right {
				height: 60px;
				width: 100px;
				margin-left: 4px;
				border-radius: 47% 53% 50% 50% / 60% 60% 40% 40%;
				border: solid 8px black;
				background-color: white;
			}

			.gold {
				height: 217px;
				width: 136px;
				background: #F9D552;
				border: solid 8px black;
				left: 115px;
				bottom: 8px;
				border-radius: 61px;
				position: absolute;
				transform: rotate(45deg);
			}

			.gold:after {
				content: '';
				height: 50px;
				width: 22px;
				border-radius: 50%;
				background: white;
				position: absolute;
				transform: rotate(45deg);
				top: 4px;
				left: 17px;
			}

			.carving {
				position: absolute;
				display: inline-block;
				font-family: 'Ma Shan Zheng', cursive;
				z-index: 1;
				top: 26px;
				left: 40px;
				width: 50px;
				font-size: 40px;
				font-weight: 600;
				line-height: 40px;
				color: red;
			}
		</style>

		<script>
			window.console = window.console || function(t) {};
		</script>



		<script>
			if (document.location.search.match(/type=embed/gi)) {
				window.parent.postMessage("resize", "*");
			}
		</script>


	</head>

	<body translate="no">
		<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Ma Shan Zheng" />

		<div class="wrapper">
			<div class="container">
				<div class="ears">
					<div class="ear-left-out"></div>
					<div class="ear-left-inner"></div>
					<div class="ear-right-out"></div>
					<div class="ear-right-inner"></div>
				</div>
				<div class="head">
					<div class="eyes">
						<div class="eye-left"></div>
						<div class="eye-right"></div>
					</div>
					<div class="face-center">
						<div class="face-wrapper">
							<div class="mustache-left"></div>
							<div class="mustache-left-bottom"></div>
						</div>
						<div class="face-wrapper">
							<div class="mustache-right"></div>
							<div class="mustache-right-bottom"></div>
						</div>
						<div class="face-wrapper">
							<div class="nose"></div>
							<div class="mouth"></div>
							<div class="mouth-right"></div>
						</div>
					</div>
				</div>
				<div class="necklace">
					<div class="bell">
						<div class="reflect"> </div>
					</div>
				</div>
				<div class="arm-top-left-wrapper">
					<div class="arm-top-left"></div>
					<div class="arm-top-left-tip">
					</div>
					<div class="gold">
						<span class="carving">
							新年快乐
						</span>
					</div>

				</div>
				<div class="arm-top-right"></div>
				<div class="arm-top-right-tip"></div>
				<div class="back-legs">
					<div class="back-leg-left"></div>
					<div class="back-leg-right"></div>
				</div>
				<div class="paws">
					<div class="paw-left"></div>
					<div class="paw-right"></div>
				</div>
			</div>
		</div>





	</body>

</html>

 

 

喜欢爱笑的女孩子
关注
CSS3吉祥物招财猫动画特效
07-24
CSS3吉祥物招财猫动画特效是一款纯css3绘制招财猫ui布局，吉祥物小猫，摇手的招财猫动画特效。
Arduino招财猫（超声波传感器+舵机）
m0_74375998的博客
02-08 3943
Arduino招财猫（超声波传感器+舵机）
【圣诞节】简单代码实现圣诞树|圣诞贺卡 | 快来为心爱的她送上专属的圣诞礼物叭~
看世界，也找自己
12-27 1万+
圣诞节马上就要到了，不知道给自己喜欢的人准备什么样的惊喜吗？作为一名程序员，当然是用编程制作专属于她or他的圣诞树！
圣诞树网页版
全栈
12-02 3万+
圣诞树。
HTML制作圣诞树，小白都会使用的教程。
qq_62994974的博客
12-24 1万+
小白都会使用的圣诞树代码。
html+css+js高仿汤姆猫
12-15
【HTML+CSS+JS高仿汤姆猫】项目是一个适合初学者实践的Web小游戏，它通过结合HTML、CSS和JavaScript技术来实现一个类似汤姆猫的互动体验。这个项目不仅提供了一个完整的游戏框架，还包含了所有必要的图片、字体等...
纯css3绘制招财猫动画特效.zip
10-31
1. **CSS3选择器**：CSS3引入了更高级的选择器，如类选择器、ID选择器、属性选择器和伪类选择器，这些在创建招财猫动画时可能用于选中特定的HTML元素，以便进行样式控制。 2. **CSS3边框与背景**：使用CSS3，可以...
CSS3吉祥物招财猫动画特效.zip
10-09
【标题】"CSS3吉祥物招财猫动画特效.zip"是一个包含CSS3技术实现的吉祥物招财猫动画效果的资源包。这个特效代码适用于网页设计，为网站增添互动性和趣味性，尤其对于吸引用户注意力或者增加节日氛围具有积极作用。...
js调试console.log使用总结图解
热门推荐
bcbobo21cn的专栏
07-02 5万+
一 实例 打印字符串和对象； 可展开对象查看内部情况； 看一下console对象本身的定义情况； 输出对象情况； utag对象所在文件； 输出对象； 二 Console.log 总结 1 如果你js没到一个境界，我就算教你调试bug，破解一些插件之类的，你也根本不知道我在做什么。我的目的只是让你认识控制台，让你入门调试，...
送你一棵圣诞树~（HTML）
ljl20120815的博客
02-01 686
会跟着音乐声大小变化亮度的圣诞树（HTML）
css3+html5——机器猫哆啦A梦+手、脚、头动起来！
十二tel
06-10 4547
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;机器猫&lt;/title&gt; &lt;style type="text/css"&gt; *{
css实现 元素/图片上下跳动 左右跳动 css动画
小小前端攻城狮
09-30 4953
css实现 元素上下跳动 左右跳动
JavaScript调试技巧之console.log()详解
weixin_34128839的博客
06-15 1139
JavaScript调试技巧之console.log()详解 对于JavaScript程序的调试，相比于alert()，使用console.log()是一种更好的方式，原因在于：alert()函数会阻断JavaScript程序的执行，从而造成副作用；alert弹出框需要点击确认比较麻烦，而console.log()仅在控制台中打印相关信息，因此不会造成类似的顾虑。最重要的是alert只能输出字符...
ie9 提示'console' 未定义
zml6308的专栏
03-17 2108
维护的项目在ie9之下运行 没有问题，新增代码之后发现不能完整展示。打开ie的开发者工具之后又可以展示完整。找了很久没找到原因，后来发现打开开发者工具之后在控制台有一条输出语句。关掉开发者工具之后，在状态栏发现提示'console' 未定义,为什么之前的运行没有问题，之后的就不行呢？百思不得其解，后来在代码中增加下面代码： window.console = window.console ||
CSS —— 界面布局
m0_73557953的博客
09-10 1035
采用flex布局的元素，称为 Flex 容器（flex container），简称"容器"
CSS 常用元素属性
2301_79881188的博客
09-11 999
CSS 属性有很多, 可以参考文档。
响应式CSS 媒体查询——WEB开发系列39
最新发布
一条晒干的咸鱼的博客
09-15 1155
CSS媒体查询（Media Queries）是响应式设计中的核心技术之一，帮助我们在不同设备上展示不同的样式。通过媒体查询，开发者可以检测用户设备的特性，如屏幕宽度、高度、分辨率、方向等，针对性地调整网页布局。
【CSS|第1期】网页设计的演变：从表格布局到Grid布局
Commas的博客
09-15 495
互联网的兴起带来了网页设计的革命，经历了数十年的发展和演变。从最初的简单文本和图像展示，到如今的复杂交互和响应式设计，网页设计的技术和方法不断进步。今天，让我们一起回顾网页设计的发展历程，探索从表格布局到CSS、Flex布局，再到Grid布局的演变。
HTML与CSS基础学习指南
"HTML和CSS是构建网页的基础，本学习笔记主要涵盖了HTML的基本概念、结构、标签语法以及常用标签的介绍。HTML是超文本标记语言，通过标签定义网页内容和结构，如<!DOCTYPEhtml>用于声明文档类型，<html>是根元素，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

喜欢爱笑的女孩子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值