• 2018-新起点-新动力-新挑战

    2018-新起点-新动力-新挑战

  • 致我们终将逝去的青春

    致我们终将逝去的青春

css3 transform变形属性笔记

css3 transform变形属性笔记

transform属性定义及用法 在css中,tansform属性是用来对元素的进行2D或者3D转换(旋转、缩放、移动、倾斜等)。 相关属性 transform-origin属性:更改转换元素的位置; transform-style属性:指定嵌套元素是怎样在三维空间中呈现; 浏览器支持 Internet Explorer 10、Firefox、Opera浏览器支持transform属性;Internet Explorer 9浏览器支持替代的-ms-transform属性(仅适用于 2D 转换)、Safari 和 Chrome浏览器支持替代的 -webkit-transform 属性(3D 和 2D 转换);Opera 只支持 2D 转换。 属性值 none:不进行转换(默认); matrix(n,n,n,n,n,n):使用六个值的矩阵定义2D转换; matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n):使用16个值的4x4矩阵定义3D转换; translate(x,y):2D 转换; translate3d(x,y,z):3D 转换; translateX(x):用 X 轴的值定义转换; translateY(y):用 Y 轴的值定义转换; translateZ(z):用 Z 轴的值定义3D转换; scale(x[,y]?):2D缩放转换; scale3d(x,y,z):3D缩放转换; scaleX(x):设置 X 轴的值来定义缩放转换; scaleY(y):设置 Y 轴的值来定义缩放转换; scaleZ(z):设置 Z 轴的值来定义 3D 缩放转换; rotate(angle):规定角度定义 2D 旋转; rotate3d(x,y,z,angle):定义 3D 旋转; rotateX(angle) :沿着 X 轴的 3D 旋转; rotateY(angle) :沿着 Y 轴的 3D 旋转; rotateZ(angle) :沿着 Z 轴的 3D 旋转; skew(x-angle,y-angle):沿着 X 和...
阅读 953 views 次
css3 transition-timing-function属性笔记

css3 transition-timing-function属性笔记

transition-timing-function属性定义及用法 1、在css中,transition-timing-function属性是用来定义过渡效果的速度曲线(过渡效果随着时间来改变其速度)。 2、transition-timing-function属性通常和transition-property属性和transition-duration属性一起使用来实现动画的效果。 相关属性 transition-property属性:执行变换的属性; transition-duration属性:过度效果持续时间 transition-delay属性:延迟多久开始; transition属性:复合属性,同时定义以上属性值。 属性值 linear:开始到结束匀速的过渡效果,默认(相当于cubic-bezier(0,0,1,1)); ease :慢速开始,中间快,慢速结束(加速—》减速)的过渡效果(相当于cubic-bezier(0.25,0.1,0.25,1)); ease-in:慢速开始(加速)的过渡效果(相当于cubic-bezier(0.42,0,1,1)); ease-out 慢速结束(减速)的过渡效果(相当于cubic-bezier(0,0,0.58,1)); ease-in-out:慢速开始和结束(加速—》匀速—》减速)的过渡效果(相当于cubic-bezier(0.42,0,0.58,1)); cubic-bezier(n,n,n,n):自定义速度,可能的值是0至1之间的数值。 语法格式: transition-timing-function:linear / ease / ease-in / ease-out / ease-in-out / cubic-bezier;   实例1(关键字): <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3 transition-timing-function属性笔记</title> <style type="text/css"> div{width:100px;height:48px;border:1px solid red;background:#987;transition-property:width;transition-duration:3s;} #ttf1{transition-timing-function:linear;} #ttf2{transition-timing-function:ease;} #ttf3{transition-timing-function:ease-in;} #ttf4{transition-timing-function:ease-out;} #ttf5{transition-timing-function:ease-in-out;} #ttf6{transition-timing-function:cubic-bezier;} div:hover{width:400px;} </style> <head/> <body> <div id="ttf1">linear</div> <div id="ttf2">ease</div> <div id="ttf3">ease-in</div> <div id="ttf4">ease-out</div> <div id="ttf5">ease-in-out</div> <div id="ttf6">cubic-bezier</div> 请将鼠标放到上面div上看效果 </body> </html> </html> [url href='http://www.ggbiji.com/code_run/']运行代码[/url]   运行结果:   实例2(自定义速度): <!doctype html> <html...
阅读 993 views 次

php资讯More>

php常用的开发工具有哪些?

php常用的开发工具有哪些?

要学习php首先就要选择好的php开发工具,接下来就为大家介绍几个实用的开发环境供大家选择。 1、EditPlus EditPlus是一款小巧但是功能强大的编辑器,可处理文本、HTML和程序语言,完全可以取代记事本的文字编辑器。拥有无限制的撤消与重做、英文拼字检查、自动换行、列数标记、搜寻取代、同时编辑多文件、全屏幕浏览功能。 对于php初学者来说,EditPlus是不错的选择。 界面简介,功能强大; 支持大多数语言高亮显示,而且可以扩展; 与Internet无缝连接,可以在工作区域内打开Intelnet浏览窗口; 多工作窗口,切换方便; ...... 2、Norepad++ Notepad++也是是一款非常不错的编辑器,属于开源软件,可以免费使用,支持C、Java、C#、HTML、PHP等编程语言。 支持自定义语言; 可以直接选择浏览器打开调试; 节点可自由折叠/打开,显示缩进引导线; 自动检测文件类型; 开双窗口方式多样; 可显示选中文本的字节数; ...... 3、PHPDesigner 7 PHPDesigner 7主要是针对 PHP 网页的编写所设计出来的开发工具,但它不仅适用于php开发 ,也支持其他编程语言(html 、css、javascript 、java、c#等),它内建一系列的指令码、PHP4 原始码数据库、语法高亮度显示功能等,我个人不太赞同初学者使用太智能的开发工具,虽然能加快输入速度,但是在写代码过程中有提示不利于记忆。 4、PHP Coder PHP Coder 是一个 IDE (Integrated Development Environment),用于快速开发和调试PHP应用程序,它很容易扩展和定义,完全能够符合开发者的个性要求。 支持实时预览; 自动完成用户自定义代码片断; 支持高亮显示; 自带FTP功能; 标准函数提示; 支持运行和断点调试; 5、Zend Studio Zend Studio是PHP语言集成开发环境(IDE)。除了有强大的PHP开发支持外也支持HTML、js、CSS,对PHP语言支持调试。
2017-02-25 阅读 1,157 views 次