一、transition
transition是复合属性,可以改变元素数值类的属性,例如宽高、背景颜色等。
一个元素从一个样式过渡到另外一个样式需要的时间,transition可以设置过渡的时间速度等。
如下代码,当鼠标移入div1元素时,会从#div1的样式变到#div1:hover的样式。
<style>
#div1{
width:100px;
height:100px;
background:red;
position:absolute;
/*transition-duration:1s;过程时间
transition-property:left;
transition-timing-function:ease-in-out;改变速度
transition-delay:1s;延时1s*/
transition:1s width,2s 0.5s left,3s 2.5s background;
left:10px;
top:10px;
}
#div1:hover{
width:200px;
height:200px;
left:100px;
background:blue;
}
</style>
transition-duration:1s;设置样式变化经历的时间(1秒);
transition-property:left;只改变某个属性的值(left);
transition-timing-function:ease-in-out;改变变化速度;
transition-delay:1s;变化延时时间(1秒)。
还可以把这些属性写在一起:
transition:1s width,2s 0.5s left,3s 2.5s background;
宽度变化经历1s;left 0.5s后开始变化,经历2s;背景2.5s后开始变化,经历3s。
补充:transform:rotate(720deg);旋转720度
二、border-radius圆角弧度
border-radius的写法:1-4个数字/1-4个数字 ;
1、“/”左右两边都可以写1-4个数字,并且左右两边的数字个数可以不同。
2、左边代表水平方向,右边代表垂直方向,没有“/”则水平垂直的弧度都一样,某个角的实际效果由左右两边共同决定。
3、某一边写1-4数字的效果为(左右两边同理):
4个值:没个值按顺讯分别控制左上,右上,右下,左下(顺时针方向)四个方向。
3个值:第一个值控制左上,第二个值控制右上和左下,第三个值控制右下 ;
2个值: 对角弧度一样,第一个值控制左上和右下,第二个值控制右上和左下。
1个值:4个角的弧度一样。
总结:4个值时,从左上开始顺时针每个值控制一个方向,每少一个值,原来对应位置的值就和对角线一样,一个值时当然全部一样。
4、弧度的值可以是像素px,也可以是百分百(表示原来宽或高的百分之几)。
三、box-shadow和text-shadow阴影效果
1、box-shadow和text-shadow可以设置多组值,每组可以代表不同方向的阴影,每组可以有2-5个值。
2、每组的5个值分别表示:水平偏移、垂直偏移、模糊半径、阴影的尺寸、阴影的颜色。
3、其中水平偏移和垂直偏移不可少,如果没有偏移也要设置为0;如果带像素单位的值少于2个则没有效果。
4、最后一个值代表颜色,用单位和其他值区分,颜色写到前面也没有效果,当颜色没有指定时,默认阴影为黑色
5、前面4个单位为px的值,每少些一个,后面的值就为0;写三个时代表水平偏移、垂直偏移、模糊半径;写两个时代表水平偏移、垂直偏移;
6、偏移值以右下为证,当水平偏移、垂直偏移为负数时,分别代表向左和向上偏移。
四、选择器
以下是未加入选择器时的代码;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1 p,#div1 div{
height:30px;
border:1px solid red
}
</style>
</head>
<body>
<div id="div1">
<p>123</p>
<p>123</p>
<div>456</div>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
</div>
</body>
</html>
结果图如下:
下面的代码都是加入到style中的,改变style后会给出相应的效果图;
1、nth-child() 用于父级下选择某一个元素。
a、括号内可以是自然数;表示查找第几个子元素,并改变该元素的样式,如果该元素不是声明的元素则不改变;
#div1 p:nth-child(3){
background:blue;
height: 50px;
}
#div1 p:nth-child(5){
background:blue;
height: 50px;
}
这里#div1 p:nth-child(3)先选中第三个元素<div>456</div>
,但是由于不是声明的p元素,所以无效,不改变样式;而第五个元素符合条件,改变了样式。
b、nth-child()括号内的参数可以带变量n,n从0开始自动往上增加;
#div1 p:nth-child(2n+1){
background:blue;
height: 50px;
}
2n+1选中的有第1、3、5、7;由于第个不是声明的元素所以无效;
2、nth-of-type()在父级下指定类型查找元素
nth-of-type在查找的时候就已经指定类型了,对nth-of-type来说不是指定类型的元素的不编号查找,就当它们不存在;括号里参数的值和nth-child一样。
#div1 p:nth-of-type(3){
background:red;
}
#div1 p:nth-of-type(3n){
background:red;
}
nth-of-type(3)查找父级下的第三个p元素,实际上父级下的第三个元素是<div>456</div>
,但不是P元素,所以不给它编号,直接跳过忽略,父级的第四个元素才是要找的第三个p元素,所以改变了样式。
nth-child是不管什么元素全部编号查出符合参数值的元素,再看看是否为声明元素,是则该编样式,不是则不改变。
nth-of-type是先筛选出声明的元素,再编号,再查出符合参数值的元素,然后改变样式。
五、渐变
以下是未加入渐变效果的代码;下面加入渐变效果的代码都是加在#div1的样式中的,加入后会给出效果图;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1{
width:100px;
height:100px;
margin: 50px auto;
border:1px solid red;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
效果图就是一个框,什么都没有:
radial-gradient()径向渐变:以弧度的形式扩散;
1、第一个参数可以写方向(也可以不写方向,线性渐变方向默认top从上到下,径向渐变默认在中心),径向渐变可以以像素为单位设置坐标的偏移量,后面的参数全部都是设置颜色的,每个参数之间用“,”隔开,颜色参数可以无数个。
2、当第一个参数写了方向时,要声明浏览器内核,否则会有兼容问题;
以下是主要浏览器的内核:
谷歌 -webkit-
火狐 -moz-
opera -o-
ie -ms-
例如要兼容谷歌浏览器要把linear-gradient改成-webkit-linear-gradient;
好了,写第一个样式来看看效果:background:radial-gradient(red,blue ,green)
默认渐变中心就是在元素的中心,每个颜色的空间默认平均分配。
第二个例子:background:-webkit-radial-gradient(30px 30px, red,blue ,green)
可以看到中心偏移了
第三个例子:
background:-webkit-radial-gradient(bottom,red,blue ,green)
中心在底部。
linear-gradient()线性渐变
线行渐变方向默认top从上到下,方向参数可以用度数deg来确定。
第四个例子:background:linear-gradient(red ,blue ,green);
第五个例子:background:-webkit-linear-gradient(30deg,red ,blue ,blue ,green);
第六个例子:background:-webkit-linear-gradient(90deg,red ,blue ,green);
倾斜90度就和background:-webkit-linear-gradient(bottom,red ,blue ,green);
是一样的
3、颜色参数可以分为两个部分,第一部分为颜色,第二部分为颜色从哪里开始渐变,是个百分比值,表示占元素宽高的百分之几;
第七个例子:background:-webkit-linear-gradient(left,red 10%,blue 50%,green 50%);
前10%都是红色的,从10%-50%开始向蓝色渐变,50%-50%从蓝色到绿色渐变,由于50%=50%,所以这里蓝色到绿色没有渐变空间,直接变色。
六、css 2D
1、transform属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
在操作元素的样式里加上transition:1s;然后#元素id:hover{transform: 方法();}就可以实现单鼠标移入该元素时产生动画的效果了。下面说说transform的方法。
rotate(n deg)旋转n度。
skew(x-angle,y-angle)定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)定义沿着 Y 轴的 2D 倾斜转换。
scale(angle) 整体扩大 取值 正数 小数 负数 比原来的大小扩大几倍 为负数时先缩小到没有在扩大到负数的绝对值倍
scaleX(angle) 左右方向扩大
scaleY(angle) 垂直方向扩大
translate 改变位置 默认向右
translateX 横向位置 左负 右正
translateY 纵向位置 上负 下正
七、css 3D
要实现3D效果必须在相应元素创建3D环境和设置景深(3D效果是在多远的距离看到的);
/*创建3D 环境*/
transform-style: preserve-3d;
perspective:1500px;/*景深*/
下面介绍一些属性和方法的功能:
rotate旋转;
transform-origin 设置旋转基点;
补充:CSS3的特性还有很多,不可能全部在这里列出来,我只是把目前学到的内容尽量的写了进来,以后继续学到其他特性也会写到这里进来。想学习其他特性的同学可以去这里看看,深入了解 CSS3 新特性;写得真心不错。