文章关键字 ‘linear-gradient’

CSS/CSS3 box-decoration-break属性简介

2019年01月5日,星期六

CSS box-decoration-break属性

CSS box-decoration-break属性可以指定元素片段在跨行、跨列或跨页(如打印)时候的样式渲染表现。

默认情况下,元素的跨行或跨列渲染都是裁剪分割,各得一部分,借助box-decoration-break属性,可以让换行,或者换列的各部分元素按照独立的样式进行渲染,活用这种特性,可以让我们的布局和样式表现更上一层。

阅读全文…

妙法攻略:渐变虚框及边框滚动动画的纯CSS实现

2018年08月30日,星期四

本文内容如题,介绍几个实现渐变虚线框的方法,介绍虚线滚动动画,实线滚动边框动画的实现,所有这些方法都是纯CSS实现,就算这些动画效果你实际项目用不到,但是其大开眼界的实现原理相信也会给你有所启示的。

一如既往,有demo实例,有源代码展示,和必要的截图,希望本文的内容能够对您的学习有所帮助。

阅读全文…

纯CSS实现蜡烛、火焰以及熄灭后烟雾效果

2018年05月16日,星期三

本文要展示的效果主要三部分:直立的红烛、跳动的火焰,腾起的烟雾,这三部分都是纯CSS实现的,有兴趣可以看看。

阅读全文…

几种CSS渐变背景图片transtion动画方法

2018年03月25日,星期日

background-image不支持CSS3 transition,因此,当CSS3 gradient渐变作为背景图片存在的时候,直接设置transition是不会有过渡效果的,那该怎么办呢?

阅读全文…

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

2017年11月7日,星期二

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

阅读全文…