使用H5实现机器人脸

视频课:https://edu.csdn.net/course/play/7621

效果图:


在鼻子    眼睛 嘴巴上 单击的时候,有特殊效果,鼻子效果如下:


页面静态代码如下:

<section id="men">
			<section id="leftEar"></section>
			<section id="face">
				<section id="left"></section>
				<section id="right"></section>
				<section id="nose"></section>
				<section id="mouse"></section>
			</section>
			<section id="rightEar"></section>
		</section>

样式修饰如下:

#men{overflow:auto;position:relative;width:500px;
			background: #CCCCCC;margin: 0 auto;}
			#face{width: 400px;height: 400px;z-index: 5;
			background:yellow;margin: 0px auto;float: left;
			position: relative;/*父容器:相对定位*/
			border:2px solid;left:50px;
			border-color: #f00 #0f0 #00f #000;
			border-radius: 200px 200px;
			}
			#left,#right,#nose,#mouse{width: 50px;height: 50px;/*子容器:绝对定位*/
			background-color: #f00;position: absolute;
			left: 100px;top:50px}
			#left{border-radius: 25px;}
			#right{left: 250px;top: 50px;border-radius: 25px;}
			#nose{left:175px;top:175px;}
			#mouse{width: 100px;left: 150px;top: 300px;
			border-radius: 0px 0px 50px 50px;}
			#left:hover{background-color: #000000;}
			#right:hover{background: url(img/timg.gif)no-repeat -10px 20px;background-size: cover;
			}
			#nose:hover{background:url(img/nose.jpg)no-repeat;
			background-size: cover;
			/*当放上去的时候,换下图片*/
			}
			#mouse:hover{border-radius: 50px 50px 0px 0px;}
			#leftEar,#rightEar{width: 50px;height: 50px;background-color: darkorange;
			position: absolute;left: 0px;top:175px;position: absolute;
			border-radius: 50px 0px 0px 5px;z-index: 2;float: left;
			}
			#rightEar{left:450px;top:175px;
			border-radius: 0px 50px 0px 0px;}
那我们要实现机器人脸部的来回移动如何办呢?

则需要学习这样一个知识点:

标签定义及使用说明

使用@keyframes规则,你可以创建动画。

创建动画是通过逐步改变从一个CSS样式设定到另一个。

在动画过程中,您可以更改CSS样式的设定多次。

指定的变化时发生时使用%,或关键字"from"和"to",这是和0%到100%相同。

0%是开头动画,100%是当动画完成。

为了获得最佳的浏览器支持,您应该始终定义为0%和100%的选择器。

注意: 使用animation属性来控制动画的外观,还使用选择器绑定动画。.


语法

@keyframes animationname {keyframes-selector {css-styles;}}

说明
animationname必需的。定义animation的名称。
keyframes-selector必需的。动画持续时间的百分比。

合法值:

0-100%
from (和0%相同)
to (和100%相同)

注意: 您可以用一个动画keyframes-selectors。

css-styles必需的。一个或多个合法的CSS样式属性


增加代码如下:

@keyframes move{
				0% {top:0;left:0;background: CCCCCC;}
				25% {top:0;left:500px;background: green;}
				50% {top:500px;left:500px;background: blue;}
				75% {top:500px;left:0;background: CCCCCC;}
				100% {top:0;left:0;background: CCCCCC;}
			}
在#men下增加:

/*动画效果*/
			animation:move 10s infinite;
到现在为止,就实现了,可以移动位置的机器人哦。!!!


发布了805 篇原创文章 · 获赞 662 · 访问量 131万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 创作都市 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览