CSS3变换、过渡、动画效果
为元素创建圆角
1.四个相同的圆角
-webkit-border-radius:10px;
border-radius:10px;
2.一个圆角
-webkit-border-top-left-radius:10px;
border-top-left-radius:10px;
3.椭圆型圆角
-webkit-border-radius:10px/50px; /*前者是圆角在水平方向的半径,后者是圆角在垂直方向上的半径*/
border-radius:10px/50px;
4.圆形
-webkit-border-radius:50%;
注意:有时元素背景会透过圆角,需要在border-radius后声明
background-clip:padding-box;
为文本添加阴影
/*四个值:水平偏移量,垂直偏移量,模糊半径,颜色*/
text-shawdow:3px 3px 7px #e8e8e8;
/*默认*/
text-shawdow:none;
为元素添加阴影
-webkit-box-shawdow:x-offset,y-offset,blur-radius,inset(内嵌),spread(扩张或收缩阴影),color;
多重背景
background-color:#fff;//备用颜色
background-image:url(01.png),url(02.jpg);//图片路径
background-position:50%,100%; //成对的x-offset,y-offset
渐变
使用前需要加前缀
- Chrome:-webkit
- Firefox:-moz
- Opera:-o
1.备用背景颜色
background:color;
2.线性渐变
background:linear-gradient(to right,red,yellow);
//或者
background:linear-gradient(270deg,red,yellow);
//控制颜色停止位置
background:linear-gradient(red 10%,yellow 70%,blue);
3.径向渐变
background:radial-gradient(yellow,red);//默认,渐变原点是中间
background:radial-gradient(at top,yellow,red);//控制渐变原点位置
background:radial-gradient(100px 50px,yellow,red);
background:radial-gradient(70% 90%,yellow,red);/控制渐变尺寸
background:radial-gradient(closest-side at 70px 60px,yellow, lime,red);//控制渐变中心的位置,并指出向外延伸的颜色
不透明度
opacity:.5//影响的是整个元素
background-color:rgba(225,225,225,.6);//仅影响背景色
伪元素
//为Read More后添加双箭头
.more:after{
content:"》";
}
气泡的制作(矩形+小三角)待补充
???
sprite合并图像
//根据文件类型制作a前的图标
.incon:before{
background-image:url();
content:" ";
display:block;
height:16px;
widht:16px;
width:16px;
}
//识别以.docx为后缀的文件,并插入相应的前部图片
a[href=".docx"]:before{background-positon:-17px 0;}
2D、3D转换
移动、缩放、转动、拉伸
2D:
translate()平移
transform:translate(200px,100px);
-webkit-transform:translate(200px,100px);/*safati,chrome*/
-ms-transform:translate(200px,100px);/*IE*/
-o-transform:translate(200px,100px);/*opera*/
-moz-transform:translate(200px,100px);/*firefox*/
rotate()旋转
transform:rotate(180deg);
scale()缩放
transform:scale(1,2);/*倍数:宽度,高度*/
skew()倾斜
transform:skew(50deg,50deg);
matrix()矩阵
3D:
rotateX()
rotateY()
transform:rotateX(100deg);
动作过渡
.div{
widtxh:100px;
height:100px;
transition:width 2s,height 2s,transform 2s;/*执行时间*/
transition-delay:2s;/*延时时间*/
}
.div:hover{
width:200px;
height:200px;
transform:rotate(90deg);
}
Transition
从某一固定值平滑地过渡到另一属性值
transition-property:background-color;
transition-duration:3s;
transition-timing-function:linear;
Animation
遵循@keyframe规则
规定动画的时长
规定动画的名称
定义关键帧
div{
width:100px;
height:100px;
background-color:red;
positon:relative;
animation:anim 5s infinite alternate;/*连续*/
}
@keyframes anim{
/*开始帧*/
0%{background:red;left:0;top:0}
25%{background:blue;left:200px;top:0}
50%{background:red;left:200px;top:200px}
75%{background:blue;left:0;top:200px}
/*结束帧*/
100%{background:red;left:0;top:0}
}
实现动画的方法
linear开始和结束以相同的速度变化
ease-in由慢到快
ease-out由快到慢
ease
ease-in-out
多列
column-count列数
column-gap列距
column-rule线
.div{
column-count:3;
column-gap:30px;
column-rule:5px outset red;
}
应用:瀑布流
.container{
column-width:25px;
column-gap:5px;
}
.container div{
width:250px;
margin:5px 0;
}