排序:
默认
按更新时间
按访问量
RSS订阅

CSS3: 利用分层动画让元素沿弧形路径运动

原文:Moving along a curved path in CSS with layered animation 翻译:涂鸦码龙 译者注:部分代码示例在原文中可以看效果(作者写在博文里面了…),我偷懒把它做成Gif图了。   CSS 的 animations (动画) 和 t...

2016-08-24 13:19:24

阅读数:180

评论数:0

SASS界面编译工具——Koala的使用

《SASS 界面编译工具——Codekit的使用》一文中图解了"CodeKit"图形工具编译SASS项目。由于CodeKit是一款付费工具,而且只能在Mac 中使用,因此国内众多SASS爱好者,或者初学者也就无法体验CodeKit工具编译SA...

2016-08-24 13:18:07

阅读数:9

评论数:0

如何制作HTML5 SVG描边文字

在很多时候,SVG是最容易在网页上做出文字特效的方法。现在SVG已经被所有的现代浏览器支持,包括IE9。要在页面上制作SVG文字,可以直接将SVG代码插入带页面中,SVG文字代码十分简单易懂。如下是一段SVG描边   文字的代码: <svg version=&...

2016-08-24 13:15:27

阅读数:24

评论数:0

HTML5: 利用SVG动画动态绘制文字轮廓边框线条

DEMO: 点击这里看效果   简要教程 这是一款很酷的html5 svg线条动态绘制文字轮廓边框动画特效。SVG路径动画在网页设计中是一项热门的技术,它允许我们绘制各种简单、精美的图标和文字。关于使用SVG制作图标方面的知识,请参考阅读ESSENTIAL ICONS。   制作...

2016-08-24 13:14:30

阅读数:88

评论数:0

基本的SVG样式属性

SVG的样式属性和CSS的语法非常接近,有时甚至是一样的,经常会照成一些使用上的混乱。   注意,我们在这里讨论的是用于SVG代码本身出现的规则,而不是SVG被嵌入网页后被附加上去的规则样式。然而,如果你想从CSS属性来了解SVG,比较他们的语法规则是一种有效果的方法。 SVG...

2016-08-24 13:11:54

阅读数:19

评论数:0

SVG 入门教程系列列表

  SVG 入门教程系列列表: SVG 教程 (一) SVG 教程 (二)矩形 SVG 教程 (三)圆形,椭圆,直线 SVG 教程 (四)多边形,曲线,路径 SVG 教程 (五)文本,Stroke 属性,SVG 滤镜,SVG 模糊效果 SVG 教程 (六)SVG 阴影,SVG 渐...

2016-08-19 03:09:20

阅读数:41

评论数:0

CSS3: 动画循环执行(带延迟)的实现

出处:http://www.cnblogs.com/starof/p/5443445.html   一、最终效果 需求:gift图片的小动画每隔2s执行一次。 需求就一句话,我们看一下实现过程。   二、实现过程 1、网页结构 <!DOCTY...

2016-08-11 01:23:27

阅读数:79

评论数:0

CSS3: 常用动画特效及4个最流行的动画库

一、animates.css animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库。包含了60多款不同类型的CSS3动画,包括:晃动,闪动,各种淡出淡出效果,如果你想快速的整合各种CSS3动画特效的话,使用它即可方便的实现。 查...

2016-08-11 01:00:36

阅读数:23

评论数:0

HTML5: 全局属性

出处:http://www.cnblogs.com/starof/p/4593741.html   全局属性:对于任何一个标签都是可以使用的属性。   一、data-* 在html5之前需要在html标签上添加自定义属性来存储和操作数据,可能是会写<form...

2016-08-01 08:03:35

阅读数:8

评论数:0

CSS: 深入理解BFC和Margin Collapse (margin叠加或者合并外边距)

BFC的理解与应用 首先我们来看看w3c规范对BFC的解释,其实对于这种概念的学习上,我们总是建议首先寻找官方的定义,因为原则上来说官方的才是最权威和正确的,而且还比较详细,千万不要因为看到英文就畏惧不前。   什么是BFC(Block formatting contexts) w3c...

