关于css3动画---生动的小黄人

最新推荐文章于 2024-01-26 13:46:22 发布
最新推荐文章于 2024-01-26 13:46:22 发布
阅读量175 收藏 1
点赞数 1
分类专栏： 小白学前端 css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zyl_ziyinling/article/details/86307869
版权

通过此案例，你会对css3的动画有一个深入且生动的了解。 调皮的小黄人了解一下。。。（虽然参照别人的案例，但是学到就是自己的哦?，简单的制作了一个gif，正常编写的效果很生动有趣） 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>yellow human</title>
	<style>
		.container{
			width:300px;
			margin:70px auto;
		}
		.yellow-boy{
			position:relative;
		}
		.body{
			position:absolute;
			width: 240px;
			height: 400px;
			border:5px solid #000;
			border-radius:115px;
			background:rgb(249,217,70);
			overflow:hidden;
		}
		.pants{
			height:100px;
			width:100%;
			position:absolute;
			bottom:0;
			border-top:6px solid #000;
			background:rgb(32,116,160);
		}
		.belt-left{
			width: 100px;
			height: 16px;
			background: rgb(32, 116, 160);
			position:absolute;
			top:-90px;
			left:-35px;
			z-index:1;
			border: 5px solid #000;
			transform:rotate(45deg);
		}
		.belt-left:after{
			content:'';
			width:8px;
			height:8px;
			background:#000;
			position:absolute;
			top: 4px;
			left: 88px;
			border-radius:50%;
		}
		.belt-right{
			width: 100px;
			height: 16px;
			background: rgb(32, 116, 160);
			position:absolute;
			top:-90px;
			left:165px;
			z-index:1;
			border: 5px solid #000;
			transform:rotate(-45deg);
		}
		.belt-right:after{
			content:'';
			width:8px;
			height:8px;
			background:#000;
			position:absolute;
			top:4px;
			left:4px;
			border-radius:50%;
		}
		.rectangle{
			width: 160px;
			height: 60px;
			border-radius:0 0 5px 5px;
			border:6px solid #000;
			border-bottom:none;
			background:rgb(32,116,160);
			position:absolute;
			bottom:100px;
			left:34px;
		}
		.pocket{
			width: 60px;
			height: 45px;
			position:absolute;
			bottom:65px;
			left:85px;
			border:5px solid #000;
			border-radius: 0 0 25px 25px;
		}
		.line-left{
			width: 35px;
			height: 35px;
			border-radius: 0 0 50px 0;
			border-right:5px solid #000;
			border-bottom:5px solid #000;
			position:absolute;
			top:5px;
		}
		.line-right{
			width: 35px;
			height: 35px;
			border-radius: 0 0 0 50px;
			border-left:5px solid #000;
			border-bottom:5px solid #000;
			position:absolute;
			top:5px;
			right:0;
		}
		.line-bottom{
			width: 35px;
			height: 45px;
			border-right:5px solid #000;
			position: absolute;
			bottom: 0;
			left: 82px;
		}
		.left-one{
			width: 55px;
			height: 55px;
			border-right: 8px solid #000;
			border-top-right-radius: 80px;
			position: absolute;
			top: -43px;
			left: 60px;
			z-index: -1;
			-webkit-transform: rotate(-20deg);
		    -webkit-animation:hair-left-one 2s ease-in-out infinite;
		}
		@keyframes hair-left-one{
			30%{
				position: absolute;
                top: -40px;
				left: 59px;
				rotate(-30deg);
			}
		}
		.left-two{
			width: 40px;
			height: 40px;
			border-right: 5px solid #000;
			border-top-right-radius: 50px;
			position: absolute;
			top: -27px;
			left: 70px;
			z-index: -1;
			-webkit-transform: rotate(-30deg);
		}
		.eyes-left,.eyes-right{
			width: 85px;
			height: 85px;
			border:6px solid #000;
			background:white;
			border-radius:50%;
			position:absolute;
			top:60px;
			left:27px;
			
		}
		.eyes-left:after {
			position: absolute;
			left: -30px;
			top: 37px;
			content: '';
			width: 28px;
			height: 18px;
			background: #000;
			-webkit-transform: skewX(20deg) rotate(7deg);
		}
		.eyes-right{
			left:124px;
		}
		.eyes-right:after {
			position: absolute;
			left: 88px;
			top: 37px;
			content: '';
			width: 28px;
			height: 18px;
			background: #000;
			-webkit-transform: skewX(-20deg) rotate(-7deg);
		}
		.left-eye-black{
			width: 40px;
			height: 40px;		
			border-radius:50%;
			background:#000;
			position:absolute;
			left: 22px;	
			top:24px;
			-webkit-animation:black-animation 5s ease-in-out infinite;
		}
		@keyframes black-animation{
			0%, 20%, 50%, 70%, 100%{
				-webkit-transform: translateX(0px);
			}
			30%, 40%{
				-webkit-transform: translateX(15px);
			}
			80%, 90%{
				-webkit-transform: translateX(-15px);
			}
		}
		.left-eye-white{
			width: 20px;
			height: 20px;
			background:#fff;
			border-radius:50%;
			position:absolute;
			top:7px;
			left:17px;
			-webkit-animation:white-animation 5s ease-in-out infinite;
		}
		@keyframes white-animation{
			0%, 20%, 50%, 70%, 100%{
				-webkit-transform: translateX(0px);
			}
			30%, 40%{
				-webkit-transform: translate3d(3px,4px,0);
			}
			80%, 90%{
				-webkit-transform: translate3d(-15px,4px,0);
			}
			
		}
		.right-eye-black{
			width: 40px;
			height: 40px;		
			border-radius:50%;
			background:#000;
			position:absolute;
			left: 22px;	
			top:24px;
			-webkit-animation:black-animation 5s ease-in-out infinite;
		}
		.right-eye-white{
			width: 20px;
			height: 20px;
			background:#fff;
			border-radius:50%;
			position:absolute;
			top:7px;
			left:17px;
			-webkit-animation:white-animation 5s ease-in-out infinite;
		}
		.mouse{
			width: 55px;
			height: 35px;
			border:5px solid #000;
			border-bottom-left-radius: 35px;
			-webkit-transform:rotate(-35deg);
			position:absolute;
			top: 175px;
			left: 96px;
			-webkit-animation:mouse-animation 3s ease-in-out infinite;
		}
		@keyframes mouse-animation{
			50% {
                    top: 180px;
                    width: 42px;
                    height: 25px;
                }
		}
		.mouse:after{
			content:'';
			width: 76px;
			height: 35px;
			background:rgb(249,217,70);
			border-bottom:5px solid #000;
			position:absolute;
			top: -18px;
			left: -1px;
			-webkit-transform:rotate(35deg);
			-webkit-animation:mouse-shape 3s ease-in-out infinite;
		
		}
		@-webkit-keyframes mouse-shape {
            50% {
                top: -20px;
                left: 2px;
                width: 59px;
            }
        }
		.arms-left{
			width: 70px;
			height: 70px;
			border:5px solid #000;
			border-bottom-left-radius: 25px;
			background: rgb(249, 217, 70);
			-webkit-transform:rotate(45deg);
			position: absolute;
			top: 230px;
			left: -35px;
			z-index: -1;
			-webkit-animation:arms-left-animation 3s ease-in-out infinite;
		}
		.arms-left:after{
			content:'';
			width: 15px;
			height: 15px;
			border-left:5px solid #000;
			border-bottom:5px solid #000;
			border-bottom-left-radius:10px;
			background:#fff;
			position:absolute;
			top:28px;
			left:22px;
		}
		@keyframes arms-left-animation{
			30%{
				left: -28px;
				-webkit-transform:rotate(35deg); 
			}
		}
		.arms-right{
			width: 70px;
			height: 70px;
			border:5px solid #000;
			border-top-right-radius: 25px;
			background: rgb(249, 217, 70);
			-webkit-transform:rotate(45deg);
			position: absolute;
			top: 236px;
			left: 205px;
			z-index: -1;
			-webkit-animation:arms-right-animation 3s ease-in-out infinite;
		}
		.arms-right:after{
			content:'';
			width: 15px;
			height: 15px;
			border-right:5px solid #000;
			border-top:5px solid #000;
			border-top-right-radius:10px;
			background:#fff;
			position:absolute;
			top:22px;
			left:28px;
		}
		@keyframes arms-right-animation{
			30%{
				left: 198px;
				-webkit-transform:rotate(55deg); 
			}
		}
		.feet{
			position: absolute;
			top:400px;
		}
		.left-foot{
			position: absolute;
			top:-2px;
			left:90px;
			width:20px;
			height:50px;
			border:5px solid #000;
			border-bottom-right-radius: 10px;
			background: #000;
			z-index: -1;
			-webkit-animation: foot-left 0.8s ease-in-out infinite;
		}
		@-webkit-keyframes foot-left{
			0%, 50%, 100%{
				-webkit-transform: rotate(0deg);
			}
			30%{
				-webkit-transform: rotate(10deg);
			}
		}
		.left-foot:after{
			content: '';
			position: absolute;
			width: 50px;
			height:25px;
			left: -35px;
			top: 20px;
			border: 5px solid #000;
			background: #000;
			border-bottom-right-radius: 10px; 
			border-bottom-left-radius: 20px;
			border-top-left-radius: 25px;
		}
		.right-foot {
            position: absolute;
            top: -2px;
            left: 130px;
            width: 20px;
            height: 50px;
            border: 5px solid #000;
            border-bottom-left-radius: 10px;
            background: #000;
            z-index: -1;
            -webkit-animation: foot-right 0.8s ease-in-out infinite;
        }           
        .right-foot:after {
            content: '';
            position: absolute;
            left: -3px;
            top: 20px;
            width: 50px;
            height: 25px;
            border: 5px solid #000;
            background: #000;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 20px;
            border-top-right-radius: 25px;
        }
		@-webkit-keyframes foot-right {
            0%, 50%, 100% {
                -webkit-transform: rotate(0deg);
            }
            80% {
                -webkit-transform: rotate(-10deg);
            }
        }
		.shadow{
			position: absolute;
            top: 460px;
            left: 25px;
            width: 200px;
            height: 2px;
			border-radius: 50%;
			background: rgba(0, 0, 0, 0.3);
			box-shadow: 0 0 2px 4px rgba(0, 0, 0, 0.3)
		}   
	</style>
