html5中的svg包含的文本text上下左右居中的方法
发表于
svg
分类，标签:
15
09月
2015
0
水平居中：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&...
svg animation动画
发表于
svg
分类，标签:
08
09月
2015
超级强大的SVGSMILanimation动画详解本文花费精力惊人，具有先驱前瞻性，转载规则以及申明见文末，当心予以追究。本文地址：http://www.zhangxinxu.com/wordpress/?p=4333//zxx:本文的SVG在有缓存时候是无动画效果，此时您可以试着【右键-新标签页打开图片】。一、SVGSMILanimation概览1.SMIL是什么？SMIL不是指「水蜜梨」，而是SynchronizedMultimediaIntegrationLanguage（同步多媒体集成语言）的首字母缩写简称，是有标准的。本文所要介绍的SVG动画就是基于这种语言。SMIL允许你做下面这些事情：动画元素的数值属性（X,Y,…）动画属性变换（平移或旋转）动画颜色属性沿着运动路径运动注意到“沿着运动路径运动”这一条没？前面的三条CSS3都是可以有所担当的，最后这一条，...
js打开新窗口代码
发表于
JS
分类，标签:
07
09月
2015
<ahref="javascript:void(0);" class="fd_btn">打开百度</a><scripttype="text/javascript">functionopenNewWin(url){window.open(url,'newwindow','height=1000,width=600,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no');}window.onload=function(){document.getElementsByClassName("fd_btn"...
炫酷网站收集，
发表于
html5
分类，标签:
01
09月
2015
http://www.html5tricks.com/demo/html5-cool-fire-effect/index.html //canvas 火http://easyrocketstudio.com/ http://www.fandango.com/canvas/theory // 炫酷网站2http://new-year.pernod-ricard.com/ // 照片墙http://www.html5tricks.com/demo/html5-canvas-particle-effect/index.html // 离子http://www.html5tric...
高性能 CSS3 动画
发表于
css3
分类，标签:
31
08月
2015
注：本文出自腾讯AlloyTeam的元彦，文章也可以在github上浏览。请尊重版权，转载请注明来源，多谢～～高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂，我们总结为以下几点：流量、功耗与流畅度。在PC时代我们更多的是考虑体验上的流畅度，而在Mobile端本身丰富的场景下，需要额外关注对用户基站网络流量使用的情况，设备耗电量的情况。关于流畅度，主要体现在前端动画中，在现有的前端动画体系中，通常有两种模式：JS动画与CSS3动画。JS动画是通过JS动态改写样式实现动画能力的一种方案，在PC端兼容低端浏览器中不失为一种推荐方案。而在移动端，我们选择性能更优浏览器原生实现方案：CSS3动画。然而，CSS3动画在移动多终端设备场景下，相比PC会面对更多的性能问题，主要体现在动画的卡顿与闪烁。目前对提升移动端CSS3动画体验的主要方法有几点：尽可能多的利用硬件能力，如使用3D...
模块的写法
发表于
Require
分类，标签:
24
08月
2015
随着网站逐渐变成"互联网应用程序"，嵌入网页的Javascript代码越来越庞大，越来越复杂。网页越来越像桌面程序，需要一个团队分工协作、进度管理、单元测试等等......开发者不得不使用软件工程的方法，管理网页的业务逻辑。Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。但是，Javascript不是一种模块化编程语言，它不支持"类"（class），更遑论"模块"（module）了。（正在制定中的ECMAScript标准第六版，将正式支持"类"和"模块"，但还需要很长时间才能投入实用。）Javascript社区做了很多努力，在现有的运行环境中，实现"模块"的效果。本文总结了当前＂Java...
require.js的用法
发表于
Require
分类，标签:
24
08月
2015
这个系列的第一部分和第二部分，介绍了Javascript模块原型和理论概念，今天介绍如何将它们用于实战。我采用的是一个非常流行的库require.js。一、为什么要用require.js？最早的时候，所有Javascript代码都写在一个文件里面，只要加载这一个文件就够了。后来，代码越来越多，一个文件不够了，必须分成多个文件，依次加载。下面的网页代码，相信很多人都见过。 <scriptsrc="1.js"></script> <scriptsrc="2.js"></script> <scriptsrc="3.js"></script> <scriptsrc="4.js"></script> <...
使用SVG中的Symbol元素制作Icon
发表于
svg
分类，标签:
24
08月
2015
原文出处：腾讯ISUX 欢迎分享原创到伯乐头条前言随着大屏幕分辨率的普及以及各种移动设备层出不穷的移动互联网时代的到来，我们在网站设计时更应该关心内容在各种设备上的阅读性和显示效果。我们都希望能在任何时间，任何设备上都能清楚的，高效的传递信息给用户。而随着各种高清视网膜屏幕的出现，现在web设计也需要考虑各种高清屏幕的显示效果，同样前端在代码实现的时候也需要根据屏幕的不同来输出不同分辨率的图片。为了使我们的网页能够适配视网膜屏幕上的高分辨率，在前端开发中一般需要准备两套不同尺寸的图片来应对，一套在普通屏幕上显示；一套在高清屏幕上显示。为了解决屏幕分辨率对图标影响的问题，字体图标即iconfont顺势而生。字体图标是一种全新的设计方式。更重要的是相比图片而言，使用字体来制作图标可以不受于屏幕分辨率的影响，这对于现在各种分辨率屏幕的移动互联...