transform是css3中对于性能来说是比较安全的 在二维空间里面,skew有两个属性值:skewX,skewY,图形的变化也就是针对这两个值来操作: transform: skewX(45deg): 可以看到demo标签向左倾斜45度产生的形变,那么为什么会产生这个形变呢? 因为demo的高度是不变的,只要倾斜角度不是180的倍数,demo的高度始终保持原有的高度,所以只能拉长本身,产生形变:(围绕X轴倾斜,保持高度不变,围绕Y轴,保持宽度不变) 为什么说不是180的倍数呢?原因很简单,如…

css3出现之前,我们实现一个对象的一组连续动画需要通过JavaScript或Jquery编写,脚本代码较为复杂: 若需要实现倾斜.旋转之类的动画难度将更高(我还没试过用JavaScript或Jquery如何实现),而且即使能实现估计花的时间代价及维护难度是很大的,很多时候只能依靠画图工具制作此类动画文件: 有时候在想如果不用脚本语言,也不用画图工作制作动画文件,就能在网页上实现倾斜.旋转之类的动画效果多好. 最近挤出一些业余时间学习CSS3,其中就包含很多动画示例,花了点时间学习和整理 今天分…

Internet Explorer 9,以及更早的版本, 不支持 @keyframe 规则或 animation 属性. Internet Explorer 10.Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性 Chrome和Safari需要前缀-webkit-  @keyframes(关键帧) animation 使用规则,Name must,duration must Animation turn 顺序 animation   所有动画简写,除…

Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix. 一.旋转rotate rotate(<angle>) :通过指定的角度参数对原元素指定一个2D rotation(2D 旋转),需先有transform-origin属性的定义.transform-origin定义的是旋转的基点,其中angle是指旋转角度,如果设置的值为正数表示顺时针旋转,如果设置的值为…

1.$(".aa").delay(2500).animate({width:0}); // 延迟 2.setTimeout(function(){ --> css3 animate动画库 $(".aa").addClass("animated bounce ") },500) // 延迟 3.transition:(是令一个或多个可以用数值表示的css属性值发生变化时产生过渡效果 例子中width改为all为所有属性都能过渡) div {…

具体学习地址:http://www.imooc.com/learn/33CSS3中的三种动画:tranform形变动画/transition缓动动画/animation逐帧动画; tranform: rotate旋转/skew扭曲/scale缩放/translate移动/matrix矩阵变形; transition: property/当设置为all时,表示更改所有中点值的属性 /duration/设置过渡所需要的时间/ timing-function过渡函数,设置过渡的各种状态/ delay;…

1.css3 ie下大部分不兼容 ie9以下 浏览器低版本不兼容 需要写 -webket-transition:1s -moz-transition: 1s -o-transition:1s transition:1s 这些 2.Css3 选择器 --属性选择器(1) E[attr]只使用属性名,但没有确定任何属性值 E[attr="value"]指定属性名,并指定了该属性的属性值 E[attr~="value"]指定属性名,并且具有属性值,此属性值是一个词列表,并…

HTML5 HTML5和HTML事件 注意:行内代码的为H5新增事件 Window事件属性: 针对 window 对象触发的事件(应用到 标签) onafterprint 文档打印之后运行的脚本 onbeforeprint 文档打印之前运行的脚本 onbeforeunload 文档卸载之前运行的脚本 onerror 在错误发生时执行的脚本 onhaschange 当文档以改变时运行的脚本 onload 页面结束加载之后触发 onmessgae 在消息被触发时运行的脚本 onoffline 当文档…

说来惭愧自认为对css了解,但在项目中却很少有正确的使用css,如果面向对象的css吧,其实也不是不想用而是css天生就是面向对象的,高度可重用,但是如果把每个都单独提取,难免会有过多的class以及自己也比较懒. 你要干嘛就选择什么样的标签,命名也一样.从内容本质出发,它是干什么的. 微型格式,如果某些内容需要的标签没有,可以使用class来代替 class="vcard"联系信息. 通过需求和流程图可以事先考虑如何布局使用什么元素. 标签的使用: ul无序列表 ol有序列表 dl&…

一.浏览器前缀 E{ -moz-name : value; /* Firefox */ -ms-name : value; /* IE */ -o-name : value; /* Opera */ -webkit-name : value; /* WebKit */ name : value; /* 适应未来标准方式 */ } 二.媒体查询 1.使用媒体查询的3种方式 head部分 <link href="css.css" rel="stylesheet"…