CSS-进阶

字体图标

这里的图标本质上已经是一个“字”，不再是图片了

用来处理简单的、颜色单一的图片

下载：www.iconfont.cn/

引入

引入字体图标样式表：<link ref = "stylesheet" href = "./iconfont.css">

调用图标对应的类名，必须调用2个类名

iconfont类：基本样式，包含字体的使用等
icon-xxx：图标对应的类名

<link ref = "stylesheet" href = "./iconfont/iconfont.css">

<span class = "iconfont icon-fuwuqi">
</span>

特殊需求

如果图标库里没有所需的图标怎么办？ 答：IconFont网站上传矢量图、生成字体图标
与设计师沟通，得到SVG矢量图
IconFont网站上传图标，下载使用

平面转换

位移、缩放常用，旋转不常用

通过transform属性来设置。

位移

正数：向下、向右；
负数：向上、向左；

如果是百分比的话，参考的是自身盒子的大小的百分比

盒子是100*100，那么50%就是50*50

.father:hover .son{
    transform:translate(50px,100px)
    transform:translate(-50px,-100px)
}

单独设置某个方向：translateX水平、translateY垂直

transform:translate(50px)水平
等价于
transform:translateX(50px)水平

transform:translateY(50px)垂直

位移-绝对定位居中

.father{
    position:relateive;
    width:500px;
    height:300px;
    margin:100px auto;
    border:1px solid #000;
}

.son{
    position:absolute;
    left:50%;
    top:50%;
    
    //margin-left:-100px;
    //margin-top:-50px;
    通过位移来实现绝对居中
    trnasform:translate(-50%,-50%);
    
    width:200px;
    height:100px;
    background-color:pink;
}

小案例

外层大盒子显示的是方向盘的那张照片

我们需要将两个车设置为绝对定位，这样可以显示在大盒子上面：子绝父相

*{
    margin:0;
    padding:0;
}
.box{
    width:1366px;
    height:600px;
    margin:0 auto;
    background:url('./images/bg.jpg');
    
    //超出父级盒子的要隐藏
    overflow:hidden;
}
//伪元素：行内显示模式
.box::before,
.box::after{
    float:left;
    content:'',
    //只展示背景精灵图的50%大小
    width:50%;
    height:100%;
    //使用精灵图
    background-image:url(./images/fm.jpg);
    transition:width 0.5s
    
    
}

//鼠标移入box，before向左移动-100%；
.box hover::before{
    transform:translateX(-100%)
}

//after向右移动 100%
.box hover::after{
    transform:translateX(100%)
}

单独控制after背景图的位置
.box::after{
//要宽度的后50%，通过background-position获取具体位置的图
    background-position:right 0;
}

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

旋转

单位：deg

通过：transform:rotate(角度)

img:hover{
    transform:rotate(360deg)
}

旋转圆点

使用transform-orgin属性改变转换原点

默认圆点是盒子的中心点

一律在标签属性上面修改transform-origin，不要再hover上。

多重转换

一边位移、一边旋转 transform:translate() rotate()

.box:hover img{
    transform:translate(600px) rotate(720deg)
}
<div class = "box">
    <img src = "./images/tyre.png" alt = "">
</box>

如果是先写totate（旋转）后写的translate(平移)，会存在问题，因为坐标轴被改变了

旋转往最后再写！

transform:translate(600px)
transform:rotate(720deg)

这样写只会出现旋转的效果，因为一个属性多次书写在同一个标签中，会出现覆盖效果。

缩放

.box:hover img{
    //等比例放大1.2倍
    transform:scale(1.2)
}

缩放-margin

