css3动画按钮效果

用css3动画实现一些炫酷的按钮效果，该文章主要讲解其中一种效果！如下：

实现代码

html：

css:

想读更多 ->

CSS3 用户界面

CSS3 用户界面

在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸，框尺寸和外边框。

您将了解以下的用户界面属性：

resize

box-sizing

outline-offset

浏览器支持

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

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

CSS3 调整尺寸(Resizing)

CSS3中，resize属性指定一个元素是否应该由用户去调整大小。

这个 div 元素由用户调整大小。 (在 Firefox 4+, Chrome,

想读更多 ->

css3定制你的BBQ

原文地址：http://www.jianshu.com/p/4b6e22cb0343

不用flash，不用JS，仅仅CSS3就可以绘制一副精美的图，实现并不复杂，代码也不会很多，而且效果很赞。

BBQ

看到这幅图，该如何着手呢？了解border-radius、box-shadow的具体使用方法后，你会发现原来竟如此简单。

推荐下我的前端群：524262608，不管你是小白还是大牛，小编我都挺欢迎，不定期分享干货，包括我自己整理的一份2017最新的前端资料和零基础入门教程，欢迎初学和进阶中的小伙伴。

border-radius的语法

border-radius:10px 20px 30px 40px

想读更多 ->

CSS3实现鼠标经过翻转

CSS3实现鼠标滑过翻转，鼠标移上去，会翻转到另一面！效果如下：

实现代码：

想读更多 ->

CSS3 3D翻转效果

互联网给我们带来方便的同时，也时常让我们感到困惑。随便搜搜就出一大堆结果，然而总是有大量的重复和错误。小妖发出的内容，都是自己实测过的，有问题请留言。

今天我们说一下如何用 css3 实现 3D 翻转，效果如下：

其实就几行代码

HTML部分：

flip 是总的容器，position: relative;

front 是正面，back 是背面，只需要把 flip 翻转就可以了

CSS部分：

浏览器支持

生成的HTML文件源码（部分）：

运行效果：

广东IT优就业

从上到下

#grad {

background: -webkit-linear-gradient(red, blue);

background: -o-linear-gradient(red, blue);

background: -moz-linear-gradient(red, blue);

background: linear-gradient(red, blue);

}

从左到右

#grad {

background: -webkit-linear-gradient(left, red , blue);

background: -o-linear-gradient(right, red, blue);

background: -moz-linear-gradient(righ

想读更多 ->

CSS3 字体

CSS3 @font-face 规则

以前CSS3的版本，网页设计师不得不使用用户计算机上已经安装的字体。

使用CSS3，网页设计师可以使用他/她喜欢的任何字体。

当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。

您所选择的字体在新的CSS3版本有关于@font-face规则描述。

您"自己的"的字体是在 CSS3 @font-face 规则中定义的。

浏览器支持

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

Internet Explorer 9+, Firefox, Chrome, Safar

想读更多 ->

css3—动画animation

animation的使用要结合@keyframes来实现。

语法：

animation-iteration-count：

默认值是1，参数有：infinite（无线循环）或者数字（循环次数）。

animation-direction：

默认值normal（正常方向），alternate（正常与方向交替）

animation-play-state：

默认值是running（运动着），paused（暂停）

keyframes语法规则：

以@keyframes开头，后面加动画名字，同时大括号里面由百分比构成，或者使用from{}、to{}，from指的是0

想读更多 ->