css3新特性

时间:2021-2-20 作者:admin

CSS3新特性样式

背景

background-origin

我们知道盒子的大小有三部分组成:border, padding, content,当我们设置背景图片时,图片是会以左上角对齐,但是是以border的左上角对齐还是以padding的左上角或者content的左上角对齐? border-origin正是用来设置这个的,它有三个可选值:

  • border-box
  • padding-box
  • content-box

其中意思不必解释就可以明白。如果不进行设置的话,默认是padding-box,即以padding的左上角为原点。

background-clip

该属性是用来设置背景(背景图片、背景颜色)延伸的范围,有4个值可选

  • border-box:背景延伸至边框外沿(但是在边框下层)
  • padding-box:背景延伸至内边距(padding)外沿,不会绘制到边框处
  • content-box:背景被裁剪至内容区(content box)外沿
  • text:背景被裁剪成文字的前景色

background-size

background-size用以设置背景图片大小。单张图片的背景大小可以使用以下三种方法中的一种来规定:

  • 使用关键词 contain
  • 使用关键词 cover
  • 设定宽度和高度值

设定指定的宽度和高度值想必不用多加介绍。containcover会等比例的缩放图片,以使得图片能够最大的被完整包含或者最小的覆盖背景区。

边框

边框圆角

使用border-radius可以设置边框为圆角的,border-radius的值就是圆角边框的半径。

取值个数 设置
1个,如border-radius: 20px 设置四个角的圆角半径都为20px
2个,如border-radius: 10px 20px 设置左上角和右下角这条对角线为10px,另一条对角线为20px
3个,如border-radius: 10px 20px 30px 设置左上角为10px,右上角和左下角这条对角线为20px,右下角为30px
4个,如border-radius: 5px 10px 15px 20px 从左上角开始设置,按顺时针来,即左上角为5px,右上角为10px, …

我们发现半径也分为水平半径和垂直半径,这两个也可以分别设置,用/分开当做两组,第一个用来设置水平半径,第二个设置垂直半径,如

width: 100px;
height: 120px;
margin: 0 auto;
border-radius: 50px / 60px; 
background-color: pink;

如果不分开设置,则默认水平半径和垂直半径是相同的。

CSS3选择器

CSS3新增了许多的选择器,为我们选择元素提供了更加灵活的选择。

属性选择器

  • [attr]:选择包含attr属性的标签
  • [attr=value]:选择attr属性值为value的标签
  • [attr^=value]:选择attr属性值以value开头的标签
  • [attr*=value]:选择attr属性值包含value的标签
  • [attr$=value]:选择attr属性值以value的标签
div[class] {
    /* 会选择包含class属性的div标签 */
}
div[class="active"] {
    /* 会选择class属性值为active的div标签 */
}
div[class^="header"] {
    /* 会选择class属性以header开头的div标签 */
}

... ...

结构伪类选择器

  • E:first-child
  • E:last-child
  • E:nth-child(n)
  • E:nth-last-child(n)
  • E:first-of-type
  • E:last-of-type
  • E:nth-of-type(n)
  • E:nth-last-of-type(n)

CSS3 2D变换

CSS3 2D变换包括对元素进行移动、缩放、转动、拉长或拉伸。

  • translate():对元素进行进行移动

    • translate(100px):对元素向x正方向移动100px(负值向负方向移动)
    • translate(100px, 100px):对元素向x, y正方向方向移动100px
  • scale():对元素进行缩放

    • scale(n):对元素进行缩放,传入的参数大于1,进行放大,小于1,进行缩小
    • scale(x, y):第一个参数对宽度进行缩放,第二个值对高度进行缩放
  • rotate():围绕中心旋转,正值顺时针,负值逆时针

    • transform-origin:可以改变旋转的中心,如:
  /* 围绕左上角进行旋转 */
transform-origin: left top;
/* 围绕中心旋转 为默认值 */
transform-origin: 50% 50%;

CSS3 3D

