CSS3 clip-path polygon图形构建与动画变换二三事
发表于
css3
分类，标签:
08
10月
2015
0
by zhangxinxu from http://www.zhangxinxu.com本文地址：http://www.zhangxinxu.com/wordpress/?p=4732一、温故关于CSS3 clip-path,去年圣诞节前前前夕写了篇名为“CSS3/SVGclip-path路径剪裁遮罩属性简介”文章介绍了。不过是简介，很多内容是一笔带过。CSS3中的clip-path可以遮罩很多图形，例如矩形rectangle,圆circle,椭圆ellipse,多边形polygon,以及inset剪裁。其中，polygon多边形构建频频出现了我的视野中，不知是贪图我的美色还是其他什么原因，总之，它成功了，成功引起了我关注。于是，按照虐心剧剧本一贯的尿性，男主和X主发生了很多情感上的纠葛。这里特意呈现给大家，满足大家八卦的天性。二、成形c...
canvas 画虚线的方法
发表于
canvas
分类，标签:
28
09月
2015
一个绘制虚线的算法。很不错！来自《html5canvas核心技术》一书。varcanvas=document.getElementByIdx_x_x_x("canvas"), ctx=canvas.getContext("2d");functiondrawDashLine(ctx,x1,y1,x2,y2,dashLength){ vardashLen=dashLength ===undefined ?5:dashLength, xpos=x2-x1,//得到横向的宽度;&nbs...
SVG-Morpheus实现SVG图标图形间的补形动画
发表于
svg
分类，标签:
23
09月
2015
by zhangxinxu from http://www.zhangxinxu.com本文地址：http://www.zhangxinxu.com/wordpress/?p=4480一、关于矢量图形间的补形动画时光冉冉，还依稀记得学生时代折腾flash动画那会儿，只要建前后两个关键帧，前面画个方框，后面画个圈圈，然后建立个补形动画，就有了从方框到圆的变化效果。最后效果参见下flash动画（由于没有延迟，所以有些抽风）：然后，一晃，好多年过去了，随着CSS3的越发强劲，穿花戏蝶、闲云信步间，我们总会看到一些小而美的图标动画效果。例如，checkbox选中时候，那个钩钩调皮地勾一下；或者移动端三横菜单图标在展开式变成叉叉等等。甚至Google在其设计的官方文档中专门另起一个栏目delightfuldetails,推荐多一些这种小而美的图标间的补形过渡动画，这...
前端开发框架对比
发表于
html5
分类，标签:
21
09月
2015
本文选取了Bootstrap、jQueryUI、jQueryMobile、SenchaExtJS、SenchaTouch、SenchaGXT、Dojo、DojoMobile、Mootools、Foundation、YUI、Kissy、QWrap等16个国内外前端开发框架进行初步的横向比较，可以作为大家挑选前端开发框架的初步参考。2 评论：王芳侠,高级软件工程师,IBM2014年4月22日内容在IBMBluemix云平台上开发并部署您的下一个应用。开始您的试用近几年随着jQuery、Ext以及CSS3的发展，以Bootstrap为代表的前端开发框架如雨后春笋般挤入视野，可谓应接不暇。不论是桌面浏览器端还是移动端都涌现出很多优秀的框架，极大丰富了开发素材，也方便了大家的开发。这些框架各有特点，本文对这些框架进行初步的介绍与比较，希...
全兼容渐变色写法
发表于
css3
分类，标签:
18
09月
2015
<!DOCTYPEhtml><html><headlang="en"> <metacharset="UTF-8"> <title>全兼容渐变色</title> <style> body{ background-color:blue; } a{ color:#...
SVG Sprite技术介绍
发表于
svg
分类，标签:
18
09月
2015
未来必热：SVGSprite技术介绍by zhangxinxu from http://www.zhangxinxu.com本文地址：http://www.zhangxinxu.com/wordpress/?p=4264一、Sprite技术这里所说的Sprite技术，没错，类似于CSS中的Sprite技术。图标图形整合在一起，实际呈现的时候准确显示特定图标。另，本文图片甚多，爪机党继续浏览需慎重。二、SVGSprite与symbol元素目前，SVGSprite最佳实践是使用symbol元素。symbol元素是什么呢？单纯翻译的话，是“符号”的意思。然，这个释义并不符合这里的场景。不知大家有没有用过Flash，symbol实际上就类似于Flash中的“影片剪辑”、或者“元件”。因此，我个人觉得，symbol应该解释为“元件”最为恰当！那，symbol和SV...
CSSOM视图模式(CSSOM View Module)相关整理
发表于
css3
分类，标签:
18
09月
2015
by zhangxinxu from http://www.zhangxinxu.com本文地址：http://www.zhangxinxu.com/wordpress/?p=1907就在8月份，也就是上次gf大姨妈来的时候，W3C出炉了CSSOM视图模块(CSSObjectModelView)草案。CSSOM视图模块(CSSOMViewModule)定义了一些API，Web开发人员使用这些API可以进行检查，也可以以编程方式更改文档及其内容的视觉属性，包括布局框定位、视区宽度和元素滚动。以下就是一些API属性的相关内容，包括兼容性，使用，测试等。一、Window视图属性这些属性可以hold住整个浏览器窗体大小。微软则将这些API称为“Screenview接口”。包括：innerWidth 属性和 innerHeight...
html5中的svg包含的文本text上下左右居中的方法
发表于
svg
分类，标签:
15
09月
2015
水平居中：text-anchor 垂直居中：dominant-baseline: middlehttp://lea.verou.me/2013/03/easily-center-text-vertically-with-svg/ UsagecontextCategoriesPresentationattributeValuestart|middle|end| inheritAnimatableYesNormativedocumentSVG1.1(2ndEdition)<?xml version="1.0"?><svg width="120" height="120" viewBox="0&...