CSS3新样式

  1. 云栖社区>
  2. 博客>
  3. 正文

CSS3新样式

我巴巴 2017-09-12 22:41:44 浏览739
展开阅读全文

一、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 新特性;写得真心不错。

网友评论

登录后评论
0/500
评论
我巴巴
+ 关注