css3重复渐变效果

css3重复渐变 repeating gradient即重复让线性渐变（linear-gardient）或者径向渐变（radial-gradient）重复执行。

用法是repeating-linear-gradient(重复线性渐变)和repeating-radial-gradient(重复径向渐变)

1、重复径向渐变

图1

图1实现代码：

background: -webkit-repeating-radial-gradient(#ff0, #ff0 5px, #f00 5px, #f00 10px);

2、重复线性渐变

浏览器支持

想读更多 ->

CSS3选择器（：nth）

首先第一个网站

https://css-tricks.com/examples/nth-child-tester/

这个学习css3的选择器简单明了，想研究的可以看看哈

接下来第二个网站

http://lea.verou.me/demos/nth.html

由于两个网站都是英文的，对于不会英文的可能敬而远之，如果你用的谷歌浏览器（这里只介绍这款浏览器），可以安装百度翻译的扩展插件来翻译，如果你有更好的翻译插件那就忽略上面的，这款插件百度翻译官网有下载，想要的也只可以找我索要

关于CSS3的所有的选择符，可以参考网站： http://www.w3school.com.cn/cssref/css_se

想读更多 ->

CSS3 overflow-x 属性

实例

如果它溢出了元素的内容区-剪辑div元素的左/右边缘内容：

div

{

overflow-x:hidden;

}

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性定义及使用说明

overflow-x属性指定如果它溢出了元素的内容区是否剪辑左/右边缘内容。

提示: 使用overflow-y属性来判断顶部和底部边缘是否裁剪。

想读更多 ->

CSS3 column-gap 属性

实例

指定列之间的40个像素的差距：

div

{

column-gap:40px;

-moz-column-gap:40px; /* Firefox */

-webkit-column-gap:40px; /* Safari and Chrome */

}

浏览器支持

属性定义及使用说明

column-gap的属性指定的列之间的差距。

注意： 如果指定了列之间的距

想读更多 ->

css3实现加载动画效果

css3实现加载动画效果,运用到了CSS3的动画过渡效果，适合用在一些等待刷新的页面！

效果如下：

具体代码实现

html:

css:

想读更多 ->

css3 属性实现画动态搞笑动画

css3 属性实现画动态搞笑动画

利用工作之余，可以用学过的知识，写一些好玩的效果

鼠标移上去后：

代码

html:

@keyframes

定义动画各个阶段的状态的代码段。比如开始态，结束态，中间态（使用百分比表示）。

animation-name

使用 @keyframes 定义的状态集合名称，如上面的 exampleName。

想读更多 ->

CSS3 2D 转换

CSS3 转换

CSS3转换，我们可以移动，比例化，反过来，旋转，和拉伸元素。

它是如何工作？

变换的效果，让某个元素改变形状，大小和位置。

您可以转换您使用2D或3D元素。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

想读更多 ->

《CSS笔记》---CSS3 选择器(五)

CSS3 选择器

在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。

"CSS" 列指示该属性是在哪个 CSS 版本中定义的。（CSS1、CSS2 还是 CSS3。）

想读更多 ->