兼容性问题一直是让前端工程师脱发的主要罪魁祸首,所以,利用一些神器工具可以挽救你的发际线。先来一个兼容性全包括的代码片段,这是IE9不支持圆角的全系列:.gradient{
background: #d91915; /* Old browsers ...
2018年08月12日 6658
关于"css3"的文章
CSS教程
CSS3第十三课: steps animation逐帧动画,你不应该错过的最详篇!
animation动画除了可以实现补间动画外,还可以完成逐帧动画。在animation的属性中,有个属性animation-timing-function一共具有如下这些值,来自于MDN。/* Keyword values */
animation-timing-fu...
2018年06月27日 5663
CSS教程
CSS3第十二课:强大的多时间段animation动画!
animation动画与transition过渡动画有两个明显的区别:1、transition过渡动画只能执行一个时间段的动画,从初始到结束。而且必须有事件触发,比如hover事件,或者添加了新的class属性等。2、animation动画可以分时间段执行,比如第一个时间段执行一段动画,第二个时间段...
2018年06月04日 4666
CSS教程
CSS3第十一课:transform2D变形,注意多个变形的执行顺序!
用过ps的童鞋几乎都知道ctrl+T自由变换工具,我觉得CSS3 transform就汲取了ps变形的精华,好好地继承了这三板斧精神。
一、transform变形
实现对元素的缩放、移动、旋转、倾斜,分别对应以下几个方法。
注意:变形...
2018年04月16日 5258
CSS教程
CSS3第十课:transition过渡动画(内附神器!)
在十年前,我用flash做动画的时候,总结了一下flash的运动规律,主要有形状、大小、位置、角度、颜色、透明度、加减速等变化。没想到移动端异军突起,似乎一夜之间,flash就没落了。想起自己曾经每天必逛的闪吧,在2012年也停止更新,虽然现在网站还在, 但也只是一个象征了,偶尔回去悼念一下,怀念过...
2018年03月30日 5253
CSS教程
CSS3第九课:重复放射性渐变repeating-radial-gradient
repeating-radial-gradient重复性放射渐变和radial-gradient放射渐变的参数都是一样的,差别在于是否利用渐变单元扩展至整个容器。可以先看看这篇详细介绍放射性渐变的文章↓CSS3教程:background-image之放射性渐变(radial-gradient)详解一...
2018年03月28日 5005
CSS教程
CSS3第八课:重复线性渐变repeating-linear-gradient
很早以前写过一篇线性渐变的文章,如果还没有掌握CSS3中的线性渐变,建议先看一下。CSS3教程:background-image之线性渐变(linear-gradient)最in版!时隔一年半,再把它的姐妹篇——重复线性渐变搞定,才算是真正完结了吧。忍不住感叹,How time flies!这个属性...
2018年03月24日 6495
CSS教程
CSS3第七课:background多重背景及新增属性
关于CSS3的边框、圆角、阴影等新特性,在以前的CSS3教程里面已经详细介绍过,在这个系列里面就不再啰嗦,有兴趣的可以直接查看CSS3教程系列。
这篇文章详细讲解一下CSS3多重背景这个新特性,真的是很强大。
一、多重背景的用法
ba...
2018年03月24日 4950
CSS教程
CSS3第六课:web中的颜色值以及rgba和opacity的区别
每次听一些web前端开发大神讲公开课或者看录制的视频,很多时候脱离了UI设计稿,大神们自己做案例的时候,都是用RGB三原色来搭配,或者直接red/blue/yellow/gray等颜色值,看得我眼睛火辣辣的痛,强烈建议web前端们也要把自己的审美,特别是色彩审美提高一下。审美教育必须从娃娃抓起!1、...
2018年03月22日 4539