</head>
<body>
	<div class="container">
		<div class="yellow-boy"><!--身体-->
			<div class="body">
			
				<div class="pants"><!--裤子-->
					<div class="belt"><!--背带-->
						<div class="belt-left"></div>
						<div class="belt-right"></div>
					</div>
					<div class="rectangle"></div><!--肚兜-->
					<div class="pocket"></div><!--小兜-->
					<div class="line-left"></div>
					<div class="line-right"></div>
					<div class="line-bottom"></div>
				</div>
			</div>
			
			<div class="hair"><!--头发-->
				<div class="left-one"></div>
				<div class="left-two"></div>
			</div>
			
			<div class="eyes"><!--眼睛-->
				<div class="eyes-left">
					<div class="left-eye-black">
						<div class="left-eye-white"></div>
					</div>
				</div>
				<div class="eyes-right">
					<div class="right-eye-black">
						<div class="right-eye-white"></div>
					</div>
				</div>
			</div>
			
			<div class="mouse"></div><!--嘴巴-->
			<div class="arms"><!--胳膊-->
				<div class="arms-left"></div>
				<div class="arms-right"></div>
			</div>
			
			<div class="feet"><!--双脚-->
                <div class="left-foot"></div>
                <div class="right-foot"></div>
            </div>
			
			<!--脚底阴影-->
            <div class="shadow"></div>
		</div> 
	</div>
