HTML与CSS学习笔记(4)

1、浏览器前缀

浏览器厂商以前就一直在实时CSS3，但它还未成为真正的标准。为此，当有一些CSS3样式与法还在波动的时候，他们提出了针对不同浏览器的前缀，来解决兼容性问题。

即：CSS3去兼容不同的浏览器，针对旧的浏览器做兼容，新浏览器基本不需要添加这个前缀了。
浏览器          内核            前缀
IE              Trident        -ms-
Firefox         Gecko          -moz-
Opera           Presto         -o-
Chrome          Webkit         -webkit-
Safari          Webkit         -webkit-
Opera、Chrome   Blink       

注：一般自动生成

2、transition过渡

*可以合在一起写（复合样式）:要注意顺序（按以下顺序）

transition-property：规定设置过渡效果的CSS属性的名称

transition-duration：规定完成过渡效果需要多少秒或者毫秒

transition-delay：定义过渡效果何时开始 (即可以延迟（数值为正数）也可以提前（数值为负数）)

transition-timing-function：规定速度效果的速度曲线：默认值ease，具体网站自己设置贝塞尔属性

注：transition属性要加在div中不要加在hover中否则移入有过渡属性，移出就没有了

3、transform变形

translate:位移
    translateX：正值向右，负值向左
    translateY:正值向下，负值向上
    translateZ(3d)

scale:縮放
   值为一个比较值，正常大小为1，会以当前元素中心点进行缩放
    scaleX
    scaleY
    scaleZ

rotate：旋转（旋转的值：单位是角度：deg;弧度：rad）
    rotateX （3d）
    rotateY （3d）
    rotateZ （和rotate是等价关系，正值按顺时针旋转，负值按逆时针旋转）

skew:斜切
    skewX:单位也是角度，正值向左倾斜，负值向右倾斜
    skewY
*要注意写参数时是用逗号，比如skew（）写x轴y轴坐标的时候；而写一个标签的多个属性的时候一般用空格隔开
*补充说:一般属性后面的括号里写参数用逗号，没有括号用空格如：transform-origin: 0 0;

transform的注意事项：
    1、变形操作不会影响到其他元素。
    2、变形操作只能添加给块元素，不能添加给内联元素。(要添加给内联元素时需添加：display:block;把内联转化为块)
    3、复合写法：可以同时添加多个变形操作。
        执行是有顺序的：先执行后面的操作，再执行前面的操作；后面的操作可能会受前面操作的影响，如translate
        translate会受到rotate、scale、skew的影响：比如transform: scale(.5) translate(100px,0);由于scale的影响，translate只能移动100*0.5=50px的距离;
        再如；transform:rotate(45deg) translate(100px,0);受rotate影响实际上translate是向右下角45度方向移动的100px
    4、transform-origin：变更属性变化中心点，有X和Y，属性值可以是数值也可以是单词，可以指定超出容器范围的点作为中心点。這很重要，设计首先就要确定元素变化的终点
    *CSS中标签的最后一个属性值可以不加分号

    *练习变形的列表：要在父元素中移动子元素要在父元素中添加相对定位属性：position：relative；在子类元素中添加绝对定位：position：absolute；而且，子类元素中添加的left：、top：等属性移动的是作为零点的图片左上角，且left正值表示向右移动，以此类推。例如：
     .list .list_photo{float: left;width: 112px;height: 77px; margin: 10px 9px 0 5px;position:relative;}
    .list .list_photo .list_photo_box{width: 92px;height: 57px;border: 1px white solid;position: absolute;left: 9px;top: 9px;}

    启示：要在图片上面显示框或者文字，不需要用float只需要使用position移动其位置即可

4、animation动画（CSS3）

animation-name：设置动画的名字（自定义的）
animation-duration：动画的持续时间
animation—delay：动画的延迟时间
animation—iteration-count：动画的重复次数，默认值就是1，infinite无限次数
animation-timing-function：动画的运动形式

通过@Keyframes标签组合来实现动画：
 /* from表示开始，to表示结束可写为百分数 */
    @keyframes myBox {
        from{transform:translate(0,0)}
        to{transform:translate(200px,0);}
    }

注：
    1、运动结束后，默认情况下会停留在起始位置。
    2、from->0%,to->100%    采用百分数可以在Keyframe中添加大量的关键帧，实现较为复杂的动画

复合样式的写法：
    animation:myBox 4s 1s infinite linear;
    第一个属性为name、第二个为持续时间、第三个为延迟时间、其他的不分顺序

    *让图片在父容器中居中可以使用定位的方式:
         ul li img{position: absolute;left: 50% 50%;}
        需要注意要在其父容器中添加相对定位：position:relative;此时子容器默认在父容器的左上角坐标为（0,0）
        再通过left等属性改变位置
        *可以通过在父元素中写position：relative；多个子元素中写position：absolute：实现多个子元素重叠，初始位置都是父容器左上角

    *分清楚两种写法：
     ul li:hover img：鼠标移上li时img作用
     ul li img:hover:鼠标移到img上时img作用
     两者区别在于如果img嵌套在li里面且li空间比img大则第一种写法，处罚范围更大，更稳定，不会出现上下抖动问题。 

