纯css画猫

最新推荐文章于 2023-03-26 14:35:36 发布
最新推荐文章于 2023-03-26 14:35:36 发布
阅读量276 收藏 1
点赞数 1
分类专栏： css html 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43840202/article/details/113787102
版权
css 同时被 2 个专栏收录
8 篇文章 0 订阅
订阅专栏
html
5 篇文章 0 订阅
订阅专栏

核心：定位，伪类，圆角，过渡，阴影

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>cat</title>
	<style type="text/css">
	*{margin:0;padding:0;}
		#cat{width: 500px;height: 500px;margin:50px auto;position: relative;}
		 #ears-left{position: absolute;left: 0px;top: 0px;width: 200px;height: 200px;background: #EE7600;
		 	border-radius: 0 100px 0 190px;
		 	transition: top .5s,left .5s,height .5s;
		 }
		#cat:hover  #ears-left{top: -10px;left: 10px;height: 210px; }
		#ears-right{position: absolute;right: 0px;top: 0px;width: 200px;height: 200px;background: #4B0082;
		 	border-radius:  100px 0 190px 0;
		 	transition: top .5s,right .5s,width .5s;
		 }
		#cat:hover  #ears-right{top: -10px;right: 10px;width: 210px; }
		#cat #face{width: 400px;height: 400px;
			border: 2px solid gray;background: white; 
			border-radius: 170px;margin:50px auto;
			overflow: hidden; position: relative;z-index: 2;}
		#cat #face #Forehead{width:160px;height: 160px;
			margin:auto;position: relative; }
		#Forehead #Forehead-left{width: 50%;height: 100%;background: #EE7600; 
			border-radius:0 0 0 80px; position: absolute;top: 0;left: 0;transition: width .3s,left .3s;}
		#Forehead #Forehead-1{width: 0;height: 100%;background: #A3A3A3;position: absolute;left: 37.5%;transition: width .3s,left .3s;}
		#Forehead #Forehead-2{width: 0;height: 100%;background: red;position: absolute;left: 62.5%;transition: width .3s,left .3s;}
		#Forehead #Forehead-right{width: 50%;height: 100%;background: #4B0082;border-radius:0 0 80px 0;
			position: absolute;left: 50%;transition: width .3s,left .3s;}
		#cat:hover  #Forehead-left{width: 25%;transition: width .3s;}
		#cat:hover  #Forehead-1{width: 25%;left: 25%; }
		#cat:hover  #Forehead-2{width: 25%;left: 50%; }
		#cat:hover  #Forehead-right{width: 25%;left: 75%; }
		#face:active #Forehead{border-radius: none;}
		#face:active #Forehead-left{width: 100%;height: 30%;left: 0;top: 5px;border-radius: 10px;
			transition: width .5s,height .5s,left .5s,top .5s,border-radius 1s;
		 }
		#face:active  #Forehead-1{width: 100%;height: 30%;left: 0;top: 36%;border-radius: 10px;
		transition: width .5s,height .5s,left .5s,top .5s,border-radius 1s;
		}
		#face:active  #Forehead-2{width: 100%;height: 30%;left: 0;top: 70%;border-radius: 10px;
		transition: width .5s,height .5s,left .5s,top .5s,border-radius 1s;
		}
		#face:active  #Forehead-right{width: 25%;height:100%;left: 37.5%;top:3px;border-radius: 10px;
		transition: width .5s,height .5s,left .5s,top .5s,border-radius 1s;
		}
		#eyes-left{position: absolute;left: 30px;top: 210px;
			width: 120px;height: 60px;
			border: 1px solid gray;
			border-bottom: none;
			border-radius: 120px 120px 0 0;
			overflow: hidden;}
		#eyes-left #eyeball{width: 20px;height: 100%;
			margin: auto;
			background:#EE7600;
			transition: width .5s; }
		#face:hover #eyeball{width: 40px; }
		#eyes-right{position: absolute;right: 30px;top: 210px;
			width: 120px;height: 60px;
			border: 1px solid gray;
			border-bottom: none;
			border-radius: 120px 120px 0 0;
			overflow: hidden;}
		#eyes-right #eyeball{width: 20px;height: 100%;
			margin: auto;
			background:#4B0082;transition: width .5s; }
		#eyes-left-b{position: absolute;left: 30px;top: 255px;
			 width: 120px;height: 30px;
			 border-top: 1px solid gray;
			 border-radius: 100%;
			 background: white;
			 transition: height .5s,width .5s,top .5s;
			}
		#face:hover #eyes-left-b{width: 150px;height: 60px; top:240px; }
		#eyes-left-b #eyes-left-b-on{width: 50%;height:50%;margin-left:20px;
			border-radius: 100%;background: #FFE4E1;
			opacity: 0;
			transition: opacity .7s; }
		#face:hover #eyes-left-b-on{opacity: 1; }
		#eyes-right-b{position: absolute;right: 30px;top: 255px;
			 width: 120px;height: 30px;
			 border-top: 1px solid gray;
			 border-radius: 100%;
			 background: white;
			 transition: height .5s,width .5s,top .5s;
			}
		#face:hover #eyes-right-b{width: 150px;height: 60px; top:240px; }
		#eyes-right-b #eyes-right-b-on{width: 50%;height:50%;float: right; margin-right: 20px;
			border-radius: 100%;background: #FFE4E1;
			opacity: 0;
			transition: opacity .7s; }
		#face:hover #eyes-right-b-on{opacity: 1; }
		#nose{position: absolute; left: 185px;top: 70%; width: 30px;height: 10px;
			border-bottom: 6px solid black;
			border-radius: 100%;}
		#mouse-l{position: absolute;left: 150px;top:73%;
			 width: 50px;height: 25px;}
		#mouse-l #mouse-left{float: right; width: 100%;height: 100%;
			border-right:4px solid black;
			border-bottom:4px solid black;
			border-radius: 0 0 25px 0;
			transition:border-radius .5s;
		}	
		#face:hover #mouse-left{border-radius: 0 0 25px 25px;}
		#mouse-r{position: absolute;right: 150px;top:73%;
			 width: 50px;height: 25px;}
		#mouse-r #mouse-right{width: 100%;height: 100%;
			border-left:4px solid black;
			border-bottom:4px solid black;
			border-radius: 0 0 0 25px;
			transition:border-radius .5s;
		}
		#face:hover #mouse-right{border-radius:0 0  25px 25px;}
		#beard-l-t{position: absolute;left: 7px;top: 185px;
			width: 60px;height:40px; 
			transform:rotate(-45deg);}
		#beard-l-t #beard-l-t-1{width: 2px; height: 30px;background:#FFB6C1; margin-left: 5px;
			 float: left;border-left: 5px solid #A1A1A1;border-bottom: 2px solid #A1A1A1;
			 border-radius: 30px 0 0 30px;
			 box-shadow: -1px 1px 3px 2px #FFB6C1;
			 transition:transform .5s;
		 }
		 #face:hover #beard-l-t-1{transform:rotate(5deg);transform-origin:left bottom; }
		#beard-l-t #beard-l-t-2{width: 6px;height: 25px;margin: 10px 0 0 10px;
			 border-radius: 30px;box-shadow: -1px 1px 6px 3px #FFB6C1; 
			 background: #A1A1A1;float: left;
			 transition:transform .5s;
		 }
		 #face:hover #beard-l-t-2{transform:rotate(7deg);transform-origin:left bottom; }
		#beard-l-t #beard-l-t-3{width: 5px;height: 35px;margin: 5px 0 0 10px;
			border-radius: 30%;box-shadow: -1px 1px 6px 3px #FFB6C1; 
			 background: #A1A1A1;float: left;
			 transition:transform .5s;
		 }
		 #face:hover #beard-l-t-3{transform:rotate(10deg);transform-origin:left bottom; }
		#beard-l-b{position: absolute;left: 20px;top: 270px;
			width: 60px;height:40px; 
			transform:rotate(8deg);}
		#beard-l-b #beard-l-b-1{width: 2px; height: 25px;background:#FFB6C1; margin-left: 5px;
			 float: left;border-left: 5px solid #A1A1A1;border-bottom: 2px solid #A1A1A1;
			 border-radius: 30px 0 0 30px;
			 box-shadow: -1px 1px 3px 2px #FFB6C1;
			 transform:rotate(-84deg);
			 transition:transform .5s;
		 }
		 #face:hover #beard-l-b-1{transform:rotate(-76deg); }
		#beard-l-b #beard-l-b-2{width: 6px;height: 20px;margin: 10px 0 5px 20px;
			 border-radius: 30px;box-shadow: -1px 1px 6px 3px #FFB6C1; 
			 background: #A1A1A1;float: left;
			transform:rotate(-110deg);
			transition:transform .5s;
		 }
		 #face:hover #beard-l-b-2{transform:rotate(-108deg); }
		#beard-r-t{position: absolute;right: 7px;top: 185px;
			width: 60px;height:40px; 
			transform:rotate(45deg);}
		#beard-r-t #beard-r-t-3{width: 2px; height: 30px;background:#FFB6C1; margin:5px 10px 0 10px;
			 float: left;border-right: 5px solid #A1A1A1;border-bottom: 2px solid #A1A1A1;
			 border-radius:0 30px 30px 0;
			 box-shadow: -1px 1px 3px 2px #FFB6C1;
			 transition:transform .5s;
		 }
		 #face:hover #beard-r-t-3{transform:rotate(-5deg);transform-origin:left bottom; }
		#beard-r-t #beard-r-t-2{width: 6px;height: 25px;margin: 10px 0 0 10px;
			 border-radius: 30px;box-shadow: -1px 1px 6px 3px #FFB6C1; 
			 background: #A1A1A1;float: left;
			 transition:transform .5s;
		 }
		 #face:hover #beard-r-t-2{transform:rotate(-7deg);transform-origin:left bottom; }
		#beard-r-t #beard-r-t-1{width: 5px;height: 35px;margin: 5px 0 0 10px;
			border-radius: 30%;box-shadow: -1px 1px 6px 3px #FFB6C1; 
			 background: #A1A1A1;float: left;
			 transition:transform .5s;
		 }
		 #face:hover #beard-r-t-1{transform:rotate(-10deg);transform-origin:left bottom; }
		#beard-r-b{position: absolute;right: 20px;top: 270px;
			width: 60px;height:40px; 
			transform:rotate(8deg);}
		#beard-r-b #beard-r-b-2{width: 2px; height: 25px;background:#FFB6C1; margin:0 0 0 10px;
			 float: left;border-left: 5px solid #A1A1A1;border-bottom: 2px solid #A1A1A1;
			 border-radius: 30px 0 0 30px;
			 box-shadow: -1px 1px 3px 2px #FFB6C1;
			 transform:rotate(-110deg);
			 transition:transform .5s;
		 }
		 #face:hover #beard-r-b-2{transform:rotate(-130deg); }
		#beard-r-b #beard-r-b-1{width: 6px;height: 20px;margin: 20px 0 5px 20px;
			 border-radius: 30px;box-shadow: -1px 1px 6px 3px #FFB6C1; 
			 background: #A1A1A1;float: left;
			transform:rotate(95deg);
			transition:transform .5s;
		 }
		 #face:hover #beard-r-b-1{transform:rotate(85deg); }
	</style>
