首页 专题 H5案例 前端导航 UI框架

clip 和 clip-path

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

Git学习笔记

Git是一个开源的分布式版本控制系统,可以有效、高速的处理从很小到非常大的项目版本管理。
阅读 312 · 评论 0 · 喜欢 1 阅读全文

Markdown简明语法

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

阅读 191 · 评论 0 · 喜欢 1 阅读全文

::selection

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

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

变成了绿色背景了。
阅读 173 · 评论 0 · 喜欢 1 阅读全文

用CSS3来制作倒影(box-reflect)

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

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

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

往后会继续更新。如果你有更多相关的经验,欢迎在下面评论。
阅读 173 · 评论 0 · 喜欢 1 阅读全文

简单的粒子动画

在这篇文章中,我将分享我的个人介绍(http://ghmagical.com/about)里的粒子动画是如何实现的。
这里是第二种动画,不过调用只是改变一个参数而已:
阅读 168 · 评论 0 · 喜欢 1 阅读全文

HTML5的download属性

有些时候,我们需要提供一个下载按钮来下载一张图片,该如何实现呢?
在以前,我们都是通过后台处理来下载,比如php:

header('Content-type: image/jpeg');   

header("Content-Disposition: attachment; filename='meinv.jpg'"); 

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

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

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

阅读 287 · 评论 0 · 喜欢 1 阅读全文

初识WAAPI

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

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

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


阅读 398 · 评论 0 · 喜欢 1 阅读全文

用css3实现立方体

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

注:x轴平行,y轴垂直,z轴指向正对你的屏幕。z轴的零点就是屏幕所在的平面。
阅读 235 · 评论 0 · 喜欢 1 阅读全文