.box .pic::after{
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-29px;
    margin-top: -29px;
    
    content:'',
    width:58px;
    height:58px;
    background-image:url(///)
    
    transform:scale(5);
    opacity:0;
    
    过渡
    transition:all 0.5s;   
}
.box li:hover .pic::after{
    opacity:1;
    transform:scale(1);
}

<div class = "box">
    <ul>
        <li>
            <div class = "pic">
                <img src = "">
            </div>
        </li>
    </ul>
</div>

渐变

.box{
    background-image:linear-gradient(pink,green,blue)
}

一般使用半透明渐变：

从透明 到 有颜色

.box{
    background-image:linear-gradient(
     transparent,
     rgba(0,0,0,0.5)
    )
}

实现鼠标放在图片上，图片变成 渐黑

准备盒子、定位压在图片的上面，hover效果：显示渐变背景

.box .mask{
    width:300px;
    height:212px;
    background-image:linear-gradient(
        transparent,
        rgba(0,0,0,0.8)
    );
    opacity:0;
}
鼠标移入时，显示黑色
.box:hover .mask{
    opacity:1
}

<div class = "box">
    <img src = "">
    <div class = "mask"></div>
</box>

综合案例

多出来了：了解更多 > 并且图片变黑的效果

<link ref = "stylesheet" href = "./css/iconFont.css">

//渐变背景
.box li a::after{
    position:absolute;
    left:0;
    top:0;
    content:'',
    width:350px;
    height:247px;
    background-image:linear-gradient(
        transparent,
        rgba(0,0,0,0.7)
    )
    opacity:0;
    transition:all 0.5s;
}

//溢出隐藏效果
.box li{
    position:relative;
    float:left;
    width:350px;
    height:247px;
    margin-right:30px;
    //溢出隐藏
    overflow:hidden;
}

//当我鼠标移动到li的时候，显示
.box li:hover a::after{
    opacity:1;
}

//图片缩放
.box li .pic img{
    transform:all 0.5;
}
.box li:hover .pic img{
    transform:scale(1.2);
}

//文字效果：hover的时候，向上移动Y
.box li:hover .txt{
    transform:translateY(-50)
}

<div class = "box">
    <ul>
        <li>
            <a href = "#">
                <div class = "pic">
                    <img src = "...">
                </div>
                <div class = "txt">
                    <p>
                        <span>了解更多</span>
                        <i class = "iconfont icon-arrow-right"></i>
                    </p>
                </div>
            </a>
        </li>
    </ul>
</div>

空间转换

位移

transform:translate3d(x,y,z)

.box:hover{
    //水平50、垂直100、Z轴200
    transform:translate3d(50px,100px,200px);
    
    transform:translateX(100px)
    transform:translateY(100px)
    transform:translateZ(100px)
}

因为电脑是一个平面，Z轴不容易看出来，需要依靠其他

透视

800-1200是最满足人类需求的

perspective：加给盒子的父级、近大远小。大：离屏幕远、小：离屏幕近

translateZ如果是正数，就变大，更靠近人眼，负数就变小、离人眼远。

body{
//给人眼添加近大远小的视觉效果
    perspective:1000px;
}
.box hover{
    transform:translateZ(200px)
}

空间转换 + rotate

和平面旋转效果几乎一样

transform:rotateZ(360deg)

rotateX

围绕X轴旋转

.box{
    perspective:1000px;
}
.box img:hover{
    transform:rotateX(60deg);
}

rotateY

.box{
    perspective:1000px;
}
.box img:hover{
    //左边翘起来
    transform:rotateY(600deg);
    //右边翘起来
    transform:rotateY(-600deg);
}

技巧：

立体呈现

使子集处于3d空间，所以要在父级上书写transform-style:preserve-3d;

.cube{
    position:relative;
    width:200px;
    height:200px;
    margin:100px auto;
    transition:all 2s;
    //添加3d效果
    transform-style:preserve-3d;
}

.cube div{
    position:absolute;
    left:0;
    top:0;
    width:200px;
    height:200px;
}
.front{
    transform:translateZ(200px);
}
.back{
    
}
.cube:hover{
    transform:rotateY(180deg)
}
<div class = "cube">
    <div class = "front"></div>
    <div class = "back'></div>
</div>

动画

动画的本质就是快速切换大量图片时，在人脑中形成的具有连续性的画面。

使用animation添加动画效果

实现步骤

1.定义动画

实现两个动画的效果：

@keyframes 动画名称{
    from{}
    to{}
}

实现多个动画的效果

@keyframes 动画名称{
    0%{}
    10%{}
    15%{}
    100%{}
}

2.使用动画

animation:动画名称 动画花费时长

动画案例

定义动画：从200变大到600

@keyframes change{
    from{
        width:200px;
    }
    to{
        width:600px;
    }
}

使用动画
.box{
    width:200px;
    height:100px;
    background-color:pink;
    
    使用 change 动画 + 动画花销时间
    animation:change 1s;
}

完成多个状态的动画变化：从200 到 500 * 300再到800 * 500

@keyframes ManyChange{
    0%{
        width:200px;
    }
    50%{
        width:500px;
        height:300px;
    }
    100%{
        width:800px;
        height:500px;
    }
}

从200到800总共需要1s；
.box{
    width:200px;
    animation:ManyChange 1s;
}

百分比表示：占动画变化总时长的百分比

动画复合属性

速度曲线：linear匀速、 steps(3)每次增3个块儿
延迟时间：1s 过1秒再开始动画效果
重复次数：默认是重复1次，重复动画效果次数；
无限循环：infinite
动画方向：alternate从头到尾、从尾到头
如果想要实现执行完毕时状态，就需要将无限循环和动画方向删除，否则设置执行完毕状态仍然会发生改变
backwards：执行完毕默认状态，回到初始状态
forwards：回到最终状态

.box{
    animation:动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态
    animation:change 1s linear 1s infinite alternate ;
    animation:change 1s forwards
}
@keyframes change{
    from{
        width:200px;
    }
    to{
        width:600px;
    }
}

取值不分先后顺序！！！

逐帧动画

animation-timing-function 速度曲线，取值是：steps(数字)：逐帧动画。

补间动画：看不出来帧数的变动，是连续的；
逐帧动画：能看出帧数的变动，中间会有间断

开发中，我们经常使用补间动画，但是在处理精灵图动画时，我们使用：逐帧动画！！！

逐帧动画的实现

animation-timing-function:steps(N)：将动画过程等分成N份

1. 准备显示区域

设置盒子尺寸是一张小图的尺寸，背景图是当前精灵图

1680 * 140 ，一共有12个小人，所以每个小人的宽高就是：（1680/12）140 * 140

.box{
//保证显示区域的尺寸和精灵小图的尺寸相同
    width:140px;
    height:140px;
    background-image:url(精灵图.png)
}

2. 定义动画

改变背景图的位置（移动的距离就是精灵图的宽度）

@keyframes move{
    from{
        background-position:0 0;
    }
    to{
    往左走使用负数
        background-position:-1680px 0;
    }
}

3. 使用动画

添加速度曲线steps(N)，N与精灵图上 小图个数相同，添加无限重复效果。

.box{
//保证显示区域的尺寸和精灵小图的尺寸相同
    width:140px;
    height:140px;
    background-image:url(精灵图.png)
    //1秒中跑12张图，无限重复
    animation:move 1s steps(12) infinite;
}

@keyframes move{
    from{
        background-position:0 0;
    }
    to{
    往左走使用负数
        background-position:-1680px 0;
    }
}

如果想让小人跑的远一些，该如何实现？需要通过多组动画来实现，让精灵图的盒子移动

在animation的基础上调用多个动画：

animation:
    动画1;
    动画2;
    动画N;