之前介绍了好多款html5和css3实现的动画，今天要给大家带来一款html5和css3实现的小机器人走路动画。该实例的人物用html5绘画的，动画效果是html5和css3实现的。一起看下效果图。实现的代码。html代码： 代码如下:<svg version="1.1" id="Layer_1" xmlns="http://www.gxlcms.com/2000/svg" xmlns:xlink="http://www..jb51.net/1999/xlink" x="0px" y="0px" viewbox="0 0 458 337" enable-background="new 0 0 458 337" xml:...
怎么画线条？和现实中画画差不多：1.移动画笔，使画笔移动至绘画的开始处2.确定第一笔的停止点3.规划好之后，选择画笔（包括画笔的粗细和颜色等）4.确定绘制 因为Canvas是基于状态的绘制（很重要，后面会解释），所以前面几步都是在确定状态，最后一步才会具体绘制。1.移动画笔(moveTo())之前我们获得了画笔context，所以以此为例，给出改方法的使用实例——context.moveTo(100,100)。这句代码的意思是移动画笔至(100,100)这个点（...
最近在做一个微信端的小项目，前端代码写完后，就放在手机端测试，没什么问题，但是页面在加载和渲染时的效果却让人有些不爽，虽然是个小项目，我大可不必做这些，但是看着页面的闪动，就忍不住想做些什么。先说说问题吧： 上面是首页效果图，其实在最开始的时候并没有考虑web端，这图是给IOS和安卓native App用的。为了方面两个本地APP的开发，所以上面的图中，除了那几个科目和下面的tabBar，其余都是图片。因为都是图片，所...
我就不介绍map了，直接说遇到的问题。问题一：如果图片原始尺寸是900px，但是你展示的尺寸是450px,那map就定位不准了，怎么破？问题二：如果一个页面有多张图片需要map，怎么做？一、素材图片： 1、这是一张900px的素材图片，我们要让右下角4个小圆图标可以点击。 二、HTML结构： 1、coords的对应坐标不用变，只需在JS里面改变其比例就OK！1 <div class="map_img">2 <img class="mapImg" usemap="mapName" src="ispho...
无论网页或是移动APP的设计，很重要的一点是如何能在小而美和功能复杂性之间找到平衡点。 在执行设计的第一步，便是思考如何利用原型工具诸如Mockplus或Axure在初始阶段把握产品登陆页面设计的技巧。一、 学会做减法跳出登录界面设计中的条条框框，搭配简单的配色，醒目又大方。 二、 结合用户界面设计-页面背景1. 模糊背景模糊背景的运用不仅让整个网站显得更加人性化，并且在很大程度上烘托出网站所要表现的氛围。2. 暗色背景在暗...
1.小三角，通过给一个div设置足够大的边框，让它的上边框，右边框，左边框，的背景颜色设置成透明的，来实现，如下：<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">#demo {width: 0;height: 0;/*边框的宽20px*/border-width: 20px;/*边框样式,实线*/border-style: solid;/*边框颜色*/border-color: transparent transparent red transparent;}</style></head><body><!--小三角，trans...
最近在研究Vuex2.0，搞了好几天终于有点头绪了。首先vuex概念比较多，一定要搞懂里面的概念，可以参考官网Vuex2.0概念，我写此文的目的是希望能对前端爱好者提供个参考，加深对vuex2.0各核心概念的理解。废话少说，直接上干货。这是官网上的一个计数的实例。先来起个项目。第一步、下载安装vue项目打开git ，运行 npm install --global vue-cli 这是安装vue的命令行（首次安装需要运行这条命令，如果之前装过vue-cli，这里就不需要...
::before与::after两个伪元素其实是CSS3中的内容，然而实际上在CSS2中就已经有了这两者的身影，只不过CSS2中是前面加一个冒号来表示（:before和:after）。今天主要讲讲这两个伪元素该如何使用。一、与普通元素一样可以给其添加样式比如说我想在文字前面添加一个图标，如果我用普通元素写的话我可以这样写：/*CSS*/.del{ font-size: 20px;}.del i{ display: inline-block; width: 20px; height: 25px; margin-right: 2px; vertical-...
这篇文章主要给大家介绍了关于element.style内联样式的修改方法，文中给出了详细的介绍供大家参考学习，对大家具有一定的参考学习价值，下面来一起看看吧。前言我们在写前面 web页面样式的时候，会发现有些时候，我们怎么修改 style里面的值，页面上的样式都不会修改，当你用工具查看时，会发现里面会有 element.style的值，这个值还找不到是在哪里出现的，还修改不了。其实element.style是一种内联样式，很多情况下是在一些JavaSc...
<!--html5新增标签、语义特性-结构性标签--> <!--结构性标签 结构性标签（construct tag）主要负责Web的上下文结构的定义，确保 HTML文档的完整性，这类标签包括以下几个。 section。用于表达书的一部分或一章，或者一章内的一节。在Web页面应用中，该标签也可以用于区域的章节表述。 hgroup 对网页或区段（section）的标题进行组合：。 header。页面主体上的头部，注意区别于head标签。这里可以给初学者提供一个判断的...
前言：博主目前大三，Web 前端爱好者。写博客的好处，不是为了写而写，而是一个记录思想的过程。不要考虑它能带给你什么，而是你自己从中收获了什么。最近刚好有空，于是就参照网上的各种教程，搭建了一个博客。现在把 Hexo + GitHub Pages 搭建博客的完整过程记录下来：个人博客地址：大概流程：1. 搭建 Node.js 环境2. 搭建 Git 环境3. GitHub 注册和配置4. 安装配置 Hexo5. 关联 Hexo 与 GitHub Pages6. GitHub Pages 地址解析到...
要撮利用js获取url中参数名也参数值这个不多见了，但我今天需要这样操作，下面我来给大家介绍一下具体的实例方法。 在已知参数名的情况下，获取参数值，使用正则表达式能很容易做到。js的实现方法如下： 代码如下function getValue(url, name) { var reg = new RegExp((\?|&) + name + =([^&?]*), i); var arr = url.match(reg); if (arr) { return arr[2]; } return null;}或方法一：正则分析法 代码如下function getQueryStrin...
HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。尝试一下 - 实例HTML 链接如何在HTML文档中创建链接。(可以在本页底端找到更多实例)HTML 超链接（链接）HTML使用标签 <a>来设置超文本链接。超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的某个链接...
一、form表单 表单提交： <form action="提交地址"method="提交方法"></form> methad有两种提交方式get（不太安全）和post（安全） 文本框： <form> 属性值：name=(名称) size=(输入框中显示可见的字符也就是最多能看见几个字符) <input type="text" size=""> value=（文本框中预设内容） align=(对齐方式【只对image有用】)...
今天准备为大家准备了表格和列表。一、文章有各种数据的表格这个网页也不例外。（1）、标签意思 <table>----------------------表格开始 <caption></caption>-------表格标题 <tr>--------------------行开始标签 <th></th>-------------表头 <tb></tb>-------------单元格 </tr>-------------------行结束标签 </table>---------------------...