CSS3基础及动画
CSS3设置边框
border-radius
用于创建圆角
示例:
border-radius:20px 10px 50px 30px;
四个属性值按顺时针排列(左上、右上、右下、左下)
圆形:
利用border-radius属性制作圆形的两个要点:
1.元素的宽度和高度必须相同
2.圆角的半径为元素宽度的一半,或者直接设置圆角半径值为50%
示例:
div{
width:100px;
height:100px;
border:4px solid red;
border-radius:50%;
}
box-shadow
用来添加阴影
语法:
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow为水平阴影的位置
v-shadow为垂直阴影的位置
blur为模糊距离
spread为阴影的大小
color为阴影的颜色
inset为阴影类型中的内阴影
示例:
div{
...
box-shadow:inset 3px 3px 10px #06C; /*内阴影*/
}
CSS3背景
background-size
规定背景图片的尺寸
值 | 说明 |
---|---|
length | 设置背景图片高度和宽度。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为auto(自动) |
percentage | 将计算相对于背景定位区域的百分比。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为auto(自动) |
cover | 此时会保持图像的纵横比并将图片缩放成完全覆盖背景定位区域的最小大小(图像比区域大,无法完全展示图片) |
contain | 此时会保持图像的纵横比并将图像缩放成适合背景定位区域的最大大小(图片比定位区域小) |
示例:
.img{
background-size:100% 100%;
}
background-origin
规定背景图片的定位区域
值 | 说明 |
---|---|
padding-box | 背景图像相对于内边距框来定位 |
border-box | 背景图像相对于边框盒来定位 |
content-box | 背景图像相对于内容框来定位 |
background-clip
规定背景的绘制区域
值 | 说明 |
---|---|
padding-box | 背景被裁剪到内边距框,不包含边框 |
border-box | 背景被裁剪到边框盒,包含边框 |
content-box | 背景被裁剪到内容框,不包含内边距部分 |
示例:
.img{
background-origin:padding-box;
background-clip:padding-box;
}
CSS3渐变
线性渐变linear-gradients
颜色沿着一条直线过渡:从左到右、从右到左、从上到下等
语法:
linear-gradient(position,color1,color2,....)
position为渐变方向,color1为第一种颜色,color2为第二种颜色
示例:
从上到下
#box1{background:linear-gradient(red,blue);}
从左到右
#box2{background:linear-gradient(to right,red,blue)}
从左上角到右下角
#box3{background:linear-gradient(to bottom right,red,blue)}
径向渐变radial gradients
圆形或椭圆形渐变,颜色不再沿着一条直线变化,而是从一个起点朝所有方向混合
语法:
radial-gradient(center,shape size,start-color,...,last-color);
示例:
颜色结点均匀分布的径向渐变
#box1{background:radial-gradient(red,green,blue);}
颜色结点不均匀分布的径向渐变
#box2{background:radial-gradient(red 5%,green 15%,blue60%);}
形状为圆形的径向渐变
#box3{background:radial-gradient(circle,red,green,blue);}
CSS3文本效果
text-shadow
向文本添加阴影
属性值:
值 | 说明 |
---|---|
h-shadow | 必需,水平阴影的位置,允许负值 |
v-shadow | 必需,垂直阴影的位置,允许负值 |
blur | 可选,模糊距离 |
color | 可选,阴影的颜色 |
示例:
h1{
text-shadow: 5px 5px 5px #FF0000;
}
(艺术字效果)
text-overflow
当文本溢出包含元素时发生的事情
超出部分显示省略号操作:
1.white-space:nowrap 文本不会换行,在同一行继续
2.overflow:hidden 溢出隐藏
3.text-overflow:ellipsis 用省略号来代表被修剪的文本
示例:
h2{
width:150px;line-height:50px;border: 1px #ccc solid;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
CSS3字体
语法:
@font-face{
font family: 必需。规定字体的名称
src: 必需。定义字体文件的URL
font-weight: 可选。定义字体的粗细。默认是normal
font-style: 可选。定义字体的样式。默认是normal
}
(艺术字效果)
CSS3变形
CSS3变形是一些效果的集合
如:平移、旋转、缩放、倾斜效果
每个效果都可以称为变形(transform),他们可以分别操控元素发生平移、旋转、缩放、倾斜等变化
语法:
transform:[transform-function];
transform-function是指一个变形函数,可以是一个,也可以是多个,中间以空格分开.
变形函数
translate()
平移函数,基于X、Y坐标重新定位元素的位置
语法:
translate(tx,ty)
tx为X轴(横坐标)移动的向量长度
ty为Y轴(纵坐标)移动的向量长度
以0,0为起点
一个方向上的偏移:
translateX(tx)
表示只设置X轴的位移
translate(100px,0) == translateX(100px)
translateY(ty)
表示只设置Y轴的位移
translate(0,100px) == translateY(100px)
scale()
缩放函数,可以使任意元素对象尺寸发生变化
语法:
scale(sx,sy);
sx为横向坐标(宽度)方向的缩放量
sy为纵向坐标(高度)方向的缩放量
scale()函数可以只接收一个值,也可以接收两个值,只有一个值时,第二个值默认和第一个值相等。
scaleX(sx)
表示只设置X轴的缩放
transform:scale(2,0) == transform:scaleX(2)
scaleY(sy)
表示只设置Y轴的缩放
transform:scale(0,2) == transform:scaleY(2)
skew()
倾斜函数,取值是一个度数值deg
语法:
skew(ax,ay);
ax为水平方向(X轴)的倾斜角度
ay为垂直方向(Y轴)的倾斜角度
可以仅设置沿着X轴或Y轴方向倾斜
skewX()
表示只设置X轴的倾斜
skewY()
表示只设置Y轴的倾斜
rotate()
旋转函数,取值是一个度数值deg
语法:
rotate(a);
参数a单位使用deg表示,
参数a取正值时元素相对原来中心顺时针旋转
CSS3过渡
transition呈现的是一种过渡,是一种动画转换的过程,如渐现、渐弱、动画快慢等
CSS3 transition的过渡功能更像是一种“黄油”,通过一些CSS的简单动作触发样式平滑过渡
transition属性
语法:
transition:[transition-property transition-duration transition-timing-function transition-delay]
transition-property
指过渡或动态模拟的CSS属性,过渡属性
定义转换动画的CSS属性名称
属性值:
1.property:指定的CSS属性(width、height、background-color属性等)
2.all:指定所有元素支持transition-property属性的样式,一般为了方便都会使用all
transition-duration
指完成过渡所需要的时间
定义转换动画的时间长度,即从设置旧属性到换新属性所花费的时间,单位为秒(s)
transition-timing-function
指过渡动画函数
指定浏览器的过渡速度,以及过渡期间的操作进展情况,通过给过渡添加一个函数来指定动画的快慢方式
值 | 说明 |
---|---|
linear | 规定以相同速度开始至结束的过渡效果。(匀速) |
ease | 规定从慢速开始,然后变快,然后慢速结束的过渡过程(默认值) |
ease-in | 规定以慢速开始的过渡效果 |
ease-out | 规定以慢速结束的过渡效果 |
ease-in-out | 规定以慢速开始和结束的过渡效果 |
transition-delay
指过渡开始出现的延迟时间
过渡的触发机制
(1)伪类触发
:hover、:active、:focus、:checked
(2)媒体查询
通过@media属性判断设备的尺寸,方向等
(3)JavaScript触发
用JavaScript脚本触发
CSS3动画
animation属性
animation实现动画主要由两个部分组成:
1.通过类似Flash动画的关键帧来声明一个动画
2.在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效果
CSS3动画使用过程
1.设置关键帧
语法:
@keyframes 自定义animation名{
from{/*CSS样式写在这里*/}
percentage{/*CSS样式写在这里*/}
to{/*CSS样式写在这里*/}
}
示例:
@keyframes spread{
0%{width:0;}
33%{width:23px;}
66%{width:46px;}
100%{width:69px;}
}
2.浏览器兼容性
写兼容的时候浏览器前缀是放在@keyframes中间
如:
@-webkit-keyframes、(google浏览器)
@-moz-keyframes (火狐浏览器)
3.调用关键帧
语法:
animation : animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-play-state animation-fill-mode;
animation-name指由@keyframes创建的动画名称
animation-duration指过渡时间
animation-timing-function指过渡方式
animation-delay指延迟时间
animation-iteration-count指动画播放次数
animation-direction指动画的播放方向
animation-play-state指动画的播放状态
animation-fill-mode指动画开始之前和结束之后的操作
动画的播放次数animation-iteration-count
动画的播放次数
值通常为整数,默认值为1
特殊值infinite,表示动画无限次播放
动画的播放方向animation-direction
动画的播放方向
normal,动画每次都是循环向前播放
alternate,动画播放为偶数次则向前播放
动画的播放状态animation-play-state
动画的播放状态
running将暂停的动画重新播放
paused将正在播放的元素动画停下来
动画发生的操作animation-fill-mode
动画发生的操作
forwards表示动画在结束后继续应用最后关键帧的位置
backwards表示会在向元素应用动画样式时迅速应用动画的初始帧
both表示元素动画同时具有forwards和backwards的效果