随笔分类 - html5+css3
摘要:填充样式主要针对fillStyle。fillStyle除了可以赋值为color,还可以赋值渐变色,包括线性渐变色和径向渐变色,还是和css3里的内容类似。 一、线性渐变 1、设置线性渐变的填充样式 设置线性渐变的填充样式需要2步骤 1、设置渐变线段 通过2个坐标确定渐变线段,来定义渐变的方向和尺度。
阅读全文
摘要:一、canvas是基于状态的绘图环境 1、canvas是基于状态的绘制 context.moveTo(100,100); context.lineTo(700,700); context.lineWidth=10; //直线的宽度状态设置 context.strokeStyle="#058"; //
阅读全文
摘要:图形变换。 一、画一片星空 先画一片canvas.width宽canvas.height高的黑色星空,再画200个随机位置,随机大小,随机旋转角度的星星。 window.onload=function(){ var canvas=document.getElementById("canvas");
阅读全文
摘要:一、线条的帽子lineCap 取值:butt(默认值),round圆头,square方头 var canvas=document.getElementById("canvas"); canvas.width=800; canvas.height=800; var context=canvas.get
阅读全文
摘要:html5中的<canvas>标签是一个可以使用js脚本在其中绘图的html元素。有强大的API,可用于制作照片集或制作简单的动画。有人说canvas是html5的精髓。 一、基本用法 1、初始画布 一般会拿<canvas>和<img>对比,因为它画出来也是张图片,但实际上没什么可比性。canvas
阅读全文
摘要:一、为什么要有localStorage 由于HTML4时代Cookie的大小、格式、存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie。但是Cookie的这些限制,也就导致了Cookie只能存储一些ID之类的标识符等简单的数据。 下面是Cookie的限制: 大
阅读全文
摘要:一、最终效果 需求:gift图片的小动画每隔2s执行一次。 需求就一句话,我们看一下实现过程。 二、实现过程 1、网页结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <
阅读全文
摘要:一、animates.css animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库。包含了60多款不同类型的CSS3动画,包括:晃动,闪动,各种淡出淡出效果,如果你想快速的整合各种CSS3动画特效的话,使用它即可方便的实现。 查看演示: http
阅读全文
摘要:一、概述 浮动在移动布局中不再重要,flex盒模型越来越重要。 - W3C 2009年第1次草案:[display:box;](https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/)- W3C 2011年第2次草案:[display:flexbox
阅读全文
摘要:接css3选择器(一)接css3 选择器(二)这篇和前两篇内容相关性不大,主要是涉及到一些css3的状态选择器,所以标题从一开始。一、【:enabled】选择器一看这个属性就知道是专为表单元素提供的。在表单中输入框,密码框,复选框都有可用(:enabled)和不可用(:disabled)状态,默认情...
阅读全文
摘要:一、介绍css3为了区分伪类和伪元素,伪元素采用双冒号写法。常见伪类——:hover,:link,:active,:target,:not(),:focus。常见伪元素——::first-letter,::first-line,::before,::after,::selection。::befor...
阅读全文
摘要:接css3选择器(一) 八、结构性伪类选择器【:nth-child(n)】 :nth-child(n)选择器用来匹配某个父元素的一个或多个特定的子元素,和jquery中一样。 其中"n"是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n+1,-n+5)和关键字(odd【奇数】、eve
阅读全文
摘要:直接开始正文。 一、css3同级元素通用选择器【update20161228】 选择器:E~F 匹配任何在E元素之后的同级F元素 Note:E~F选择器选中的是E元素后面同级元素中的全部F元素。 例:2个导航之间加个竖杠的效果,可以用li~li选择器,在li后面同级的li的前面加个竖杠。 二、属性选
阅读全文
摘要:一、介绍之前看到有些网站选中内容的颜色和背景色都不是平时看到的蓝色和白色。今天有兴趣查看了一下,原来是一个很简单的CSS3的选择器::selection的用法。上例子: 普通文本,不设置::section,选中时文本的颜色为白色,背景色为蓝色 选择文本的颜色为白色,背景色为粉色Note:...
阅读全文
摘要:transform可以实现矩阵变换,transition实现属性的平滑过渡,animation意思是动画,动漫,这个属性才和真正意义的一帧一帧的动画相关。本文就介绍animation属性。 animation属性通过一些关键帧中元素属性的改变来实现动画效果。当然也可以控制动画持续时间,动画迭代次数等
阅读全文
摘要:css3制作动画的几个属性:变形(transform),过渡(transition)和动画(animation)。transform介绍过了。接下来介绍过渡transition。一、例子先通过一个例子感性认识一下transition的动画效果。鼠标放上去,div宽度从100px增大到200px。这效...
阅读全文
摘要:css3制作动画的几个属性:变形(transform),过渡(transition)和动画(animation)。 首先介绍transform变形。 transform英文意思:改变,变形。 css3中transform主要包括以下几种:旋转(rotate),扭曲(skew),缩放(scale)、移
阅读全文
摘要:全局属性:对于任何一个标签都是可以使用的属性。 一、data-* 在html5之前需要在html标签上添加自定义属性来存储和操作数据,可能是会写<form role="xxx">,但这是种非常不规范的方式。 也正是因为有这种自定义属性的需求,在html规范里增加了自定义属性data-*属性。html
阅读全文
摘要:html5中,在新增加和废除很多元素的同时,也增加和废除了很多属性。一、新增属性1、表单属性a、autofocus对input[所有类型]、select、textarea与button指定autofocus属性。它以指定属性的方式让元素在页面加载后自动获得焦点。一个页面只能有一个元素有autofoc...
阅读全文
摘要:一、新增标签有一种划分为,功能性标签【html5新增,如canvas,旧浏览器没有】和语义性标签【如header等只是增强语义,没有新功能】。下面按照分几个小类来说。1、结构标签新增的结构标签,之前都是用div实现的,为了语义化,html5从div派生出很多新的标签。这些新增的结构标签有助于将文档分...
阅读全文