2016-08-01 07:57:08

阅读数:4

评论数:0

详解CSS的盒模型(box model) 及 CSS3新增盒模型计算方式box-sizing

W3C规范 一般来说,页面中的每一个元素都会形成一个矩形盒子,渲染引擎根据给定的样式确定这个盒子的呈现。通俗的来说,页面的布局就是一个个盒子的排列和摆放。掌握了盒子呈现的本质,布局也就轻而易举。 在 W3C 规范中定义了标准的盒模型: Each box has a content ar...

2016-08-01 07:55:11

阅读数:7

评论数:0

CSS: div高度自动适应背景图片的高度 How to get div height to auto-adjust to background size?...

原文:CSS: div高度自动适应背景图片的高度 How to get div height to auto-adjust to background size?   其实方法非常简单,直接写代码: <div style="background-im...

2016-07-29 13:00:27

阅读数:6

评论数:0

移动开发需要知道的像素知识『多图』

像素(Pixel)对于WEB开发者来说很是熟悉,在PC互联网时代没少与其打交道。进入移动互联网之后,随着移动设备屏幕的解析度越来越高,衍生了一些关于屏幕和像素的一些新概念,比如DPI,DP,PT,Retina,4K等等,本文对这些概念做一个简单的介绍。   DPI与PPI DPI(Dots...

2016-07-29 12:48:07

阅读数:6

评论数:0

HTML5: 两个viewport的故事(第一部分)

英文:http://www.quirksmode.org/mobile/viewports.html 翻译:http://weizhifeng.net/viewports.html   在这个迷你系列的文章里边我将会解释viewport,以及许多重要元素的宽度是如何工作的,比如&a...

2016-07-29 12:45:53

阅读数:9

评论数:0

HTML5: 两个viewport的故事(第二部分)

英文:http://www.quirksmode.org/mobile/viewports2.html 翻译:http://weizhifeng.net/viewports2.html   在这个迷你系列的文章里边我将会解释viewport,以及许多重要元素的宽度是如何工作的,比如&...

2016-07-28 05:23:30

阅读数:16

评论数:0

CSS3 媒体查询移动设备尺寸 Media Queries for Standard Devices (包括 苹果手表 apple watch)...

1. Phones and Handhelds a) iPhones /* ----------- iPhone 4 and 4S ----------- */ /* Portrait and Landscape */ @media only screen and (mi...

2016-07-28 05:18:29

阅读数:15

评论数:0

CSS3: 移动端开发中 max-device-width 与 max-width 的区别

翻译自stackoverflow.com,源地址:http://stackoverflow.com/questions/6747242/what-is-the-difference-between-max-device-width-and-max-width-for-mobile-web   ...

2016-07-28 05:17:55

阅读数:36

评论数:0

CSS:媒体查询 CSS3 Media Queries

定义和使用 使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。 当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。   浏览...

2016-07-28 05:11:11

阅读数:9

评论数:0

CSS: SASS用法指南 (附视频)

  观看视频:  CSS: SASS用法指南     学过CSS的人都知道,它不是一种编程语言。 你可以用它开发网页样式,但是没法用它编程。也就是说,CSS基本上是设计师的工具,不是程序员的工具。在程序员眼里,CSS是一件很麻烦的东西。它没有变量,也没有条件语句,只是一行行单纯的描述...

2016-07-28 05:05:52

阅读数:7

评论数:0

九张 Gif 图回顾 Web 设计的 25 年历史

原文出处: fastcodesign   译文出处:码农网 – 小峰   Froont,一家为web设计师制作工具的旧金山公司,用9个GIF格式动画来表现网页设计在过去25年的发展历程。如果你想知道为什么CSS这么重要,为什么Flash会逐渐淘汰,这些动画图或许能让你一窥究竟。 网页...

2016-07-27 10:51:30

阅读数:10

评论数:0

提示
确定要删除当前文章?
取消 删除
关闭
关闭