纯CSS实现汉克狗动画效果

最新推荐文章于 2023-09-18 14:12:56 发布
最新推荐文章于 2023-09-18 14:12:56 发布
阅读量623 收藏 2
点赞数
文章标签： html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36937220/article/details/100862300
版权 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>汉克狗案例</title>
	<style type="text/css">
		:root{
			--hl:#1b2f90;
			--bg:#f9f9f6;
			--t:2s;
		}
		body{
			background: #ffc400;
		}
		.dog{
			width: 300px;
			height:400px;
			position: relative;
		}
		.center{
			position:absolute;
			left: 50%;
			transform: translate(-50%,0);
			z-index: 1;
		}
		.forehead{
			width: 102px;
			height: 48px;
			background: var(--bg);
			/*margin-left:-51px;*/
			border-radius: 51px/40px 40px 8px 8px; 
		}
		.face{
			width: 110px;
			height:68px;
			top: 20px;
			background: var(--bg);
			border-radius: 50px; 
		}
		.chin{
			width: 104px;
			height:36px;
			top: 60px;			
			background: var(--bg);
			border-radius:52px/0 0 36px 36px;
		}
		.ear{
			width: 16px;
			height:70px;
			background: var(--hl);
			border-radius:50%;
			position:absolute;
			left: 50%;
			top: 34px;
			transform: translate(-42px,0) rotate(10deg);
			transform-origin: 50% 0;
			z-index: 0;
			animation:rotate var(--t) ease-out infinite;
		}
		.ear.right{
			transform:scale(-1,1) translate(-26px,0) rotate(10deg);
			animation:rotate-r var(--t) ease-out infinite;
		}
		.eye{
			width: 24px;
			height:24px;
			background: var(--bg);
			border-radius:12px/13px 12px 12px 0;
			position:absolute;
			z-index:2;
			left: 50%;
			top:20px;
			transform: translate(-40px,0) rotate(10deg);
			transform-origin: 50% 0;
			box-shadow: 1px 0 0 0 #000 inset,-1px 0 5px 1px #ddd;
			z-index:2;
			overflow:hidden;
		}
		.eye.right{
			transform:scale(-1,1) translate(-17px,0) rotate(10deg);
			box-shadow: 1px 0 0 0 #000 inset;
		}
		.birthmark{
			width: 30px;
			height:36px;
			background: var(--hl);
			border-radius:15px/17px 23px 2px 13px;
			position:absolute;
			z-index:1;
			left: 50%;
			top: 10px;
			transform:translate(14px,0) rotate(-10deg);
		}
		.eye .eyeball{
			width: 26px;
			height:26px;
			background: #e79101;
			border-radius:50%;
			position:absolute;
			left: 3px;
			top: 1px;
			box-shadow:  0 0 8px 0 #000 inset;
			animation:translate var(--t) ease-out infinite;
		}
		.eyeball::before {
			width: 18px;
			height:18px;
			border-radius:50%;
			background:#000;
			position:absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			content: '';
		}
		.eyeball::after {
			width: 5px;
			height:5px;
			border-radius:50%;
			background:#fff;
			position:absolute;
			left: 7px;
			top: 9px;
			transform: translate(-50%,-50%);
			content: '';
		}
		.nose{
			width:62px;
			height: 32px;
			top: 42px;
			background:#363035;
			z-index:3;
			border-radius:50%/10px 10px 22px 22px;
		}
		.nose:before{
			content:'';
			width:60px;
			height:10px;
			position:absolute;
			left: 50%;
			top: 1px;
			transform: translate(-50%,0);
			border-radius:50%/8px 8px 2px 2px;
			background:linear-gradient(10deg,#fff 0%,#fff 8%,#b1aeb1 15%,#b1aeb1 50%,#544d53 100%);
		}
		.nostril{
			width:15px;
			height: 4px;
			top: 22px;
			background:linear-gradient(0deg,#363035 0%,#000 100%);
			z-index:2;
			border-radius:50%/10px 10px 22px 22px;
			position:absolute;
			left: 50%;
			transform: translate(-21px,0) rotate(30deg);
			animation:resizes var(--t) ease-out infinite;
		}
		.nostril.right{
			transform:scale(-1,1) translate(-7px,0) rotate(30deg);
		}
		.mouth{
			width:68px;
			height: 25px;
			top: 70px;
			background:#671316;
			z-index:2;
			border-radius:50%/0px 0px 27px 27px;
			box-shadow: 0 0 4px 0 #000 inset;
			animation:open var(--t) ease-out infinite;
		}
		.mouth:before{
			background: var(--bg);
			width: 68px;
			height: 8px;
			border-radius:50%/0 0 5px 5px;
			content: '';
			position:absolute;
			top: 0;
			left: 0;
			z-index:2;
		}
		.teen{
			width: 8px;
			height: 3px;
			background:#fff;
			border-radius:50%/0 0 0px 1px;
			position:absolute;
			top: 7px;
			left: 50%;
			transform:translate(-100%,0);
			z-index:1;
		}
		.teen.right{
			transform:scale(-1,1) translate(0,0);
			border-right: .5px solid #ddd;
			z-index:1;
		}
		.tongue{
			width:34px;
			height: 14px;
			top: 0px;
			background:#a2504f;
			z-index:0;
			border-radius:50%/0px 0px 7px 7px;
			box-shadow: 0 0 4px 0 #111 inset;
			animation:extend var(--t) ease-out infinite;
		}
		.body{
			width:66px;
			height:70px;			
			background:var(--bg);
			top: 89px;
			border-radius:50%;
		}
		.arm{
			width:26px;
			height:40px;			
			background:var(--bg);
			position:absolute;
			top: 5px;
			left: 50%;
			border-radius:50%/20px 0 0 20px;
			transform:translate(-43px,0) rotate(21deg);
		}
		.arm:before{
			content:'';
			width: 5px;
			height: 20px;
			border-radius:50%/10px 0 0 10px;
			right: 7px;
			top: 14px;
			position:absolute;
			transform:rotate(-5deg);
			box-shadow: -1px 0 0 0 rgba(200,200,200,.5)
		}
		.arm.right{
			transform: scale(-1,1) translate(-17px,0) rotate(21deg);
		}
		.leg{
			width:29px;
			height:50px;			
			background:linear-gradient(-90deg,#eee 0%,#fff 20%,#fff 100%);
			position:absolute;
			top: 40px;
			left: 50%;
			border-radius:50%/5px 5px 15px 45px;
			transform:translate(-33px,0);
		}
		.leg.right{
			transform: scale(-1,1) translate(-3px,0);
		}
		.foot{
			width: 29px;
			height: 15px;			
			background:linear-gradient(-120deg,#bbb 0%, #eee 20%,#fff 20%,#fff 100%);
			position:absolute;
			bottom: -29px;
			left: 2px;
			border-radius:50%/10px 10px 5px 5px;
		}
		.foot.right{
			transform: scale(-1,1) translate(-33px,0);
		}
		.belly{
			width: 60px;
			height: 36px;
			z-index: 2;
			background:linear-gradient(0deg,#ddd 0%,#fff 20%,#fff 100%);
			border-radius:50%/0px 0px 36px 36px;
			top: 34px;
		}
		@keyframes rotate{
			0%{transform: translate(-42px,0) rotate(10deg);}
			50%{transform: translate(-42px,0) rotate(30deg);}
			100%{transform: translate(-42px,0) rotate(10deg);}
		}
		@keyframes rotate-r{
			0%{transform:scale(-1,1) translate(-26px,0) rotate(10deg);}
			50%{transform:scale(-1,1) translate(-26px,0) rotate(30deg);}
			100%{transform:scale(-1,1) translate(-26px,0) rotate(10deg);}
		}
		@keyframes translate{
			0%{left: 3px;}
			50%{left: 6px;}
			100%{left: 3px;}
		}
		@keyframes resizes{
			0%{height: 4px;}
			50%{height: 3px;}
			100%{height: 4px;}
		}
		@keyframes extend{
			0%{height: 14px;}
			50%{height: 23px;}
			100%{height: 14px;}
		}
		@keyframes open{
			0%{height: 25px;border-radius:50%/0px 0px 27px 27px;}
			50%{height: 18px;border-radius:50%/0px 0px 20px 20px;}
			100%{height: 25px;border-radius:50%/0px 0px 27px 27px;}
		}
	</style>
</head>
<body>
	<div class="dog center">
		<div class="forehead center"></div>  <!-- 额头 -->
		<div class="face center"></div>	<!-- 	脸颊 -->
		<div class="chin center"></div>		<!-- 下巴 -->
		<div class="ear"></div>		<!-- 左耳朵 -->
		<div class="ear right"></div>	<!-- 右耳朵 -->
		<div class="birthmark"></div>
		<div class="eye">
			<div class="eyeball"></div>
		</div>   <!-- 左眼 -->
		<div class="eye right">
			<div class="eyeball right"></div>
		</div> <!-- 右眼 -->
		<div class="nose center">   <!-- 鼻子 -->
			<div class="nostril"></div> <!-- 左鼻孔 -->
			<div class="nostril right"></div><!-- 右鼻孔 -->
		</div>
		<div class="mouth center"><!-- 嘴巴 -->
			<div class="teen"></div><!-- 左牙齿 -->
			<div class="teen right"></div><!-- 右牙齿 -->
			<div class="tongue center"></div><!-- 舌头 -->
		</div>
		<div class="body center"><!-- 身体 -->
			<div class="arm"></div><!-- 左手臂 -->
			<div class="arm right"></div><!-- 右手臂 -->
			<div class="leg"></div><!-- 左脚 -->
			<div class="leg right"></div><!-- 右脚 -->
			<div class="foot"></div><!-- 左脚掌 -->
			<div class="foot right"></div><!-- 右脚掌 -->
			<div class="belly center"></div>
		</div>
	</div>
</body>
</html>

实现效果图：

玛丽大
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
纯css3卡通小狗动画特效
04-25
纯css3卡通小狗动画特效是一款基于html和css3简单实现的摇尾巴的小黄狗动画特效。
CSS3之动画狗
lbs311709000127的博客
01-30 341
这个会动的哦，今天花了一下午的时间做的。 效果： html代码： <!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"/> <title></title> <link rel="stylesheet" href="3.css"> ...
纯CSS编写汉克狗
weixin_33788244的博客
04-27 92
1，CSS中原生的变量定义语法是：--*，变量使用语法是：var(--*)，其中*表示我们的变量名称；在CSS变量命名中，不能包含$，[，^，(，%等字符，普通字符局限在只要是“数字[0-9]”“字母[a-zA-Z]”“下划线_”和“短横线-”这些组合，但是可以是中文，日文或者韩文，因此CSS变量命名是有限制的。 转载于:https://www.cnblogs.com/Knowledge-i...
11-11光棍节，用CSS如何画dog
qq_43477721的博客
11-11 346
为了狗狗不孤单，我们就画两只吧 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://s3.p..
html5 小狗动画,css
weixin_33859693的博客
06-09 175
css*, *::after, *::before {margin: 0;padding: 0;box-sizing: border-box;user-select: none;}/* Generic */body {width: 100%;height: 100vh;display: flex;justify-content: center;align-items: center;backgro...
可爱的汉克狗CSS3特效.zip
最新发布
10-15
总的来说，《可爱的汉克狗CSS3特效.zip》结合了CSS3的动画、选择器、媒体查询等特性，以及jQuery的便利操作，实现了趣味盎然的网页交互效果。对于学习和实践Web前端开发的人员来说，这是一个很好的参考资料，不仅...
基于快速傅里叶变换和汉克耳变换的逆阿贝尔变换
02-11
激光等离子体实验中的轴对称的X光的体发射强度及光学全息干涉的测量, 需要采用逆阿贝尔(Abel)变换。 用快速傅里叶变换(FFT)和汉克耳(Hankel)变换的算法数值求解逆阿贝尔变换, 具有精度高、 可在频域内滤波的特点。
巧克力：汉克成分库
02-12
巧克力：汉克的组件库 生活就像一盒巧克力。 在Hank，巧克力是一盒视觉组件和用于构建UI的默认主题。 该项目是WIP，将随着Hank产品的增长而反复进行。 安装 yarn add @hank-technology/chocolates 组件 主题 汉克的...
傅里叶反变换matlab代码-DiscreteHankelTransform:离散汉克变换
05-21
完整的理论可以在《离散汉克变换：连续汉克变换的性质和应用》中找到，《美国光学学会杂志》 A卷，第1期。 32，No. 4，pp.611-622，2015。 可以在Chouinard U，Baddour N.（2017）中找到此代码及其用法的说明。 离散...
H3K3L:汉克·特罗克斯
03-29
拉蒂夫·德沃波勒（Latif Devoleper） 已建立 :red_heart: 由 在Termux上安装脚本 > pkg update && pkg upgrade > pkg install python2 > pip2 install requests bs4 > pkg install git ...运行脚本 ...
纯CSS3画一个狗子
yuan
05-27 302
纯CSS3画一个狗子 效果展示 代码 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>狗子</title> </head> <body> <div class="dog"> <!-- 头部 --> <div class="h
html+css: 小狗动画
renjingzhaozhao的博客
05-19 1236
body <div class="main"> <div class="dog"> <div class="dog__paws"> <div class="dog__bl-leg leg"> <div class="dog__bl-paw paw"></div> <div class="dog__bl-top top">...
html 轮播带标题滚动,JavaScript实现带标题的图片轮播特效
m0_74012486的博客
02-03 210
1
【CSS】动画animation所含各项参数内容
Evenurs的url
06-09 6477
主要描述CSS3中，对于animation动画效果设置语句中，各个参数的详细说明，以及范例代码。
css3动画基础详解（@keyframes和animation）
漫天随飞雪的博客
09-18 1444
动画是使元素从一种样式逐渐变化为另外一种效果，CSS3动画的生成，主要依赖@keyframes定义动画，animation执行动画。
CSS3-动画
m0_52660785的博客
07-22 400
CSS3动画
css3基础-动画案例（没啥实用性，纯粹好玩的）
zhoumouren88的博客
08-17 178
会动的汉克狗： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Cartoon Dog</title> </head> <body> <div class="dog"> <div class="head"> <di...
css 按钮扩散效果,专治按钮效果不明显（扩散动画效果）
weixin_28718755的博客
08-04 1532
效果需求背景由于最近自家小程序用户活跃用户下滑，老板看看自家小程序，发现分享按钮不够明显，于是乎有了下面这段对话。老板：小明，你过来下，看看这个分享按钮不明显小明：好的，给它点颜色瞧瞧小明给按钮来了个红色，发给了BOSSBOSS：还是不明显小明：好的，给它点放大瞧瞧小明把按钮从原来的60rpx放大到了230rpx，发给了BOSSBOSS：还是不明显小明：好的，让它动起来！需求：提高分享率，做个扩散...
集装箱托举装置使用柱销式叶片泵好不好
05-30
柱销式叶片泵（也称为德国汉克汉克叶片泵）是一种高压、高效的液压泵，适用于高速、高压的液压系统。但是，对于集装箱托举装置这种低速、高扭矩的应用场景，柱销式叶片泵并不是最佳选择。 在集装箱托举装置中，一般...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值