html5+css3基础知识
关注
分享
扫一扫
文章平均质量分 53
iteye_7560
这个作者很懒，什么都没留下…
展开
-
html5音频组件实现在线广播、回播
最近做了一个微信里广播电台的一个在线收听、往期回播的功能，利用hmtl5的标签<audio>这个项目从决定采用audio到最后实现可谓是一波三折，这里我主要介绍下我实现的过程和遇到的一些问题，希望对也想实现此功能的亲们能少走些弯路。 一、音频<audio>标签 html5音频和视频功能完全取代对插件的依赖，方便使用，具体使用格式如下： <a...原创 2014-01-09 11:48:51 · 1197 阅读 · 0 评论 -
CSS3 基本选择器
CSS3 基本选择器 *E.class#idEFE>FE+FE[attribute]E[attribute=value]E[attribute~=value]E[attribute | = value]:first-childE[attribute^=value]E[attribute$=value]...原创 2014-07-23 10:29:41 · 134 阅读 · 0 评论 -
IE（IE6/IE7/IE8）支持HTML5标签
让IE（ie6/ie7/ie8）支持HTML5元素，我们需要在HTML头部添加以下 JavaScript，这是一个简单的document.createElement声明，利用条件注释针对IE来调用这个js文件。 Opera，FireFox等其他非IE浏览器就会忽视这段代码，也不会存在http请求。 引用google的html5.js文件，将代码放到head标签区间，代码内容可以自己下载...原创 2014-07-15 08:40:50 · 162 阅读 · 0 评论 -
CSS3 多列
浏览器支持 Internet Explorer 10 和 Opera 支持多列属性。Firefox 需要前缀 -moz-。Chrome 和 Safari 需要前缀 -webkit-。注释：Internet Explorer 9 以及更早的版本不支持多列属性。 CSS3 创建多列column-count 属性规定元素应该被分隔的列数：实例把 div 元素中的...原创 2014-03-03 16:32:39 · 125 阅读 · 0 评论 -
CSS3 perspective 属性（3D 元素距视图的距离）
浏览器支持目前浏览器都不支持 perspective 属性。Chrome 和 Safari 支持替代的 -webkit-perspective 属性。 定义和用法perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。...原创 2014-03-03 16:05:36 · 1673 阅读 · 0 评论 -
CSS3 3D 转换rotateX()、rotateY()
浏览器支持Internet Explorer 10 和 Firefox 支持 3D 转换。Chrome 和 Safari 需要前缀 -webkit-。Opera 仍然不支持 3D 转换（它只支持 2D 转换）。 rotateX() 方法通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。实例div{transform: rotateX(...原创 2014-03-03 15:41:29 · 419 阅读 · 0 评论 -
css3动画系列之skew() 方法
浏览器支持情况：Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。Chrome 和 Safari 需要前缀 -webkit-。注释：Internet Explorer 9 需要前缀 -ms-。skew() 方法通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数： 实...原创 2014-02-28 15:59:30 · 947 阅读 · 0 评论 -
css3动画系列之scale()方法
浏览器支持情况：Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。Chrome 和 Safari 需要前缀 -webkit-。注释：Internet Explorer 9 需要前缀 -ms-。 scale() 方法通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：...原创 2014-02-28 15:57:06 · 1107 阅读 · 0 评论 -
css3动画系列之rotate() 方法
浏览器支持情况：Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。Chrome 和 Safari 需要前缀 -webkit-。注释：Internet Explorer 9 需要前缀 -ms-。 rotate() 方法通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。 实例...原创 2014-02-28 15:52:02 · 1316 阅读 · 0 评论 -
css3动画系列之translate方法
浏览器支持情况Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。Chrome 和 Safari 需要前缀 -webkit-。注释：Internet Explorer 9 需要前缀 -ms-。 translate() 方法 通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） ...原创 2014-02-28 15:34:43 · 1500 阅读 · 0 评论 -
css3动画系列之transition 属性
浏览器支持情况： Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。Safari 支持替代的 -webkit-transition 属性。定义和用法transition 属性是一个简写属性，用于设置四个过渡属性：transition-propertytransition-durati...原创 2014-02-10 14:30:40 · 157 阅读 · 0 评论 -
css3动画系列之animation 属性
animation与@keyframes同时使用才可起作用,这里详细介绍下animation的所有用法： animation 属性是一个简写属性，用于设置六个动画属性：animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-count...原创 2014-01-16 14:44:24 · 390 阅读 · 0 评论 -
css3动画系列之@keyframes规则
html5+css3出现以后，很多优秀的动画效果因为个别主流浏览器不支持的原因，被使用的很少，现在很多做微营销的公司，很多产品是在微信里浏览和使用，微信默认浏览器支持的都是webkit内核，所有很多css3的特性都是支持的，可以大胆使用，尤其是一些动画样式，今天主要介绍一下css3的动画@keyframes规则： @keyframes 规则用于创建动画。在 @keyframes 中...原创 2014-01-16 13:16:05 · 532 阅读 · 0 评论 -
手机页面css3去掉点击的背景阴影、边框
在iso4+和android2+系统，当手指触摸屏幕a标签链接或按钮时，都会出现灰色的默认背景，这种效果有的时候会影响美观， 如何去掉代码如下：-webkit-tap-highlight-color: rgba(0,0,0,0); ios和android都支持，仅适用于css3 ...原创 2014-01-13 11:32:31 · 1045 阅读 · 0 评论 -
css3动画鼠标滑过图片变大并且显示透明渐变遮罩背景
最近看到w3cfuns教程页面的一个效果，学习和实现了一下，感觉不错，大家以后可以在项目中使用，其中几个知识点： 1、使用伪类元素:before和after来处理显示在图片上面的半透明遮罩背景和图片效果2、使用css3动画属性transform:scale(1.1) 变化图片大小3、使用transition实现渐变动画效果 页面代码如下：<body id="be...原创 2014-11-26 11:18:46 · 1564 阅读 · 0 评论