3D变换的操作同2D相同,只是多了一个对Z轴的操作,如translateZ(),而rotate也分为rotateX(), rotateY(), rotateZ(),分别表示绕着X轴,Y轴,Z轴旋转。2D变换的rotate()其实就相当于rotateZ()。

CSS3动画

transition

.box {
    height: 100px;
    width: 100px;
    background-color: black;
}
.box:hover {
    transform: translateX(600px);
}

当我们把鼠标放在盒子上时,盒子向右移动了600px,但是这个过程是在瞬间完成的,十分的突兀,我们希望是缓慢由一个转态转变到另一个状态的,这种效果又叫做过渡,这时就需要用到transition属性了。

animation

与transition一样,animation也有很多的属性

  • animation-name:动画名称

  • animation-duration:动画持续时间

  • animation-timing-function:动画时间函数

  • animation-delay:动画延迟时间

  • animation-iteration-count:动画执行次数,可以设置为一个整数,也可以设置为

  • infinite,意思是无限循环

  • animation-direction:动画执行方向

  • animation-paly-state:动画播放状态

  • animation-fill-mode:动画填充模式

过渡是指在两个状态之间,而动画则是指在多个状态之间变化,这些状态我们称之为关键帧,因此动画又称之为关键帧动画。使用动画首先要创建关键帧,然后使用animation-name去调用该动画,如:

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>

     <style>
         .box {
             width: 100px;
             height: 100px;
             background-color: aqua;
         }

         .box:hover {
            animation-name: move;
            animation-duration: 1s;
         }

        /* 创建一个关键帧动画 动画名为move */
        /* 调用时使用animation-name: move调用 */
         @keyframes move {
             /* 第一个状态 0% 时的状态 可以使用from代替 */
             /* 这里的百分比是指 总时间 * 百分比 得到的某个时刻的状态*/
             0% {
                 transform: translateX(0px);
             }

             50% {
                 transform: translateX(100px);
             }

             /* 100% 可以使用 to 代替 */
             100% {
                 transform: translateY(100px);
             }
         }
     </style>

 </head>
 <body>
    <div class="box">

    </div>
 </body>
 </html>

CSS3 flex布局

当一个父元素被设置为display:flex时,它就是弹性布局,子元素的float、clear和vertical-align属性将失效。此时我们把父元素称之为container(容器),把子元素称之为item(项目)。当父元素被设置为弹性布局后,对子元素有什么影响? 先来感受一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .container {
            display: flex;
            width: 500px;
            height: 400px;
            background-color: crimson;
        }

        .item {
            width: 100px;
            height: 100px;
            background-color: aqua;
            position: relative;
        }

        /* 这个是为了演示方便 样式不重要 不必细看 */
        .item div{
           width: 50%;
           height: 50%;
           position: absolute;
           /* 下面三行语句是为了设置居中对齐 */
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
           background-color: brown;
           /* 圆角边框 */
           border-radius: 50%;
           /* 下面两行设置文字居中对齐 */
           text-align: center;
           line-height: 50px;
           /* 设置字体样式 */
           font-size: 30px;
           font-weight: 700;
           color: white;
        }
    </style>

</head>
<body>
   <div class="container">
        <div class="item"><div>1</div></div>
        <div class="item"><div>2</div></div>
        <div class="item"><div>3</div></div>
   </div>
</body>
</html>

container上的属性

直观的感受了一下flex的效果,现在我们来看看flex要设置哪些属性,首先设置在container的flex属性有

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

下面来一一介绍。
flex-direction是用来设置主轴的,它有以下四个值可选

  • row:默认值,主轴为水平方向,起点在左端。
  • row-reverse:主轴为水平方向,起点在右端。
  • column:主轴为垂直方向,起点在上沿。
  • column-reverse:主轴为垂直方向,起点在下沿。

现在我们分别修改container里面的样式

flex-direction: row-reverse;

item上的属性

下面6个属性是设置在item上的

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • self-align

order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0,现在设置第2个item的order为1

.item:nth-child(2){
    order: 1;
}

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。