html5源码笔记【爱创课堂专业前端培训】

一、 背景相关属性
Background-color

Background-image

Background-repeat

Background-position

Backgroound-attachment

Background-size

Background 可以同时添加多张背景图片，如果有颜色，颜色搁在最后一个背景图片的前面

Background-origin 背景起源，背景原点位置

Backgroufn-clip 裁剪，裁剪某个位置

属性值： border-box content-box padding-box

    #box{

        height: 400px;

        width: 400px;

        border: solid 1px;

        /* vertical-align: -100px;; */

/*

        background-image: url(./img/1.jpg); */

        /* background-image: url(./img/9.jpg); */

        /* background-repeat: no-repeat;

        background-size: 100px;

        background-position: center; */



        background:url(./img/1.jpg) right top no-repeat,

                  rgba(0,0,0,.5) url(./img/9.jpg) 0 100% no-repeat;

        background-size: 100px,50px;

    }



    #box2{

        height: 200px;

        width: 200px;

        padding: 50px;

        border:solid 50px red;

        /* vertical-align: 100px; */



        background:url(./img/1.jpg) no-repeat 50% 50%/100% 100%;

        /* background-origin: content-box;  设置背景原点从内容开始*/

         background-origin: padding-box;  /*默认，含padding */

        /*  background-origin: border-box; 设置背景原点从边框开始 */



        /* background-clip: border-box; */

        /* background-clip: padding-box; */

        background-clip: content-box;

    }

1

二、 阴影
2.1 盒子阴影
Box-shadow:水平方向阴影 垂直方向阴影 模糊距离 阴影大小 阴影颜色 阴影位置;

<style>

    .sun{

        height: 100px;

        width: 100px;

        border-radius: 50%;

        background: red;

        box-shadow: 0 0 6px 8px orange,

            0 0 10px 12px yellow;



        position: fixed;

        top: 50px;

        left: 100px;

    }



    .cloud{

        width: 80px;

        height: 80px;



        background: white;

        border-radius: 50%;

        box-shadow:40px -30px 0px 4px white, 96px 2px 0px 8px white, -29px -14px 0px 4px white;



        position: fixed;

        top: 250px;

        left:400px;

    }

</style>

<div class="sun"></div>

<div class="cloud"></div>

1

2.2 文本阴影
Text-shadow: 水平方向阴影 垂直方向阴影 模糊距离 阴影颜色;

p{

        text-shadow: 2px 2px 2px black;

    }

1

三、渐变色（属性值）
2.1 线性渐变 linear-gradient()
需要给多个颜色值，默认从上往下渐变，可以设置渐变的方向：

两种方式：

Left 从哪边开始

To right 向哪边渐变

注意：CSS3属性需要做浏览器兼容

-webkit- 谷歌或者苹果

-ms- IE

-moz- 火狐

-o- 欧朋

    div.box1{

       height: 200px;

       width: 100%;



       background-image: -webkit-linear-gradient(left top,red,orange,green,lightgreen,blue);/* Safari 5.1 to 6.0 */

       background-image: -moz-linear-gradient(left top,red,orange,green,lightgreen,blue);/* Firefox 3.6 to 15 */

       background-image: -o-linear-gradient(left top,red,orange,green,lightgreen,blue);/* Opera 11.1 to 12.0 */

       background-image: linear-gradient(to right bottom,red,orange,green,lightgreen,blue);/*标准语法*/

    }



    div.box2{

        height: 400px;

        width: 400px;

        margin-left: 200px;

        border: solid 1px;

        background-image: linear-gradient(to left bottom,blue 20%,red 40%,yellow,green,gray,pink,purple);

    }

1

2.2 径向渐变 radial-gradient()
确定圆的类型

ellipse (默认): 指定椭圆形的径向渐变。

circle ：指定圆形的径向渐变

定义渐变的位置。可能值：

center（默认）：设置中间为径向渐变圆心的纵坐标值。

top：设置顶部为径向渐变圆心的纵坐标值。

bottom：设置底部为径向渐变圆心的纵坐标值。

div.box3{

        width: 600px;

        /* background-image: radial-gradient(circle,red,blue,green,orange,yellow,pink,purple); */

        background-image: radial-gradient(circle at top,red 5%,blue 10%,green 15%,orange 20%,yellow 30%,pink 50%,purple 80%);

    }

1

三、 变形transform
值函数：

Translate(x,y) 偏移，两个参数分别为x方向和y方向偏移；如果只有一个值，就是代表向x偏移

translateX(x)

translateY(y)

        background: red;

        /* margin-top: 100px; */

        /* position: relative;*/

        /* position: fixed; */

        /* position: absolute;

        top: 100px;  */



        /* 向下偏移100px */

        /* transform: translateY(100px); */

        /*  向右偏移200px*/

        /* transform: translateX(200px); */

        /* 同时设置向下偏移100px向右偏移200px */

        /* transform: translate(200px,100px) */



        transform: translate(100px);

