关于css3我先介绍几个简单的选择器:
先进行设置:
字符串匹配属性选择器:
E[alt^="a"] 选择属性中以a开头的元素:
E[alt$="a"] 选择属性中以a结尾的元素:
E[alt*="a"] 选择属性中包含a的元素:
见以下例子:
结果如下:
伪类选择器:
先看以下的例子:
结果:
以上是几个选择器作用的结果,下面我依次讲解例子中各选择器的作用:
1.E:nth-child():匹配父元素中的第几个子元素
2.E:nth-last-child():匹配父元素中倒数第几个子元素
3.E:nth-of-type():匹配同级元素中第几个E元素
4.E:nth-last-of-type():匹配同级元素中倒数第几个E元素
5.E:last-child:匹配父元素中的最后一个子元素是否是E
6.E:first-of-type:同级中的第一个E元素
css3特效
边框特效:box-shadow
首先进行设置:
结果:
以上的box-shadow的属性值依次代表:水平偏移量,垂直偏移量,边框模糊度,阴影大小,阴影颜色.
圆角边框(border-radius):
代码如下:
效果:
其中10px为圆角的范围.
文本阴影:
代码如下:
结果:
以上的text-shadow的属性值依次代表:水平偏移量,垂直偏移量,阴影模糊度,阴影颜色.
关于文本溢出(text-overflow):
效果:
文本溢出的值以...的形式隐藏
text-overflow的clip属性值:
效果:
文本溢出的内容被隐藏不显示.
2D转换:
在要转换的对象里面设置:
transition: all 2s linear
表示转换对象的所有元素,转换持续时间,转换方式.
设置对象的触发条件及方式.
.outer:hover .inner{
transform:translate(100px,100px)
}
简单动画:
先设置动画:
animation:名称 过渡时间 方式 反向运动 循环播放
播放动画设置:
@keyframes 动画名称{
0%{
transform:(方式)translate(0,0)
}
25%{
transform:(方式)translate(200px,0)
}
50%{
transform:(方式)translate(200px,200px)
}
75%{
transform:(方式)translate(0,200px)
}
100%{
transform:(方式)translate(0,0)
}