</body>
</html>

 

 

追风少女
关注
专栏目录
CSS动画实现 正方体 球体
weixin_42069386的博客
12-08 392
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;正方体&lt;/title&gt; &lt;style&gt; *{ margin: 0;
CSS 动画
Lover
07-27 674
css动画animate，各种动画效果。 小部分效果： 这个css动画原网站http://daneden.me/animate。 例子代码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;link rel="stylesheet" href="css/
css animate动画demo
凌风的博客
12-20 1212
页面下滑指引的小箭头 &lt;div class="next_guide_icon"&gt;&lt;img src="/Images/ting/float_top_icon.png"&gt;&lt;/div&gt; /*小箭头上下移动*/ @keyframes guide_icon { 0% { transform: translateY(0); } 2...
css3的动画属性
back_glim的博客
03-01 155
css3的动画属性 通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片。 关键帧 关键帧的定义： 不同于过渡动画只能定义首尾两个状态，关键帧动画可以定义多个状态，或者用关键帧的话来说，过渡动画只能定义第一帧和最后一帧这两个关键帧，而关键帧动画则可以定义任意多的关键帧，因而能实现更复杂的动画效果。 制作css3动画首页需要的就是建立关键帧，建立关键帧的代码伪 @keyframes ...
纯css制作loading动画
weixin_34390105的博客
04-02 154
通常loading动画都是使用图片，其实简单的loading动画用css就可以完全做到。 先上代码 html <div class="loading"> <div class="left"></div> <div class="right"></div> </div> 复制代码css .loading { widt...
CSS3实现可爱的小黄人动画
09-24
在本示例中，我们将探讨如何使用CSS3来创建一个可爱的小黄人动画。这个动画涉及到多个CSS3的关键特性，包括但不限于`perspective`、`perspective-origin`、`transform-style`、`transform-origin`、`animation`、`@...
CSS3绘制小黄人头像动画代码.zip
07-03
在本项目中，我们主要探讨的是如何利用CSS3这一强大的样式表语言来创建一个动态的小黄人头像动画。CSS3不仅提供了丰富的选择器、布局模式，还引入了许多新的动画和过渡特性，使得网页设计更加生动有趣。在这个“CSS3...
纯CSS3打造属于自己的“小黄人”
01-19
效果就像这样： 不废话，直接上代码！...纯CSS3画出小黄人并实现动画效果</title>  <Link href=index.css type=text/css rel=stylesheet />  </head>  <body>  <!–容器–> 
CSS3绘制小黄人头像动画特效代码
03-20
【CSS3绘制小黄人头像动画特效代码】是一个利用CSS3的强大功能来创建动态的、生动的小黄人头像的实例。这个项目展示了CSS3在网页设计中的灵活性和创新性，尤其是对于图形渲染和动画效果的实现。下面将详细阐述CSS3在...
微信网页动画---swiper.animate.css
aizhanqian5077的博客
04-27 123
项目需要，自己写了个demo <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalabl...
css 渐变、圆角、制作球体、气泡动画
weixin_33737134的博客
11-01 316
css 渐变、圆角、制作球体、气泡动画 制作一个球体 制作一个基本图形圆 // 基本图形 &lt;figure class="circle"&gt;&lt;/figure&gt; // css .circle { display: block; background: black; border-radius: 50%; height: 300px; width: 300...
HTML/CSS实现可爱的404动画 很逗的机器人模板源码（附带源码）
最新发布
二当家的
01-26 455
​ 很久以前我在网上看到一篇帖子，是专门分享创意404页面的，很可惜我已经找不到了。但是今天我找到一款利用HTML5实现的404机器人动画，当你进入该404页面时，就会出现一个机器人在跳舞，非常可爱。这个机器人跳舞的动作是利用HTML5和CSS3的动画属性实现的，一起来看看。
机器人走路动作_CSS3 很棒的机器人行走（步行）动画模拟
weixin_39995764的博客
12-23 573
CSS语言：CSSSCSS确定* {margin: 0;padding: 0;}body {background: #123752;height: 100%;}#robot {position: relative;height: 78vh;width: 20vh;margin: 0 auto;animation: robot 2s infinite ease-in-out;z-index: 2;}...
机器人样子变化CSSjs特效
ICode联盟
09-09 158
机器人样子变化CSS特效。
分享9款用HTML5/CSS3制作的动物人物动画
weixin_30322405的博客
05-07 683
1、纯CSS3绘制可爱的蚱蜢 还有眨眼动画 今天我们要分享一个利用纯CSS3绘制的蚱蜢动画，非常可爱. 在线演示 源码下载 2、HTML5 Canvas头发飘逸动画 很酷的HTML5动画 HTML5 Canvas动画非常炫酷，很多有创意的开发者可以利用HTML5的Canvas特性创造出很多不错的动画特效。今天我们要分享一款HTML5 Canvas头发飘逸动画，该动画模拟头发飘动的效果...
使用CSS line-height属性提高可读性
08-15 152
In this article, you will learn about the CSS line-height property and how you can use it to create visually pleasant, readable text. 在本文中，您将学习CSS line-height属性，以及如何使用它来创建视觉上悦目的可读文本。 You have proba...
超棒的JS/CSS动画效果网站——持续搜集
immocha的博客
01-06 1055
Animate.css 这里有超多的纯CSS小动画，代码清晰，作为学习的代码也很不错。 地址：https://daneden.github.io/animate.css/
9款超绚丽的HTML5/CSS3应用和动画特效
01-16 2941
HTML5 现在已经不是很前卫的东西了，越来越多的网站和移动应用都在不断地尝试使用HTML5来更好地优化用户体验。今天我们要分享9款超绚丽的HTML5/CSS3应用和动画特效，这里面有菜单、按钮、图片、Loading加载动画等，一定会有你需要的。 1、CSS3飘带状3D菜单 菜单带小图标 这次我们要来分享一款很特别的 CSS3菜单，菜单的外观是飘带状的，并且每一个菜单项有一个精美的小图标，
CSS 、JS实现浪漫流星雨动画
weixin_33913332的博客
11-08 653
1，效果图 2，源码 HTML < body > < div class = “container” > < div id = “mask” > </ div > < div id = “sky” > </ div &g...
使用CSS3创建小黄人动画实战解析
"使用CSS3实现小黄人动画的代码示例和涉及的关键技术解析" 在本文中，我们将探讨如何利用CSS3技术制作一个可爱的小黄人动画。CSS3的引入为网页设计师提供了丰富的动画功能，使得创建动态效果变得更加简单且高效。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值