十三、线性渐变、径向渐变用户界面属性、多列布局、css3过度效果、css3中的变换效果、css3帧动画

一、线性渐变

重复线性渐变

background: repeating-linear-gradient(red 10%,yellow 20%);

线性渐变的兼容性: ie10+

.box3 {
    background: -webkit-linear-gradient(left,red 10%,yellow 20%);
    background: -moz-linear-gradient(left,red 10%,yellow 20%);
    background: -o-linear-gradient(left,red 10%,yellow 20%);
    background: -ms-linear-gradient(left,red 10%,yellow 20%);
    /* 标准属性放在后面 */
    background: linear-gradient(left,red 10%,yellow 20%);
}

二、径向渐变

background:radial-gradient(color1,color2......)

重复径向渐变

background:repeating-radial-gradient(color1,color2......)

兼容性: ie10+

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            float: left;
            width: 260px;
            height: 260px;
            /* background-color: tomato; */
            margin: 20px;
        }
        .box1 {
            background: radial-gradient(red,yellow);
        }
        .box2 {
            background: radial-gradient(red 10%,yellow 50%);
        }
        .box3 {
            background: repeating-radial-gradient(red 10%,yellow 20%);
        }
        
    </style>
</head>
<body>
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
</body>
</html>

三、用户界面属性

1、resize属性

规定是否可由用户调整元素的尺寸

resize: none|both|horizontal|vertical;
  • none 没有
  • both 用户可以调整水平方向和垂直方向的尺寸
  • horizontal 用户可以调整水平方向的尺寸
  • vertical 用户可以调整垂直方向的尺寸
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        textarea {
            resize: none;
        }
        .box {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            /* 溢出部分由浏览器判断如何进行处理 */
            overflow: auto;
            resize: horizontal;
            resize: vertical;
            resize: both;
        }
    </style>
</head>
<body>
    <textarea cols="30" rows="10"></textarea>
    <div class="box"></div>
</body>
</html>

2、box-sizing属性

允许以特定的方式定义匹配某个区域的特定元素

box-sizing: content-box|border-box;

