利用css3画叮当猫

最新推荐文章于 2024-08-05 17:40:41 发布
最新推荐文章于 2024-08-05 17:40:41 发布
阅读量173 收藏
点赞数
文章标签： css css3 html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43633053/article/details/105060154
版权
本文详细介绍了如何借助CSS3的特性，如边框、渐变、旋转和伪元素等，来创建一个生动的叮当猫图形。通过实例代码和步骤解析，展示了在HTML5页面中实现这一创意设计的方法。
摘要由CSDN通过智能技术生成

叮当猫

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.tou{
				width: 300px;
				height: 280px;
				background: #0bb1db;
				border-radius: 150px 150px 150px 150px;
				position: relative;
                left: -211px;
				right: 0;
				top: 0;
				bottom: 0;
				margin: 30px auto;
				border:2px solid #000;
				z-index:1;
			}
			.face{
				width: 230px;
				height: 230px;
				background: #ffffff;
				position: absolute;
				left: 36px;
				top: 49px;
				border-radius: 110px 110px 110px 110px;
				border:2px solid #000;
			}
			.eye1{
				position: absolute;
				left: 78px;
				top: 18px;
				width: 60px;
				height: 70px;
				background: #ffffff;
				border-radius: 110px 110px 110px 110px;
				border:2px solid #000;
			}
			.eye2{
				position: absolute;
				left: 142px;
				top: 18px;
				width: 60px;
				height: 70px;
				background: #ffffff;
				border-radius: 110px 110px 110px 110px;
				border:2px solid #000;
			}
			.blackeye1{
				position: absolute;
				left: 110px;
				top: 67px;
				width: 15px;
				height: 15px;
				background: #000;
				border-radius: 110px 110px 110px 110px;
			}
			.blackeye2{
				position: absolute;
				left: 160px;
				top: 67px;
				width: 15px;
				height: 15px;
				background: #000;
				border-radius: 110px 110px 110px 110px;
			}
			.nose{
				position: absolute;
				left: 128px;
				top: 79px;
				width: 25px;
				height: 25px;
				background: #ca3e01;
				border:2px solid #000;
				border-radius: 110px 110px 110px 110px;
				
			}
			.mouth{
				 width:220px;
	             height:400px;
	             border-bottom:3px solid #333;
	             border-radius:110px;
	             position:absolute;
	             top:-192px;
	             left:35px;
			}
			.xian{
				 width:3px;
	             height:100px;
	             background:#333;
	             position:absolute;
	             top:108px;
	             left:142px;
			}
			.huxu{
				width: 60px;
	            height: 2px;
	            background: #333;
	            position: absolute;
			}
			.huxu1{
				top:148px;
	            left:65px;
			}
			.huxu2{
				top:148px;
	            left:167px;
			}
			.huxu3{
				top:130px;
	            left:65px;
	            transform: rotate(20deg);
			}
			.huxu4{
				top:166px;
	            left:65px;
	            transform: rotate(-14deg);
			}
			.huxu5{
				top:128px;
	            left:165px;
	            transform: rotate(-24deg);
			}
			.huxu6{
				top:166px;
	            left:165px;
	            transform: rotate(20deg);
			}
			.weibo{
				width: 230px;
	            height: 20px;
	            background: #a82300;
	            border: 2px solid #000;
	            border-radius: 10px;
	            position: relative;
	            top: -40px;
	            left: 341px;
	             z-index: 1;
			}
			.lingdang{
				 width: 40px;
	            height: 40px;
	            border: 2px solid #000;
	            border-radius: 50px;
	            background: #d7cf14;
	            position: absolute;
	            top: 307px;
	            left: 438px;
	            z-index:1;
			}
			.body{
				position: relative;
                top: -310px;
			}
			.duzi{
				width: 220px;
	            height: 165px;
	            background: #0085a8;
	            border:2px solid #333;
	            position:absolute;
	            top:265px;
	            left:346px;
	            z-index: 0;
			}
			.dudou{
				width: 170px;
                height: 170px;
                background: #fff;
                border: 2px solid #000;
                border-radius: 85px;
                position: absolute;
                left: 370px;
                top: 230px;
                z-index: 0;
			}
			.koudai{
			    width: 130px;
                height: 130px;
                border-radius: 65px;
                background: #fff;
                border: 2px solid #000;
                position:absolute;
                top: 250px;
                left: 389px;	
			}
			.bankoudai{
				width: 134px;
                height: 60px;
                background:#fff;
                border-bottom: 2px solid #000;
                position:absolute;
                top: 259px;
                left: 389px;
			}
			.hand1{
				height: 100px;
                width: 100px;
                position: absolute;
                top: 317px;
                left: 294px;
			}
			.hand2{
				height: 100px;
                width: 100px;
                position: absolute;
                top: 317px;
                left: 559px;
			}
			.arm1{
				position: relative;
				width:80px;
                height:50px;
                background: #0085a8;
				top: 17px;
                transform: rotate(145deg);
                z-index: -1;
                border:1px solid #000;
			}
			.shou1{
				position: absolute;
				left: -20px;
                top: 37px;
				width: 60px;
                height: 60px;
                border-radius: 30px;
                border: 2px solid #000;
                background: #fff;
			}
			.arm2{
				position: relative;
				width:80px;
                height:50px;
                background: #0085a8;
				top: 17px;
                transform: rotate(-145deg);
                z-index: -1;
                border:1px solid #000;
			}
			.shou2{
				position: absolute;
				left: 34px;
                top: 37px;
				width: 60px;
                height: 60px;
                border-radius: 30px;
                border: 2px solid #000;
                background: #fff;
			}
			.foot{
                position: relative;
                top: 55px;
                left: 20px;
			}
			.foot .zuojiao{
				position: absolute;
				width: 125px;
                height: 30px;
                background: #fff;
                border: 2px solid #333;
                border-radius: 80px 60px 60px 40px;
				left: 304px;
                top: 65px;
			}
			.foot .youjiao{
				position: absolute;
				width: 125px;
                height: 30px;
                background: #fff;
                border: 2px solid #333;
                border-radius: 60px 80px 40px 60px;
				left: 440px;
                top: 65px;
			}
			.yuandian{
				width: 20px;
                height: 10px;
                background: #fff;
                border: 2px solid #000;   
                border-bottom: none;
                border-radius: 40px 40px 0 0;
                position: absolute;
                top: 57px;
                left: 425px;
			}
			.jiehe1{
				top: -45px;
                left: 346px;
				height: 45px;
                width: 5px;
                background: #0085a8;
                position: relative;
			}
			.jiehe2{
				top: -85px;
                left: 565px;
				height: 45px;
                width: 5px;
                background: #0085a8;
                position: relative;
			}
		</style>
	</head>
	<body>
		<!--头部-->
		<div class="tou">
			<div class="face"></div>
			<div class="eye1"></div>
			<div class="eye2"></div>
			<div class="blackeye1"></div>
			<div class="blackeye2"></div>
			<div class="nose"></div>
			<div class="mouth"></div>
			<div class="xian"></div>
			<div class="huxu huxu1"></div>
			<div class="huxu huxu2"></div>
			<div class="huxu huxu3"></div>
			<div class="huxu huxu4"></div>
			<div class="huxu huxu5"></div>
			<div class="huxu huxu6"></div>
		</div>
		<div class="weibo"></div>
		<div class="lingdang"></div>
		<div class="body">
			<div class="duzi"></div>
			<div class="dudou"></div>
			<div class="koudai"></div>
			<div class="bankoudai"></div>
		</div>
		<div class="hand1">
			<div class="arm1"></div>
			<div class="shou1"></div>
		</div>
		<div class="hand2">
			<div class="arm2"></div>
			<div class="shou2"></div>
		</div>
		<div class="foot">
			<div class="zuojiao"></div>
			<div class="youjiao"></div>
			<div class="yuandian"></div>
		</div>
		<div class="jiehe1"></div>
		<div class="jiehe2"></div>
	</body>