</head>
<body>
  <div id="cat">
	<div id="face"><!-- 脸 -->
	  <div id="Forehead"><!-- 额头 -->
		<div id="Forehead-left"></div>
		<div id="Forehead-1"></div>
		<div id="Forehead-2"></div>
		<div id="Forehead-right"></div>
	  </div>
		<div id="eyes-left"><!-- 眼 -->
			<div id="eyeball"></div>
		</div>
		<div id="eyes-left-b"><!-- 眼部下方 -->
			<div id="eyes-left-b-on"></div>
		</div>
		<div id="eyes-right">
			<div id="eyeball"></div>
		</div>
		<div id="eyes-right-b"><!-- 眼部下方 -->
			<div id="eyes-right-b-on"></div>
		</div>
		<div id="nose"></div><!-- 鼻子 -->
		<div id="mouse-l"><!-- 嘴 -->
		<div id="mouse-left"></div>
		</div>
		<div id="mouse-r">
		<div id="mouse-right"></div>
		</div>
		<!-- 胡须左 -->
			<div id="beard-l-t">
				<div id="beard-l-t-1"></div>
				<div id="beard-l-t-2"></div>
				<div id="beard-l-t-3"></div>
			</div>
			<div id="beard-l-b">
				<div id="beard-l-b-1"></div>
				<div id="beard-l-b-2"></div>
			</div>
		<!-- 胡须右 -->
			<div id="beard-r-t">
				<div id="beard-r-t-1"></div>
				<div id="beard-r-t-2"></div>
				<div id="beard-r-t-3"></div>
			</div>
			<div id="beard-r-b">
				<div id="beard-r-b-1"></div>
				<div id="beard-r-b-2"></div>
			</div>
		</div>
