首页 > 代码库 > 常用css3属性
常用css3属性
整理下日常用到的一些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>
常用css3属性