使用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样式属性

值

说明

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;

到现在为止，就实现了，可以移动位置的机器人哦。!!!

使用H5实现机器人脸相关推荐

h5手机拍照+人脸识别
预览地址:https://face-camera.vercel.app 调用手机默认的相机调用  <input type="file&q ...
微信h5页面实现人脸注册和登陆
工作中总会遇到一些麻烦的问题,有问题不要怕解决就好了,前段时间要实现微信h5页面人脸注册/登录,本以为很简单的一个东西,没想到居然这么麻烦,写个文章记录下过程和遇到的问题及解决办法: 需求:①人脸注册 ...
基于百度AI使用H5实现调用摄像头进行人脸注册、人脸搜索功能(Java)
为什么80%的码农都做不了架构师?>>> 人脸注册.人脸搜索使用百度AI接口.不支持H5活体检测(需要活体检测请参考百度AI-H5活体检测) 体验地址(人脸注册) http://12 ...
七夕H5小游戏：Face++人脸融合搭载颜值评分，看你和TA颜值配不配
人脸融合搭载颜值评分,旷视科技七夕H5来袭人工智能时代,AI+七夕的玩法层出不穷,趁着浓情七夕的到来,Face++最新H5小作品也终于面世啦!这一次Face++把人脸融合.颜值评分的功能结合 ...
美国人到底为什么不待见人脸识别技术？
https://www.toutiao.com/a6695915398514082318/ 2019年5月,旧金山市对人脸识别技术发出了禁令,禁止该技术在政府机关和执法机关中使用,从而成为全球首个对人 ...
全球人脸识别精度一年提高75.6%，拉动全球安防市场超高增长
来源:AI 科技评论摘要:有「工业界黄金标准」之称的美国国家标准与技术研究院(National Institute of Standards and Technology,NIST)最近公布了全球人 ...
基于Python的OpenCV+TensorFlow+Keras人脸识别实现
前言:本节要讲的人脸识别主要是借鉴了一位研究生前辈的文章我只是在他的基础上进行了改动,让代码能在现在的TensorFlow2.X 等的环境下运行先看一下效果图完整工程及源代码请点击链接下载:人 ...
Python+Tensorflow+Opencv人脸识别（任意数量人脸)
Python+Tensorflow+Opencv的人脸识别简单的人脸识别准备工作开始--先获取必要的人脸图像训练--分类吧识别大脸简单的人脸识别一直想做机器学习的东东,最近由于工作的调整 ...
详解深度学习之经典网络:AlexNet(2012) 并利用该网络架构实现人脸识别
@[TOC](详解深度学习之经典网络:AlexNet(2012) 并利用该网络架构实现人脸识别**) 近来闲来无事,翻出了搁置已久的轻薄版电脑,望着积满灰尘的显示屏,觉得有愧于老师的尊尊教导,心中叹息 ...

使用H5实现机器人脸

标签定义及使用说明

语法

使用H5实现机器人脸相关推荐

最新文章

热门文章