<div id="ears-left"></div><!-- 耳朵 -->
<div id="ears-right"></div>
  </div>
</body>
</html>

demo
https://yuan30-1304488464.cos.ap-guangzhou.myqcloud.com/blog/demo/cat.html

【03】
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯CSS3绘制的小猫笑脸动画
08-29
纯CSS3绘制的小猫笑脸动画
可爱极了，用 CSS 实现一个超可爱的猫咪！
祈澈菇凉
01-09 830
介绍本期我们通过vite+scss去完成一个橘猫心情变化的创意动画，这里的逻辑我们将不使用任何js代码，仅依靠css来完成，所以，通过本期的动画，你可以到一些css动画和绘制的一些技巧。正...
html5用圆圈画猫,css画一只猫.html
weixin_29098117的博客
06-01 442
Title.container{}.face,.ear {position: absolute;width: 400px;height: 360px;left: 50%;top: 50%;margin-left: -200px;margin-top: -180px;}.face{border: 2px solid #000;z-index: 10;border-radius: 50% 50% 34...
纯CSS实现猫咪
臧小川的博客
01-10 232
效果图 index import React from 'react' import styles from './style.less' const index = () => { return ( <div> <div className={styles.container} > <div className={styles.wrapper}>
纯css小猫
一只程序媛
02-16 1202
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>纯css小猫</title> <style> *{padding:0;margin: 0;} li{list-style:none;} body{background:#f6f7f2;}
纯css3绘制卡通猫喝水动画
07-24
在本教程中，我们将深入探讨如何使用纯CSS3来创建一个可爱的卡通猫喝水的动画效果。这个动画展示了黑色的玩具机器猫正在享受喝水的过程，它利用了CSS3的强大功能，无需JavaScript或者其他编程语言，仅仅通过样式表...
纯css3绘制卡通猫喝水动画.zip
最新发布
10-15
【标题】"纯css3绘制卡通猫喝水动画.zip"是一个包含使用纯CSS3技术实现的动画效果资源。这个动画展示了卡通猫喝水的场景，适用于网页设计中的趣味元素或交互式用户体验。通过CSS3，开发者无需依赖JavaScript库如...
纯css3绘制卡通猫咪动画特效
07-24
【纯CSS3绘制卡通猫咪动画特效】是一种利用CSS3的强大功能来实现的视觉效果，它无需JavaScript或者其他图像处理工具，完全依赖于CSS3的样式规则和动画特性。这个动画特效展示了一只卡通化的黑色猫咪，既可爱又生动，...
纯css3绘制一只会笑的猫动画特效
09-08
本教程将深入探讨如何使用纯CSS3技术来创建一个会笑的猫动画特效，这是一项既有趣又有挑战性的实践项目。通过这个过程，我们可以学习到CSS3的关键帧动画、伪类选择器、变换、过渡以及盒模型等多个核心概念。 首先，...
用CSS3画了一只猫
weixin_43951592的博客
03-26 2161
CSS3画了只猫
CSS3-Tom猫动画
06-12
h5的CSS3做的tom的部分动画，请使用google浏览器或safari浏览器，不支持其他浏览器！
CSS3猫咪睡觉动画代码.zip
05-27
CSS3猫咪睡觉动画代码，猫咪在桌上睡觉动画。
css3绘制黑色可爱的小猫咪和爱心图形动画特效
W Y L
04-26 930
这个是用css3绘制黑色可爱的小猫咪，如果喜欢的你们可以试一下哦~ html代码 <body> <div class="container"> <div class="cat"> <div class="face"> <div class="ear-left"> <div class="in...
php创建一个猫咪,html5的应用-画一个可爱的小猫咪效果图
weixin_39605296的博客
03-18 340
html5是一门很强大的语言，想在非常流行，用他画的图都显得非常的漂亮还看效果截图：程序：Html5 - 小猫咪body{text-align: center;}.wrapper{ height:800px;}canvas{ margin-top: 123px;}var cvs=document.querySelector("canvas");var g=cvs.getContext("2d");...
css3绘制小猫睡觉甩尾巴
ICode联盟
08-30 137
纯css3代码绘制小猫睡觉甩尾巴动画特效。
纯CSS机器猫
Susanny339的博客
10-21 1515
基于网上各路大神所做的css机器猫的各种基础数据（各部位大小和颜色），自己也做了一个机器猫。这里做个总结和记录，以供参考。
html5 画猫全过程svg入门
家门口种果树，不怕馋
07-10 2794
下面所有信息均来自http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Getting_Started SVG，代表为S calable V ector G raphics，是XML的应用程序，使得它可以在一个紧凑的，便携的形式表示图形信息。SVG利息迅速增长，各大公司已经提供工具来创建和查看SVG文件。本章开始与计算机图形学的两大系统...
css3 画动态微笑猫的最佳实践
Ying的博客
01-10 669
由于平时工作并不经常使用css,再加上很少接触css3，导致css会有一些生疏。前些天在网上看到有人使用css3画了一只动态的猫，所以自己也想尝试一下，其实很简单，但是可以熟练一下css的布局，也给繁忙的工作增加一点小乐趣。 这是我们这次要实现的效果 访问地址smile cat html lang="en"> head> meta charset="UTF-8"
可爱猫咪，用 CSS 告诉你为何大橘为重！！
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
11-08 151
点击上方前端瓶子君，关注公众号回复算法，加入前端编程面试算法每日一题群介绍本期我们通过vite+scss去完成一个橘猫心情变化的创意动画，这里的逻辑我们将不使用任何js代码，仅依靠css...
如何使用纯css实现赛车的loader动画效果.docx
11-23
"该文档详细介绍了如何使用纯CSS技术实现一个赛车加载动画效果。通过创建DOM结构、设置样式以及利用伪元素，逐步构建出赛车及其动态旋转的车轮。" 在实现这个纯CSS赛车Loader动画时，首先要创建基本的HTML结构。...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值