1

Scale(x,y) 缩放，两个参数分别为x方向和y方向缩放值；如果只有一个值，代表元素两个方向的缩放值

ScaleX(x)

scaleY(y)

/* width: 1px; */

        display: inline-block;

        margin-left: 400px;

        background: pink;

        /* x方向缩小一半 */

        /* transform: scaleX(0.5); */

        /* y方向变大一半 */

        /* transform: scaleY(2); */



        /* 设置x、y方向的缩放值 */

        /* transform: scale(0.9,0.5); */



        transform: scale(0.5);

1

倾斜 skew(x deg);

skewX()

skewY()

        display: inline-block;

        height: 400px;

        margin-left: 200px;

        background: orange;



        /* x方向倾斜30deg */

        /* transform: skewX(30deg); */



        /* y方向倾斜30deg */

        /* transform: skewY(60deg); */



        transform: skewX(30deg);

1

旋转rotate(z deg) 平面旋转

RotateX() x轴旋转

rotateY() y轴旋转

rotateZ() z旋转，平面旋转

   display: inline-block;

        height: 400px;

        margin-left: 200px;

        background: green;



        /* x轴旋转30deg */

        /* transform: rotateX(30deg); */

        /* y轴旋转30deg */

        /* transform: rotateY(60deg); */



        transform: rotateZ(60deg)

1

四、 过渡transition
过渡是从一种效果到另外一种效果的演变，需要触发条件

两个必要的条件：

过渡属性 transition-property

过渡的时间transition-duration

除了以上两个属性：

过渡的作用曲线 transition-timing-function

过渡的延迟时间 transition-delay

    #wrap{

        height: 200px;

        width: 200px;

        margin: 200px auto;

        border: solid 1px;

        background: yellow;



        /* 设置过渡的必要条件 */

        /* 条件一：过渡的属性 */

        /* -webkit-transition-property: transform;

        -moz-transition-property: transform;

        -o-transition-property: transform;

        transition-property: transform; */



        /* 条件二：过渡的时间 */

        /* -webkit-transition-duration: 5s;

        -moz-transition-duration: 5s;

        -o-transition-duration: 5s;

        transition-duration: 5s; */



        /* 延迟过渡 */

        /* -webkit-transition-delay: 2s;

        -moz-transition-delay: 2s;

        -o-transition-delay: 2s;

        transition-delay: 2s; */



        /* 过渡的速率 */

        /* -webkit-transition-timing-function: linear;

        -moz-transition-timing-function: linear;

        -o-transition-timing-function: linear;

        transition-timing-function: linear; */



        /* 简写属性 all代表过渡所有属性 贝塞尔曲线*/

        -moz-transition: all 5s cubic-bezier(0.785, 0.135, 0.15, 0.86) .5s;

        -o-transition: all 5s cubic-bezier(0.785, 0.135, 0.15, 0.86) .5s;

        -webkit-transition: all 5s cubic-bezier(0.785, 0.135, 0.15, 0.86) .5s;

        transition: all 5s cubic-bezier(0.785, 0.135, 0.15, 0.86) .5s;

    }



    #wrap:hover{

        transform: scale(2);

        background: red;

    }

1

过渡案例：

1，2，3…

1

五、 动画animation
从一种效果过渡到另外一种，这个不需要任何触发条件，自动播放；

两个必要条件：

过渡的名称 animation-name

过渡的时间 animation-duration

其他属性：

过渡的速率 animation-timing-function

延迟过渡的时间 animation-delay

播放次数 animation-iteration-count

动画播放顺序 animation-direction

动画集规则@keyframes name{ from … to}

由于form…to 过渡效果太少，一般我们会利用百分比 0% ， 10%，…,90%,100%

    .wrap{

        height: 400px;

        width: 400px;

        margin: 100px auto;

        /* border: solid 1px; */



        position: relative;

    }



    .circle{

        height: 40px;

        width: 40px;

        background: red;

        border-radius: 50%;



        position: absolute;

        top: 50%;

        left: 50%;

        transform: translate(-50%,-50%);



        /* 动画的两个必要条件 */

        /* 动画过渡的名称 */

        animation-name: myBall;

        /* 动画过渡的时间 */

        animation-duration: 5s;

        /* 设置播放次数 */

        animation-iteration-count: infinite;

        /* 设置播放的顺序 alternate奇数次正向播放  偶数次反向播放*/

        animation-direction: alternate;

        /* 延迟两秒播放 */

        animation-delay: 2s;

        /* 播放速率 ease  ease-in  ease-out  ease-in-out  linear  贝塞尔曲线*/

        animation-timing-function: linear;

    }



    /* 声明动画集规则 */

    @keyframes myBall{

        from{transform: scale(0)}

        to{transform: scale(10)}

    }