17鼠标手势，animatecss，引入外部字体，iconfont，怪异盒模型，文字阴影

17鼠标手势，animatecss，引入外部字体，iconfont，怪异盒模型，文字阴影

01鼠标手势，指的是鼠标在页面或者元素上的样式

cursor

        值：
        crosshair 用于精确定位的 十 字形
        pointer 鼠标显示小手
        move 拖拽效果时候的鼠标样式
        text 鼠标悬浮在文本上面的样子
        wait 鼠标等待加载时候的样式
        help 鼠标显示带问好的箭头
        not-allowed 禁用效果
        default 默认指针样式
        auto 鼠标按照默认的状态根据页面上的内容自行修改样式

            /* 十字形 */
            cursor: crosshair;
            /* 小手儿 */
            cursor: pointer;
            /* 移动效果 */
            cursor: move;
            /* 查看文本效果 */
            cursor: text;
            /* 鼠标等待效果 */
            cursor: wait;
            /* 带？的箭头 */
            cursor: help;
            /* 禁用效果 */
            cursor: not-allowed;
            /* 默认 */
            cursor: default;
            /* 根据内容自己改变样式 */
            cursor: auto;
            /* 禁止用户选中文字 */
            user-select: none;

02animate.css

使用 animate.css

进入https://animate.style/#documentation
    1.直接在元素上使用 
        需要添加 公共类 animate__animated ，然后根据效果添加需要使用的 动画类名，注意以animate__ 为前缀
        animate__动画名
    2.使用 animate.css 的动画名
        不用刻意添加类名，可以直接在css中声明 animation属性，然后他的动画名是 animate.css 中的动画名即可

03引入外部字体

引入外部字体

字体格式

    1.ttf：专门用于标准浏览器和 Android等(最常用)
    2.svg：支持ios
    3.eot：仅支持IE浏览器
    4.woff：支持火狐和谷歌

使用步骤

    1.将字体引入到项目中
    2.声明引入的字体族
    3.在设置css字体的时候，使用声明的字体族

声明字体族的方式

    @font-face{
        font-family: '自定义的字体族名字';
        src: url('字体资源地址');
    }

04引入iconfont

1.下载图标，并且 引入 iconfont.css
2.在使用的标签上引入 类名 iconfont
3.引入需要的图标类

iconfont 阿里巴巴https://www.iconfont.cn/

05怪异盒模型

outline，轮廓线 他的使用方式和 border一样

    轮廓线不占据文档流空间

怪异盒模型

1.box-sizing :

        值
        border-box：border和padding 统一计入到 width之内，也就是宽度包含了 border 和 padding的值

2.content-box：默认值。只有内容被计入到 width 之内

3.padding-box：火狐支持，padding 计入到 width之内

    由于 padding-box 存在兼容性问题，因此常用的快意模式是border-box

标准盒模型

            宽度 = border的宽度 + padding 宽度+ 内容的宽度

怪异盒模型

            宽度 = 设置的width(包含了 border的宽度 + padding 宽度+ 内容的宽度)

            /* 设置怪异盒模型 */
            box-sizing: border-box;

            box-sizing: content-box;

06文字阴影

设置文字阴影

    text-shadow：x轴偏移 y轴偏移 模糊度 阴影颜色

如果需要设置多个阴影，就使用英文逗号隔开

    单个阴影
    text-shadow:0 0 10 #f60;

    多个阴影
    text-shadow:0 0 10 #f60,0 0 10 #f60,0 0 10 #f60;