Day: August 11, 2016

《SASS界面编译工具——Codekit的使用》一文中图解了”CodeKit”图形工具编译SASS项目。由于CodeKit是一款付费工具，而且只能在Mac中使用，因此国内众多SASS爱好者，或者初学者也就无法体验CodeKit工具编译SASS项目。幸运的是，有一款国产图形工具Koala和CodeKit功能极其类似，支持多个平台，而且是开源的。 Koala Koala官网下载Koala Koala是一个前端预处理器语言图形编译工具，支持Less、Sass、Compass、CoffeeScript，帮助web开发者更高效地使用它们进行开发。跨平台运行，完美兼容windows、li… Read More

原文：Moving along a curved path in CSS with layered animation 翻译：涂鸦码龙 译者注：部分代码示例在原文中可以看效果（作者写在博文里面了…），我偷懒把它做成Gif图了。 CSS 的 animations （动画） 和 transitions（变换）擅于实现从点 A 到点 B 的直线运动，运动轨迹是直线路径。给一个元素添加了 animation 或者 transition 以后，无论你如何调整贝塞尔曲线，都无法让它沿着弧形路径运动。你可以通过自定义 timing function 属性，做出弹动的效果，但是它沿着 X 和 Y 轴相对移动的值永远是相同的。 与其使用 JavaScript 实现外观自然的运动，… Read More

DEMO: 点击这里看效果 简要教程 这是一款很酷的html5 svg线条动态绘制文字轮廓边框动画特效。SVG路径动画在网页设计中是一项热门的技术，它允许我们绘制各种简单、精美的图标和文字。关于使用SVG制作图标方面的知识，请参考阅读ESSENTIAL ICONS。 制作流程 先用一张gif图片来看看效果： 制作SVG 1、首先你要下载和安装一款矢量图形编辑器，推荐使用Inkscape。 2、打开Inkscape，创建一个新的文档。在文档的左上角创建你的文字。 3、使用选择工具选取你创建的文字。 4、在Path菜单中，选择Object –> Path。然后保存为SVG。 5、使用文本编辑器打开你刚才保存的… Read More

在很多时候，SVG是最容易在网页上做出文字特效的方法。现在SVG已经被所有的现代浏览器支持，包括IE9。要在页面上制作SVG文字，可以直接将SVG代码插入带页面中，SVG文字代码十分简单易懂。如下是一段SVG描边文字的代码： <svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <text fill="#e96" style="font-size:60px; font-family: Futura Condensed ExtraBold, Arial Black, sans-serif; color: yellow;" stroke = "black" st… Read More