人人都能用CSS3

人人都能用CSS3

最近看了CSS3，发现很多动画和好看的效果，看后也有了很多设计的想法，希望在之后的项目里多使用CSS3

一些常用的CSS3核心属性

1. 圆角效果==border-radius==

.foo
{
    border-radius:10px;
}

1. 文本阴影==text-shadow==

.p
{
    text-shadow:1px 1px 2px #999;
}

1. 盒阴影==box-shadow==

.foo
{
    box-shadow:1px 1px 2px #999;
}

1. 多重背景图像==multiple background images==

   CSS3之前仅可应用一张图片

body
{
    background: url(img1.png) no-repeat top left,
    url(img2.png) repeat-x bottom left,
    url(img3.png) repeat-y top right;
}

1. 透明度==opacity==

   1为完全不透明，0为完全透明

.foo
{
    opacity: 0.5;/*50%透明度*/
}

1. RGBA

   rgba不是CSS的属性，使CSS3一个新的颜色模块，添加制定透明度和色彩的功能

.foo
{
    color: rgba(0,0,0,0.75);/*黑色，75%透明度*/
}

供应商的特定前缀

属性名称前添加前缀关键词标志着正在研发中，每一个浏览器供应商都有自己的前缀，本质上命名各自的实验属性。

供应商	前缀
WebKit	-webkit-
Mozilla	-moz-
Opera	-o-
Microsoft	-ms-
Chrome	-chrome-

CSS3的过渡

CSS过渡允许CSS的属性值在一定的时间区间内平滑的过渡

a.foo
{
    background: #fff;
    transition-property: background;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}
a.foo: hover
{
    bavkground: #000;
}

声明中过渡包含的3个属性值：
- 执行过渡的属性
- 过渡延续的时间
- 在延续时间过渡的速率变化
除了这三个属性外还可添加延迟过渡属性

transition-delay: 0.5s;

可以通过速记过渡属性简化声明

a.foo
{
    background: #fff;
    -webkit-transition: background 0.3s ease;
    -moz-transition: background 0.3s ease;
    -o-transition: background 0.3s ease;
    transition: background 0.3s ease;
}
a.foo: hover,
a.foo: focus
{
    bavkground: #000;
}

可以同时过渡多个属性

a.foo
{
    background: #fff;
    -webkit-transition: background 0.3s ease,color 0.2s linear;
    -moz-transition: background 0.3s ease,color 0.2s linear;
    -o-transition: background 0.3s ease,color 0.2s linear;
    transition: background 0.3s ease,color 0.2s linear;
}
a.foo: hover,
a.foo: focus
{
    bavkground: #000;
    color: #ccc;
}

可以同时过渡所有可能的属性

但这些属性的持续时间和时间函数就必须相同了

a.foo
{
    background: #fff;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
a.foo: hover,
a.foo: focus
{
    bavkground: #000;
    color: #ccc;
}

CSS3的变形

在二维空间将CSS渲染的元素进行变形

scale缩放

a:hover img
{
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
}

scale(2)会放大1倍，scale(0.5)会缩小一倍

选择设置变形开始的位置，默认为图片中心

a:hover img
{
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
    -o-transform-origin: bottom left;
    transform-origin: bottom left;
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
}

从左下角开始变形

rotate旋转

a:hover img
{
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    transform: rotate(-10deg);
}

多数浏览器都已支持从-1到-360度的旋转和从1到360度的旋转

skew倾斜

a:hover img
{
    -webkit-transform: skew(-10deg,30deg);
    -moz-transform: skew(-10deg,30deg);
    -o-transform: skew(-10deg,30deg);
    transform: skew(-10deg,30deg);
}

两个参数分别表示x坐标和y坐标上的倾斜角度，也可只写一个参数，则x和y坐标上值相同

translate平移

a:hover img
{
    -webkit-transform: translate(20px,40px);
    -moz-transform: translate(20px,40px));
    -o-transform: translate(20px,40px);
    transform: translate(20px,40px);
}

两个参数表示x和y坐标上的平移距离

CSS3渐变

因为语法并不直观，记住供应商之间区别也很困难，因此推荐使用在线的渐变代码生成器
http://css88.com/tool/css3Preview/

---

作为一个目标而存在的东西，总是那么美丽而优雅