CSS3-部分样式
边框:
border-radius:圆角边框,可以写绝对值,也可以写百分比(可以让不同的方向进行改变)
box-shadow:阴影,从左往右,分别为水平偏移方向,垂直偏移方向,模糊半径(阴影大小),扩展半径(变大),最后一个是阴影颜色
box-shadow:0 0 0 0 color(可以使用半透明:ragb(0,0,0,0))
border-image:边框图片
一个class可以引入多个类
背景
background-size:大小
background-origin:规定背景图片的定位区域,从什么地方开始
background-repeat:平铺方式
文本效果
text-shadow:文本阴影,有水平,垂直,模糊三个值,和box-shadow一样,但是少了扩展
字体
字体网站(找字网:zhaozi.cn;)【fontcreator】自己造字体的软件
@font-face:使用自定义字体
font awesome:特殊符号引用地址
2D转换
通过transform来实现。
translate():位移,下面代码表示水平和垂直方向各位移100像素,第一个变量为X轴,第二个变量为Y轴。变换的过程中,位置不变。
transform:trnslate(100px,100px)
rotate():旋转角度,顺时针旋转,deg为旋转的符号
transform:rotate(10deg)
scale():缩放 表示缩放2倍
transform:rotate(10deg) scale(2)
skew:推到,表示在x,Y轴推到45度,可以在X和Y 进行推到斜切
transform:skew(45deg)
matrix():矩阵,一般不用
过渡
transition:属性,移动,从哪儿移动到哪儿
transition-delay
linear:匀速;ease:满加速到匀速最后变慢结束;cubl-bezier:贝塞尔曲线,通过两个锚点对线条进行控制,利用贝塞尔曲线可以模拟各种物体的运动模式。
动画
@keyframes 通过关键帧进行规则
animation 通过属性进行调整(具体可查W3C中css动画)
animation:animation-name:动画名称,后面的name可以修改;
书写解释:属性:名字,时间,方式,次数
animatename从哪儿开始,到哪儿结束
书写方法:
animation:animation-name 3s linear 1
@keyframes animatename{
from{
}
to{
}
}
第二种方法:
@keyframes animatename{
0%{
}
100%{
}
}