animation-fill-mode：规定动画播放之前或之后，其动画效果是否可见，none（默认值）：运动结束只有会回到初始位置，在延迟的情况下，让0%在延迟后生效
    backwards：在延迟情况下，让0%再延迟前生效
    forwards：在运动结束之后，停在结束的位置
    both：backwards和forwards同时生效

animation-direction：属性定义是否应该轮流反向播放动画，
    alternate：一次正向（0%~100%），以此反向（100%~0%）
    reverse:永远都是反向，从100%~0%
    normal（默认值）：永远都是正向，从0%~100%
*以上两个样式都可以复合的写在animation上。

5、animate.css

一款强大的预设css3动画库。

官方地址：https://daneden.github.io/animate.css/

基本使用：
    animated：基类（基础的样式，每个动画效果都需要加）
    infinite：动画的无限次数
示例：
<img src="../img/风扇.png" alt="" class="animated tada infinite" >
class里面的animated和infinite是固定的根据需求更换动画样式(tada)，具体效果属性可以上官网查看

6、transform3D相关属性

rotateX（）：正值向上翻转

rotateY（）：正值向右翻转 简记：无论x、y正值都会往第一象限里面转

rotateZ（）：正值向前，负值向后翻转

scaleZ（）：立体元素

* .box1:hover .box2{}该语句表示当鼠标移入box1时给box2添加效果

3D相关属性
    perspective(景深)：离屏幕多远的距离去观察元素，值越大(离屏幕越远3D效果越差)幅度就越小。(一般加在最外层容器) 即：设置物件离照相机的远近
    perspective-origin：景深-基点位置，观察元素的角度。 即：设置照相机照射物件的角度
    transform-origin：x、y、z
    transform-style：3D空间(内层)   一般外层加景深，内层加3D空间(也可以加载在同一标签上)
        flat（默认值2d）、preserve-3d（3d，产生一个三维空间）
    backface-visibility：背景隐藏,即如果立方体每个面是透明的可以看到里面
        hidden、visible（默认值）

3D写法：
    scale3d（）：三个值x y z
    translate3d():三个值x y z
    rotate3d（）：四个值：第一个值：0|1（1和0分别表示x轴是否添加旋转角度） 第二个值：0|1（1和0分别表示y轴是否添加旋转角度） 第三个值：0|1（1和0分别表示z轴是否添加旋转角度） 第四个值：deg旋转的角度

*令li容器中的文字上下居中：容器高=行高： .box ul li{width: 100px;height: 100px;line-height: 100px;text-align: center;}

*transform-origin:bottom;把变化基点设置为下面那条边

*transform-origin: center center -50px;(z轴只能写数值不能写单词)

7、css3提供的背景扩展样式：

background-size：背景图片的尺寸大小
    cover：覆盖：覆盖满容器而不管图片是否完整
    contain：包含:在保持图片完整的情况下，使容器中的图片尽量大

background-origin：背景图的填充位置
    padding-box（默认）
    border-box:起始点在盒子左上角
    content-box：起始点在内容区域

background-clip：背景图的裁切方式(位置)
    padding-box：在padding外边界裁切（出了padding的部分裁切掉）
    border-box（默认）：
    content-box：即出了内容区域的部分就裁切

注：可以在background标签里复合写：注意顺序，第一个content-box指的是origin，，第二个才是clip：
    background: url('../img/电脑.png') content-box content-box;

8、css3中的渐变

linear-gradient()：线性渐变:是值，需要添加到background-image属性上

point||angle

color

percentage

    指定方向：background-image: linear-gradient(to right bottom, red,blue,yellow,green);从右下到左上
    指定角度：background-image: linear-gradient(45deg,yellow,green);界面的0度实在界面的下边，正值会按照顺时针，负值逆时针旋转
    渐变范围：background-image: linear-gradient(yellow 25%,green 75%);界面默认从上往下分别为0%~100%，利用等分不渐变，可以在一个容器里添加多种颜色。格式为：
      linear-gradient(to right,#999 25%,#080 25%,#080 50%,#999 50%,#999 75%,#080 75%)
      0~25%为#999；25%~50%为#080；50%~75%为#999；75%~100%为#080

radial-gradient()：径向渐变(从容器中心点向四周渐变)     用的不多，属性设置与线性渐变差不多
    point
    color
    percentage

9、字体图标

font-face是css3中的一个模块，他主要是把自己定义的字体嵌入到你的网页中，

    好处：
        1、可以非常方便的改变大小和颜色
        2、放大后不会失真
        3、减少请求次数和提高加载速度
        4、简化网页布局
        5、减少设计师和前端工程师的工作量
        6、可以使用计算机没有提供的字体

使用@font-face语法实现

    像.woff等文件都是做兼容平台处理的，max、linux等，所以不用关心

10、字体图标？

阿里巴巴矢量图标库：
    https://www.iconfont.cn:提供大量免费的字体图标

用法：
1、引入css文件：
<link rel="stylesheet" href="../css/iconfont.css">
2、在标签类中添加类名：
 <span class="iconfont iconcaidan"></span>  iconfont为引入的css文件名字，iconcaidan为该css文件里的具体图标类名

彩色图标的用法：（要把js文件也考过去）
1、引入js文件：
<script src="../css/iconfont.js"></script>
2、添加样式。3、添加标签（具体见demo的介绍）

自定义字体图标：
    https://icomoon.io/app:在线生成字体图标