</html>
止水Itachi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css3+html5——机器猫哆啦A梦+手、脚、头动起来！
十二tel
06-10 4512
&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; *{
使用CSS3画出一个叮当猫（超级可爱！）
LisenYang的专栏
08-21 4503
使用CSS3画出一个叮当猫（超级可爱！）
如何使用CSS3画出一个叮当猫
10-23
我们经常使用PS或者Flash制作动画，本文则介绍了如何用CSS3画出个叮当猫，实现过程很有趣，感兴趣的朋友可以参考一下
【基础教程】超可爱CSS3叮当猫动画（含源码）
weixin_52578018的博客
12-02 514
一、项目教程 运行效果 教程 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>超可爱CSS3叮当猫动画</title> <style> body{ margin: 0; background: lightblue; } /*哆啦A梦*/ .doa{ position: relative; to
运用css3圆角制作一只叮当猫
Mavis2的博客
03-22 240
1.了解border-radius属性 border-radius:0px;一个值时调四个角的圆角 border-radius:0px 0px;两个值时调左上右下、右上左下 border-radius:0px 0px 0px;三个值时调左上、右上左下、右下 border-radius:0px 0px 0px 0px;四个值时调左上、右上、右下、左上 border-radius:0px 0px 0...
css3画一个三角形,css3 画三角形
weixin_39979245的博客
08-03 333
/*箭头向上*/.arrow-up {width:0;height:0;border-left:20px solid transparent;border-right:20px solid transparent;border-bottom:20px solid #000;}/*箭头向下*/.arrow-down {width:0;height:0;border-left:20px solid t...
使用CSS3画出一个叮当猫
chongxingyao9274的博客
04-24 220
刚学习了这个案例，然后觉得比较好玩，就练习了一下。然后发现其实也不难，如果你经常使用PS或者Flash的话，应该就会知道画个叮当猫是很容易的事，至少我是这么觉得。但是，用CSS3画出来确实是第一次接触，所以很乐意去尝试一下，对于我这种菜鸟，确实是帮助不少，至少懂得如何去画一个简单的...
python叮当猫代码_详细介绍一个利用html+css实现叮当猫的实例代码
weixin_39558804的博客
12-05 677
用html画出来确实是第一次接触，所以很乐意去尝试一下，对于我这种菜鸟，确实是帮助不少，至少懂得如何去画一个简单的人物形象出来，再加上一些动画效果，就活了，那就更好玩了！OK，开始之前，先把效果图晒一下：最终效果图PS:说实话，我觉得挺可爱的，小时候经常看多啦A梦，突然感觉很亲切，很童真，瞬间年轻了好多，哈哈！首先，先把HTML结构搭建好：最好先把叮当猫的整体结构仔细研究一下，这对以后想要自己动手...
新增CSS3绘制叮当猫DEMO.zip
08-25
《CSS3绘制叮当猫DEMO》是一个使用JavaScript前端技术实现的创新项目，它展示了如何利用现代Web技术来创建生动有趣的交互式图形。这个案例主要依赖于CSS3的强大功能，尤其是其在2D绘图方面的特性，使得我们可以不...
超可爱的CSS3叮当猫动画特效
08-23
本篇文章将深入探讨“超可爱的CSS3叮当猫动画特效”这一主题，这是一项利用CSS3特性实现的创新性动画设计。 首先，我们要明白CSS3新增了许多功能，其中最引人注目的是动画（Animations）和过渡（Transitions）。...
纯css代码画大白
09-22
最近学习了网上一个用css画叮当猫的教程，这是根据那个教程改写了近期全网爆红的3D形象-大白。这个形象首先我个人非常的喜欢，而且结构简单，非常适合新手用于学习。
叮当猫.py
03-17
python绘图源码，简单可运行，放心下载，感兴趣的朋友可以下载玩一玩
JavaWeb基础1：HTML/CSS/JS/HTTP
m0_53842576的博客
08-05 469
JavaWeb基础1：HTML/CSS/JS/HTTP (qq.com)
4个自定义倒计时
lulei5153的博客
08-03 354
【代码】4个自定义倒计时。
CSS实现元素hover时背景色拉伸渐变
p_s_p的博客
08-05 982
【代码】CSS实现元素hover时背景色拉伸渐变。
HTML&CSS
m0_73620971的博客
08-05 1131
1、 是一个单标签。2、img 标签必须具有 src 属性，a 标签必须具有 href 属性。3、input 标签中必须指明 type 属性，其中提交按钮必须放至 form 标签内。4、类选择器前缀为 "."，ID选择器前缀为 "#"。
CSS学习 02 利用鼠标悬停制造按钮边框的渐变方向变化
最新发布
weixin_57266891的博客
08-05 289
的按钮元素，按钮类型为。
html制作卡通图案代码,使用HTML和CSS3绘制基本卡通图案的示例分享
爱敲代码的卡拉米的博客
08-03 618
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
python利用turtle画图画出叮当猫
05-30
# 画叮当猫的头部 def draw_head(): turtle.penup() turtle.goto(0, 100) turtle.pendown() turtle.circle(100) # 画叮当猫的眼睛 def draw_eyes(): turtle.penup() turtle.goto(-40, 140) turtle.pendown()...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值