随笔分类 - HTML/CSS
摘要：一：不同空格符合的区别 半角的不断行的空白格（推荐使用）   半角的空格   全角的空格 详细的含义： ：这是我们使用最多的空格，也就是按下space键产生的空格。在HTML中，如果你用空格键产生此空格，空格是不会累加的（只算1个）。要使用html实体表
阅读全文
摘要：我们这里所说的devicePixelRatio其实指的是window.devicePixelRatio, 被所有WebKit浏览器以及Opera所支持。 概念 devicePixelRatio ，它是设备上物理像素和设备独立像素( device-independent pixels (dips) )
阅读全文
摘要：box-shadow实现的打点效果 简介 box-shadow理论上可以生成任意的图形效果，当然也就可以实现点点点的loading效果了。 实现原理 html代码，首先需要写如下html代码以及class类名： css代码 这里用到了currentColor这个关键字，IE9+浏览器支持，其可以让C
阅读全文
摘要：实现如图所示的点点点loading效果： 一：CSS3 animation实现代码 html代码: css代码： 出现的就是如图所示的结果。注意点： 1.IE10+以及其他浏览器，点点点动画消失，IE6-IE9是普通的点点点文字。 2.animate动画是连续的，但是我们这儿是一帧一帧的，一卡一卡的
阅读全文
摘要：currentColor顾名思意就是“当前颜色”，准确讲应该是“当前的文字颜色”，例如： currentColor表示“当前的标签所继承的文字颜色”，换种方式表示就是：currentColor = color的值。 凡事需要使用颜色值的地方，都可以使用currentColor替换，比方说背景色 –
阅读全文
摘要：在博客园看到了车大棒的写了一篇关于实现黑客帝国矩形阵，觉得canvas还是有一些奇妙的地方所在，故做个笔记记录一下。 实现的效果如下： 真的是一两行关键的代码添加就能实现意想不到的效果。 由于是canvas实现的，所有首先第一步就是在页面添加canvas标签，如下： css代码： 由于实现的效果是c
阅读全文
摘要：原理 原理是将浏览器默认的下拉框样式清除，然后应用上自己的，再附一张向右对齐小箭头的图片即可。当然右侧的小箭头可以用伪元素before或者after来实现。 select { /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/ border: solid 1px #000; /
阅读全文
摘要：实现效果 1.首先创建html代码 2.创建canvas环境 3.绘制5像素宽的运动外圈 4.绘制白色外圈 5.百分比文字绘制 6.让它运动起来 完整代码
阅读全文
摘要：实现如图所示的动画效果： 预载动画一：双旋圈 在两个不同方向旋转的圆圈。我们对内圈的转速定义了一个CSS代码，即内圈比外圈的速率快2倍。实现如图所示： html代码： css代码： 预载动画二：交错圈 两个圆圈进行横向交错来回移动。每个圆圈都设置了单独的反向移动动画参数。效果： html代码： cs
阅读全文
摘要：实现如图所示的东西效果（落叶下落）： html代码： css代码： js代码： 转载地址：http://www.html5tricks.com/css3-fall-leaves.html
阅读全文
摘要：这里介绍的是大家以后要用到的html强大功能，可直接给输入框增加语音功能，下面我们先来看看实现方法。 大家可以看到在输入框右边的麦克风图标，点击麦克风就能够进行语音识别了。 其实很简单，语音识别是html5的基本功能，它的用法是 如果喜欢XHTML类似的语法，可以这样表示 语音识别在十年前是让人觉得
阅读全文
摘要：简介 拖放是一种常见的特性，即抓取对象以后拖到另一个位置。 在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。 先点击一个小例子：在用户开始拖动 <p> 元素时执行 JavaScript 提示： 链接和图片默认是可拖动的，不需要 draggable 属性。 定义和用法 在拖放的过程中会触发
阅读全文
摘要：一、关于渐变 渐变是一种应用于平面的视觉效果，可以从一种颜色逐渐地转变成另外一种颜色，故可以创建类似于彩虹的效果渐变可以应用在任何可以使用图片的地方。例如，您可以指定一个这么一个渐变：顶部的颜色是红色，中间的是蓝色，底部为黄色来作为div的背景色。渐变通过-webkit-gradient方法实现，可
阅读全文
摘要：简单介绍 input file控件限制上传文件类型如下：1.文件类型中间用，分开；2.html和htm这样的要写成两个； 3实例： 如果想在手机上实现拍照上传，添加如下代码： 重要的就是这句话：capture="camera" accept="image/*" 下面精简代码（备注），On mobil
阅读全文
摘要：animation-play-state介绍 animation-play-state 属性规定动画正在运行还是暂停。 浏览器支持：Internet Explorer 10、Firefox 以及 Opera 支持 animation-play-state 属性。Safari 和 Chrome 支持替
阅读全文
摘要：如果想要读取或浏览文件，则需要通过FileReader接口，该接口不仅可以读取图片文件，还可以读取文本或二进制文件，同时，根据该接口提供的事件与方法，可以动态侦察文件读取时的详细状态，接下来，我们详细介绍FileReader接口的使用方法。 FileReader 接口 FileReader 接口提供
阅读全文
摘要：在做移动端图片上传的时候，用户传的都是手机本地图片，而本地图片一般都相对比较大，拿iphone6来说，平时拍很多图片都是一两M的，如果直接这样上传，那图片就太大了，如果用户用的是移动流量，完全把图片上传显然不是一个好办法。 目前来说，HTML5的各种新API都在移动端的webkit上得到了较好的实现
阅读全文
摘要：什么是LESSCSS LESSCSS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。 LESSCSS可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。 语言特性快速预览： 变量：
阅读全文
摘要：对字体进行抗锯齿渲染可以使字体看起来会更清晰舒服。在图标字体成为一种趋势的今天，抗锯齿渲染使用也越来越多。 font-smoothing是非标准的CSS定义。它被列入标准规范的草案中，后由于某些原因从web标准中被移除了。 但是，我们可以用以下两种定义进行抗锯齿渲染 （1）Webkit在自己的引擎中
阅读全文
摘要：在西方国家罗马字母阵营中，字体分为两大种类：Sans Serif和Serif，打字机体虽然也属于Sans Serif，但由于是等宽字体，所以另外独立出Monospace这一种类，例如在Web中，表示代码时常常要使用等宽字体。 Serif的意思是，在字的笔划开始及结束的地方有额外的装饰，而且笔划的粗细
阅读全文
浙公网安备 33010602011771号