首页 专题 H5案例 前端导航 UI框架
翻页太辛苦，试试直接搜索

月份：2016年08月

11篇文章 作者： TG

TG  ·  2016-08-30

clip 和 clip-path

一、Clip
CSS的clip属性并不是CSS3的新属性，而是在CSS2中已经存在了，不过在实际开发中，这个属性的使用率比较低，我之前也是瞄过这个名称，最近看过一个网站的加载动画，才知道其的强大。
下面就一起来学学吧！
Clip属性在W3C官网是这样进行描述的：“通过对元素进行剪切来控制元素的可显示区域，默认情况下，元素是不进行任何剪切的，但是也有可能剪切区域也显示的设置了clip属性”。
阅读 5595 阅读全文

TG  ·  2016-08-28

Git学习笔记

Git是一个开源的分布式版本控制系统，可以有效、高速的处理从很小到非常大的项目版本管理。
阅读 3931 阅读全文

TG  ·  2016-08-25

Markdown简明语法

标题
如果你要将一段文字定义为标题，在markdown中，不必加<h1>等标签，我们只要在这段文字前加 # 号即可。
如下图：

阅读 4654 阅读全文

TG  ·  2016-08-24

::selection

在默认情况下，选择网站文本都是深蓝的背景，白色的字体的，如下图：

现在请你选择一下本网站的文字看看，是不是发现是这样的：

变成了绿色背景了。
阅读 3767 阅读全文

TG  ·  2016-08-24

用CSS3来制作倒影（box-reflect）

有一句话说的好：“横看成岭侧成峰，远近高低各不同”，有些时候，我们需要从不同的角度去欣赏mm，如下图：

在早期，要实现这种效果，我们只能乖乖的找设计去制作，然后在页面上插入一张图片，但是随着CSS3的出现，我们可以纯代码实现，如何实现呢？就是通过CSS3的box-reflect属性。
阅读 4827 阅读全文

TG  ·  2016-08-24

CSS3被人忽略的强大属性

随着CSS3的出现，许多早期只能借助于类似于Photoshop这样的制作图软件来实现的酷炫效果，现在都可以用代码来实现，而且可控，但在实际开发中，有部分属性我们并不常用，久而久之就被我们忽略了。在这篇文章中，我整理了一下：

  1. 用CSS3来制作倒影（box-reflect）
  2. ::selection
  3. 伪类 :target
  4. rem、vm
  5. filter
  6. CSS3的calc()使用
  7. Clip / clip-path
  8. image-set实现Retina屏幕下图片显示
  9. CSS Counters
  10. text-align-last

往后会继续更新。如果你有更多相关的经验，欢迎在下面评论。
阅读 3237 阅读全文

TG  ·  2016-08-19

简单的粒子动画

在这篇文章中，我将分享我的个人介绍（http://laixiazheteng.cn/about）里的粒子动画是如何实现的。
这里是第二种动画，不过调用只是改变一个参数而已：
阅读 3352 阅读全文

TG  ·  2016-08-17

HTML5的download属性

有些时候，我们需要提供一个下载按钮来下载一张图片，该如何实现呢？
在以前，我们都是通过后台处理来下载，比如php：
header('Content-type: image/jpeg');   
header("Content-Disposition: attachment; filename='meinv.jpg'"); 

可是这种方式，要兼顾前端后端，很是繁琐。

那么有什么方式可以让我们快速的实现下载呢？

答案是肯定，那就是我们强大的HTML5里的download属性。

阅读 4425 阅读全文

TG  ·  2016-08-17

初识WAAPI

在早期，当我们的网页需要动画时，我们首先想到的是flash动画、Gif图片动画、JavaScript动画以及jQuery.animate()，而随着css3属性的出现发展，越来越多的Web应用都使用css3制作酷炫的动画。
虽然实现动画的技术可以有多种不同的实现方式，但每种技术都存在一定的缺点，比如flash动画比较繁琐，JavaScript动画需要实时记录动画改变的值，复杂的gif图片动画有时会导致页面加载比较慢等等。
而WAAPI，全称：Web Animation API，是W3C提出的，它致力于集合CSS3动画的性能，JavaScript的灵活，动画库的丰富等各家所长，将尽可能多的动画控制由原生浏览器实现，并添加许多CSS不具备的变量、控制以及调试选项等。
下面，我们就真正来体会一下WAAPI的使用和神奇！
阅读 3867 阅读全文

TG  ·  2016-08-14

一个自己开发的移动UI框架

一个简单的移动UI框架，正在不断完善。


阅读 4435 阅读全文

TG  ·  2016-08-09

用css3实现立方体

随着CSS3的出现，各大网站出现了许多酷炫的3D动画效果，不再局限于平面UI。下面，我就分享一下使用css 3D效果的经验。
首先，要制作3D效果，我们需要知道Web浏览器中是怎样确定坐标轴的。如图：

注：x轴平行，y轴垂直，z轴指向正对你的屏幕。z轴的零点就是屏幕所在的平面。
阅读 3574 阅读全文