文章关键字 ‘clip’

3种纯CSS实现中间镂空的12色彩虹渐变圆环方法

2017年11月7日,星期二

上周我做了个demo,使用SVG实现了一个彩条圆环倒计时效果,使用SVG实现的优点是兼容性非常好,不足在于学习成本比较高,于是我就琢磨有没有更简单的方法实现类似的多彩圆环渐变效果,最好纯CSS就能搞定。绞尽脑汁想出了下面三种实现方法……

阅读全文…

基于clip-path的任意元素的碎片拼接动效

2016年06月7日,星期二

看电影的时候会有特效,反派被攻击的粉碎,依然可以零零碎碎的拼接成完整体。在网页中,我们可以使用类似的效果,而且使用CSS3就可以,而且可以让任意的元素有这种效果。不信?你点击去看看就知道了~~

阅读全文…

CSS hover效果的逆向思维实现

2013年04月18日,星期四

如果一件事件,下手很难,结果很简单。可以试试逆向思维,从结果入手,说不定就会找到出路。这个道理在简单的CSS世界中同样适用,对于hover效果,如果下手很难,最后的效果却不难实现。我们可以换个思维,先实现结果,然后在hover实现比较难下手的那个效果,找到出路,原路返回,问题自然更加轻松解决了。

本文的例子更多是抛砖引玉……

阅读全文…

您可能不知道的CSS元素隐藏“失效”以其妙用

2012年02月14日,星期二

在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间;有的可以响应点击,有的不能响应点击。然而,其中有些隐藏方法会出现“失效”的情况。而这些“失效”的情况往往会有一些和巧妙的应用。本文就是介绍这些“失效”情况并列举了其一些比较巧妙的应用。一如既往,demo页面,截图,必要的代码展示,总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

CSS clip:rect矩形剪裁功能及一些应用介绍

2011年04月2日,星期六


CSS中有一个属性叫做clip,为修剪,剪裁之意。配合其属性关键字rect可以实现元素的矩形裁剪效果。此属性安安稳稳地存在于CSS2.1中,且使用上基本上没有类似于max-height/display:table-cell等浏览器的兼容性问题。但是,貌似大家很少使用此属性。实际上clip是实在在的可以在实际项目中大放光彩的东东。

本文一如既往,提供必要的demo页面以及源代码展示,提供属性的一些具有代表性的实例。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…