整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
前端开发来说，通过动画来提升交互效果是很常见的。在很早以前，做web动画主要通过javascript或者jquery或者flash这样的手段，非常麻烦，自打有了ccs3，做动画就太方便了，只需几行css代码就可以搞定。
这里我们就演示一个常见的循环滚动效果，任务是这样：先准备一个图片，平铺到页面上充满整个屏幕，然后就让画面一直向上循环滚动，形成无边无际的感觉。
虽然可以从网上搜到一些类似的代码，但是鱼龙混杂，无关紧要的代码非常多，不够纯粹。如果要弄明白动画的原理，只有自己动手做一遍才能真正消化吃透。所以我们来一步步原创这个代码，排除所有不必要的基础样式，只说要点，3个步骤你就可以完全掌握其精髓！
第一步：布局
首先，滚动的图片需要放在一个容器里，一行html代码即可完成：
第二步：把图片放进容器
css中body的边界设为0，把容器设高度100%以充满屏幕，再调用背景图pic.png
第三部：让画面动起来
咱不做标题党，循环滚动靠的就是3行css动起来的。
先是1行 -webkit-animation属性：4个参数分别表示：动画名称scroll，1秒时长，移动速度为线性的，无限循环。
然后是对应的关键帧 @-webkit-keyframes 属性，这是自己定义的动画规则，只需写2行规则即可：
原理：动画就是画从一个地方动到另一个地方。对普通滚动效果来说，有起点和终点这两个节点的位置就够了。所以我们用0%和100%分别表示起点和终点，指定2个背景图的xy位置坐标即可。图片会在规定时间内从起点移动到终点，并循环下去，数值是负表示是向上移动。320px正好是图片的高度，这样循环的时候是无缝衔接的。
好了，最终完整的代码如下，是不是很精练呢？保存成 index.html 即可
代码写完了，还要记得在当前目录要有pic.png这个图片哦，我随便画了几笔，绝无观赏性，建议自己找个好看点的图片来代替。
现在用浏览器打开index.html即可看到效果，比较魔性的地方在于，如果你盯着看久了，关闭窗口以后会出现幻觉，仿佛整个显示器都在向上飞，哈哈！
最后我们来说说浏览器兼容性问题：
大家可能注意到了，前面那2个古怪的 -webkit-animation, @-webkit-keyframes 这里的-webkit-其实是一个前缀，animation和@keyframes才是CSS的标准属性。
当加上-webkit-后，就形成了一个针对特殊浏览器的专有属性，表示用在谷歌的chrome和苹果的safari浏览器上。此外还有-moz前缀代表针对firefox浏览器的私有属性。
所以我们在用到css3的一些特性的时候，经常使用一大堆的重复性的代码，比如我们今天的这个代码，有人会写成这个样子：
一个简单的动画就要写这么多冗余的代码，为的只是支持一些旧的浏览器，有必要吗？为什么在这个例子中我们仅仅采用了-webkit-而没有使用其它专有属性呢？
因为现在已经是2019年了！谷歌苹果的浏览器是主流，占据了绝大部分，而其它小众浏览器也大多能够兼容他们，在版本上，大部分人安装浏览器是直接下载新版本安装使用，而非找出家里陈年的老软盘、老光盘去安装，家中的老电脑也早已升级不知多少回了，所以也几乎没有机会使用低版本的浏览器了！
至于微软的IE，就更别提了，IE9以前不支持动画的，只能用js或者jquery来写动画，直到IE10才支持css动画，随后IE被放弃，主推Edge，搞了几天越来越头大干脆也放弃，现在直接使用chrome内核了，所以针对ie的兼容性除非有特殊要求已经无需考虑。
你在网上能看到的范例代码，如果有写成那么复杂臃肿的，估计也都是3-5年前发的老文，或者抄来抄去不做思考的搬砖工留下的“初学者”笔记。
我们不仿测试一下几款主流浏览器的情况看看，结论：
测试结果表明，-webkit-的写法在4款不同内核的浏览器上都能正常使用，所以我们的代码因此能得以简化。
当然，这个例子也有局限性，比如你看，只有苹果safari不支持标准写法，万一将来他改邪归正了呢？毕竟标准写法才是众望所归不是？使用针对个别浏览器的私有属性写法，虽可用但毕竟有些怪怪的，将来怎么样还很难说呢。这样看来，如果使用古老的处理办法，重复N次为每个专属浏览器各写一份代码，除了辣眼睛也真没什么错。
浏览器的兼容问题涉及面实在是非常广，三言两语还真说不完，以后会专门来讲。
015-12-02 10:26:02 作者：马荣
【中关村在线软件资讯】12月2日消息：臭名昭著的Adobe Flash居然要改名了，Adobe今日宣布Flash Professional将在以后版本中更名为Adobe Animate CC。
Adobe Animate CC将加入对HTML5的支持，这应该算是对趋势的一种顺应。为此，Adobe将大部分Flash事业部员工转移到新的部门来开发HTML5，CSS3和SVG等。
在HTMML5逐渐普及之后，Adobe Flash Professional也加强了对HTML5的支持，帮助开发人员创建更多网站、广告和动画电影。不过Animate CC还将继续支持Flash SWF文件。
Adobe Animate CC
目前已经没有人使用Flash来制作网站，只有网络广告还在对Flash提出需求，但是，自从推出HTML5之后，Flash音频和视频源数量也已经显著下降。
在业界越来越多的人排斥Flash，所以Adobe将其更名为Adobe Animate CC也是情理之中的，当然也是转变的开始。这样一来CC家族的成员又壮大了。
HTML是最流行的Web前端开发技术之一，它是一种用于创建网页和 Web 应用程序的标记语言。HTML与CSS和JavaScript结合使用以创建有吸引力且响应迅速的前端网页。
HTML 提供了几个不同的元素，如 <head>、<body>、<p>、<img>、<a> 等，它们充当网站的构建块，浏览器使用这些 HTML 元素来解释和表示网页上的内容。
HTML 概述
HTML(超文本标记语言)是Web浏览器理解并用于呈现网页的语言。在不同元素的帮助下，HTML 决定了网页的外观和显示内容。超文本标记语言 (HTML) 是一种用于创建独立于平台的超文本文档的简单标记语言。
HTML 文档是具有通用语义的 SGML(标准通用标记语言)文档，可用于表示来自各种学科的数据。HTML 标记可用于创建超文本邮件、文档、新闻和超媒体;选项菜单;数据库查询结果;带有内嵌图形的简单结构化文档;和现有数据集的超文本视图。
HTML 语言的主要用途
轻松浏览互联网
超文本允许你访问 Internet 上的不同页面，尤其是在你没有记住所有 URL 的情况下。你只需单击链接或在地址字段中输入 URL 即可浏览互联网。超文本对于引导用户浏览你的网站并充当网关至关重要，以便他们知道存在不同的页面并可以在它们之间导航。如果不使用超文本，用户很难检测到网站上是否还有其他网页。
尖端功能
HTML 支持 Polyfill 功能，它是一种允许你在 HTML 中本地使用不同技术的代码。你可以使用此功能复制未来的API，同时为过时版本的浏览器提供回退功能;你可以自定义polyfill库以满足你的特定要求并执行其他人从未做过的事情。HTML 的这些尖端特性是HTML有如此多用途的原因。
创建 Web 文档
网页只是一个Web文档，你可以在其中编写你希望用户看到的材料，然后将其包装在指示机器如何格式化整个内容的代码中。这会告诉你的浏览器标题、正文和元数据中的文本，它带有标签，因此计算机知道如何处理你提供的信息。
数据输入
你拥有执行任何数据输入任务所需的所有 API。作为开发人员，你只需在相关字段中添加标签，例如文本和数据格式，你甚至可以提供屏幕键盘和验证，确保为用户提供流畅和愉快的体验。
游戏开发
游戏开发是 HTML 的重要用途之一。尽管不再支持Flash，但HTML仍可用于创建基于浏览器的游戏。你使用的API不必完全实现，但可以使用最必要的组件，同时去掉了其余的功能，带来了更轻松的体验。由于HTML5的进步，HTML正迅速成为最流行的游戏编程语言之一。
离线存储
如果你的一些用户不在线怎么办?在最新版本的HTML中找到的应用程序缓存方法的帮助下，你仍然可以使你的应用程序运行。应用程序缓存负责各种离线功能，包括各种组件，包括需要更新的API调用。通过清单文件，你可以控制浏览器对其离线使用的操作，甚至它使用的资源。
原生API使用
API代表“应用程序编程接口”，这是两个不同应用程序相互通信的一种方式。通过使用API，HTML包括地理定位、事件管理、拖放和更多功能，HTML编程现在比以往任何时候都更强大。开发人员还可以使用具有异步特性的现代在线应用程序。
在客户端存储东西
IndexDB和Localstorage 使在客户端存储文件更简单、更高效，这些都有自己的一套强大的功能。
Localstorage支持setItem、getItem 和removeItem方法，以及基于字符串的哈希表存储。IndexDB带有更多的存储空间，你可以在用户许可的情况下增加。
方便使用的
与其他编程语言不同，HTML以用户友好而闻名，即使对于初学者也是如此，所以，这也是HTML的主要用途之一。HTML中有语义组件来描述它们所具有的内容类型，例如，页眉、页脚、主要、摘要和时间等HTML常用标签是自描述的。
可访问的富Internet应用程序
HTML5语义标签的使用使网站搜索引擎和屏幕阅读器友好，如果正确使用语义标签，视障人士可以使用屏幕阅读器从网页中获取信息。
结论
在这篇博客中，我们讲述了HTML的所有重要用途，它通常是Web开发人员学习的第一语言，所以，如果你想学习Web编程并且害怕学习HTML的难度，你不必担心，HTML非常容易学习。
*请认真填写需求信息，我们会在24小时内与您取得联系。
