常用css3属性

浏览数：38 / 时间：2015年06月09日

整理下日常用到的一些css3属性

1、颜色rgba() rgb表示红、绿、蓝三个通道的颜色，整数取值范围0~255 + alpha透明通道:值从0到1

　　使用rgba的a透明值和opacity的区别是:

　　opacity能把所有子元素都带有透明效果，所以通常会单独用一个定位层来设定opacity透明。

　　rgba中的a只改变当前元素的透明。

2、盒子阴影 box-shadow: x轴偏移量 y轴偏移量模糊半径阴影的尺寸阴影的颜色 inset内部阴影|outset外部阴影

　　偏移量为正数右下方向的阴影

　　偏移量为负值左上方向的阴影

　　偏移量为0 上下左右方向的阴影

<style>
    .box-shadow{
        width: 200px;
        height: 100px;
        background: #e6e6e6;
        -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, .3);
        -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, .3);
        box-shadow: 0px 0px 4px rgba(0, 0, 0);
    }
</style>
<div class="box-shadow">css3阴影使用</div>

3、圆角 border-radius: length | %

　　数值px或是百分比宽高设置一样的时候设置50%-100%为正圆。
　　单独设置一个角度的圆角属性为border-top-left-radius: 5px;

<style>
    .radius{
        width: 100px; 
        height: 100px;
        border: 1px solid #008451;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 50%;
    }
</style>
<div class="radius">border-radius</div>

4、animation基本用法，指定一个动画效果名称以及动画持续的时间animation: name duration。

　　animation-name 动画效果名称

　　animation-duration 动画持续的时间

　　animation-timing-function 动画的速度曲线 linear匀速 ease慢-快-慢 ease-in低速开始 ease-out低速结束 ease-in-out低速开始和技术

　　animation-delay 动画开始之前的延迟

　　animation-iteration-count 动画播放的次数。默认情况动画只播放一遍，设置为infinite可以让动画无限播放，也可以指定播放的次数比如 2 等。

　　animation-play-state 动画中途提供了播放状态方法running 和 paused 两个属性值; 定义paused动画状态暂停，设置为running改为继续播放。

　　animation-fill-mode 动画结束之后，通常会跳回起始状态，该属性设值为forwards可以在动画结束之后保持在结束状态； backwards让动画回到第一帧的状态； none回到动画没开始的状态

　　使用@keyframes name {}定义动画效果,一般设置2个状态起始状态即from{} to{} 或者 0%{} 100%{}中间需要过渡再添加更多状态。

<style>
    .anim{width: 400px; height: 40px; border: 1px solid #000; text-align: center; line-height: 40px; animation: colorHover 1s; }
    .anim:hover{}
    @keyframes colorHover{
        0%{margin-left:0; background-color: #333333;}
        50%{margin-left:500px; background-color: #008451;}
        100%{margin-left:0; background-color: #0099FF;}
    }
</style>
<div class="anim">animation动画</div>

5、transition 过渡

　　transition-property 过渡效果的css属性的名称

　　transition-duration 完成过渡的持续时间

　　transition-timing-function 过渡的速度曲线

　　transition-delay 定义过渡开始的延迟时间

　　transition: width 1s, height 1s 1s;同一行能定义多个属性的过渡效果。

　　transition需要事件触发，无法加载自动发生；不能重复实现过渡效果，除非一直触发；只能定义初始状态，中间不能定义。

<style>
.trans{width: 400px; height: 40px; border: 1px solid #000; text-align: center; line-height: 40px; transition: width 1s ease, height 1s;}
    .trans:hover{ width: 800px; height: 100px;}
</style>
<div class="trans">transition过渡</div>

6、transform 对元素进行旋转、缩放、移动或倾斜

　　rotate(angle); 元素顺时针旋转角度

　　scale() 元素尺寸大小缩放，按照给定的宽度(x轴方向)和高度(y轴方向)

　　translate(x, y); 2d转换元素从当前的位置像x坐标，坐标轴移动x, y距离

<style>
    .rotate{display:inline-block; border: 1px solid #333; padding: 10px 20px; transform: rotate(30deg);}
    .scale{display: inline-block; border: 1px solid #333; padding: 10px 20px; transform: scale(2);}
    .translate{display: inline-block; border: 1px solid #333; padding: 10px 20px; transform: translate(200px, 200px);}
</style>
<div class="rotate">rotate属性</div>
<div class="scale">scale属性</div>
<div class="translate">translate属性</div>