兼容性: ie8+

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            float: left;
            width: 300px;
            height: 300px;
            padding: 50px;
            border: 10px dotted yellow;
            margin: 30px;
        }
        .box1 {
            /* 标准盒模型: 设置的width和height属性应用到内容区域的,设置的宽高是内容区域的宽高,如果我们设置了padding和border,那么页面中盒子的占位宽高将需要在设置的width和height的基础上加上padding和border */
            box-sizing: content-box;
        }
        .box2 {
            /* 怪异盒模型(c3盒模型):设置的width和height属性应用到边框盒,设置的宽高是页面中盒子的占位宽高,实际盒子的内容区域的宽高需要在这个基础上减去padding和border */
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="box box1"></div>
    <div class="box box2"></div>
</body>
</html>

四、多列布局

1、column-count

规定元素被分隔的列数

column-count:number | auto;
  • number 需要划分为几列就写数字几
  • auto 自动

2、column-width

规定每个列的宽度

column-width: auto | length;
  • auto 自动
  • length 设置每一列的宽度

3、column-gap

规定列之间的间隔

column-gap:length | normal;
  • length 设置列与列之间的间隔是多少
  • normal 设置合理的间距,w3c推荐是1em

4、column-rule

简写,设置列之间的分割线的宽度、样式和颜色

column-rule: column-rule-width column-rule-style column-rule-color;

兼容性: ie10+

五、css3过渡效果

过渡: 一种样式到另一种样式的逐渐改变

1、transition-property

规定设置过渡效果的 CSS 属性的名称。

transition-property:all | property | none;
  • none 没有

  • property 直接去定义需要过渡的属性是哪个属性

  • all 全部可以过渡的属性都需要过渡

/* 如果有多个属性需要过渡,那么逗号隔开 */
transition-property: width,height,background-color; 

2、transition-duration

规定完成过渡效果需要多少秒或毫秒。

transition-duration:time;
  • time 过渡时间一般单位是秒(s)或者毫秒(ms)

3、transition-timing-function

规定过渡效果的速度曲线。

transition-timing-function:ease | ease-in | ease-out | ease-in-out | linear;	
  • ease 慢速开始-----加速-------慢速结束
  • ease-in 慢速开始
  • ease-out 慢速结束
  • ease-in-out 慢速开始,-慢速结束
  • linear 匀速

4、transition-delay

定义过渡效果从何时开始。

transition-delay:time;
  • time 延迟时间一般单位是秒(s)或者毫秒(ms)

5、transition简写

transition: transition-property  transition-duration  transition-timing-function  transition-delay
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: tomato;
            /* transition-property: width; */
            /* 如果有多个属性需要过渡,那么逗号隔开 */
            /* transition-property: width,height,background-color; */
            /* transition-property: all; */
            /* transition-duration: 3s; */
            /* 速度曲线 */
            /* transition-timing-function: ease; */
            /* transition-timing-function: ease-in;
            transition-timing-function: ease-out;
            transition-timing-function: ease-in-out;
            transition-timing-function: linear; */
            /* transition-delay: 1s; */

            /* 过渡简写 */
            /* transition: width 3s linear 1s; */
            transition: width 3s linear;
            transition: width 3s;
            /* 如果只设置过渡时间,那么所有可以过渡的属性都会进行过渡 */
            transition: 2s;
        }
        .box:hover {
            width: 1000px;
            height: 600px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

兼容性: ie10+

六、css3中的变换效果

transform: none | transform-function;
  • none 没有变换效果
  • transform-function 设置变形函数

兼容性: ie10+,但是在ie9中支持-ms-

1、2d变换

(1)2d位移

transform:translate(x,y)                /*设置水平方向和垂直方向的位移*/
transform:translateX(x)                /*设置水平方向位移*/
transform:translateY(y)                /*设置垂直方向位移*/

2d位移只影响自己盒子的位置,不会影响其他元素的排列

注意:

  • 行级元素设置2d位移无效

应用:

  • 配合定位属性来实现盒子的绝对居中

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .wrap {
                position: relative;
                width: 500px;
                height: 500px;
                background-color: aqua;
            }
            .box {
                position: absolute;
                top: 50%;
                left: 50%;
                /* 2d位移中的百分比是相对于自身的宽高来计算的 */
                transform: translate(-50%,-50%);
                width: 137px;
                height: 137px;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="box"></div>
        </div>
    </body>
    </html>
    

(2)2d旋转

transform:rotate(ndeg)

n的取值可以是正值,负值或者0

正值是顺时针旋转,负值是逆时针旋转

(3)2d缩放

transform: scale(x, y)            /*设置水平方向和垂直方向的缩放比例*/
transform: scaleX(x)              /*设置水平方向的缩放比例*/
transform: scaleY(y)               /*设置垂直方向的缩放比例*/

x,y的取值如果是大于1的就代表放大,0-1之间表示缩小,负数会先翻转元素,再放大或者缩小

(4)2d倾斜

transform: skew(x, y) 
transform: skewX(x)
transform: skewY(y)

2、变换基点

transform-origin:关键词 | %;
  • 关键词

    • 水平: left right center
    • 垂直: top bottom center
  • 百分比

    默认的变换基点位置是50% 50%

一般设置基点位置是设置两个值,第一个值是水平方向的值,第二个值是垂直方向的值

兼容性: ie10+,在ie9中支持-ms-

3、3d变换

3d坐标系:

x轴: 水平朝右是正方向

y轴: 垂直向下是正方向

z轴: 从屏幕到眼睛跟前这是z轴正方向

(1)3d位移

transform:translateZ(z)

(2)3d旋转

transform:rotateX(x);
transform:rotateY(y);
transform:rotateZ(z);

(3)3d缩放

transform: scaleZ()  

元素在Z轴上缩放

(4)透视属性

perspective:500px;

也叫做视距

透视属性加在父元素身上的

(5)transform-style

transform-style: preserve-3d | flat; 	
  • preserve-3d 给子元素开始3d空间
  • flat 子元素不开启3d空间(默认值)

兼容性: ie不支持

七、css3帧动画

1、定义关键帧动画

@keyframes 动画名称 {
    from{}
    to{}
}
@keyframes 动画名称 {
    0%{}
    100%{}
}

2、使用动画

(1)animation-name

规定需要绑定到选择器的 keyframe 名称

(2)animation-duration

规定完成动画所花费的时间,以秒或毫秒计。

(3)animation-timing-function

规定动画的速度曲线。

(4)animation-delay

规定在动画开始之前的延迟。

(5)animation-iteration-count

规定动画应该播放的次数。

animation-iteration-count: n | infinite;
  • n 设置播放次数是几次
  • infinite 循环播放

(6)animation-direction

规定是否应该轮流反向播放动画。

 /* 动画是否反向轮流播放 */
animation-direction: normal | alternate;
  • alternate 反向轮流播放(播放次数不能为1)

(7)animation简写

animation: animation-name animation-duration [animation-timing-function]  [animation-delay] [animation-iteration-count] [animation-direction];
/* 简写 */
animation: change 3s linear 1s infinite alternate;
animation: change 3s linear 1s infinite;
animation: change 3s linear 1s;
animation: change 3s linear;
animation: change 3s;

动画名称和动画播放时间是必须属性

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页