iconfont&&css hack_iconfont 添加keyframes-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_51847874/article/details/122727778

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/iconfont.css">
    <style>
        /*
        1、iconfont  字体图标
        步骤：
        1）打开官网
        iconfont.cn
        2）点击图标库
        3）搜索图标
        4）添加到购物车(一个网站的所有图标一次性都添加到购物车)
        5）下载代码
        6）解压到需要的文件件中
        7）HTML中引入iconfont.css
        8）HTML中标签class="iconfont"
        9）双标签之间复制图标的Unicode编码
        10）字体图标用字体的属性去修改样式

        */
        .iconfont{
            font-size: 30px;
            color: red;
        }
    </style>
</head>
<body>
<i class="iconfont">&#xf0179;</i>
<i class="iconfont">&#xe637;</i>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        3、css hack
        解决IE低版本(IE6 7 8)浏览器的兼容性问题
        1）条件hack
        <!--[if 条件]>

        <![endif]-->
        条件语法：
        IE 版本号
        IE gt 版本号  gt:大于
        IE gte 版本号  gte:大于等于
        IE lt 版本号  lt：小于
        IE lte 版本号  lt：小于等于

        2）属性前缀和后缀
        前缀 + - * _ #
        后缀 \0  \9  \9\0  ***

> !important(优先级最高)

***
        */
        body{
            background-color: red !important;
            background-color: deepskyblue;

        }
    </style>
    <!--[if IE 7]>
    <style>
        body{
            background-color: green;
        }
    </style>
    <![endif]-->
</head>
<body>
哈哈哈哈哈哈哈
<!--[if IE 7]>
嘿嘿嘿嘿嘿
<![endif]-->
</body>
</htm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        4、动画
        1）动画和过渡的区别
        ①过渡只能制作简单的动画，动画可以制作复杂的动画
        ②过渡必须有触发事件，动画可以没有
        ③动画可以控制次数

        2）定义动画
         @keyframes name {
            0%|from{
                css样式
            }
            百分比{
                css样式
            }
            100%|to{
                css样式
            }
        }
        @-webkit-keyframes name {}
        @-moz-keyframes name {}
        @-o-keyframes name {}
        @-ms-keyframes name {}

        3）调用动画
        -webkit-animation:name 动画的持续时间(s|ms) 动画的速度变化类型  动画的延迟时间(s|ms) 动画的播放次数(number|infinite) 动画播放方向(alternate:偶数次倒着播放) 动画停在最后一帧(forwards);
                          必需       必需           可选(同过渡的取值)       可选

         animation-play-state: running(默认值)|paused(暂停);    设置动画播放的状态


         4）动画属性
            animation-name: ;  动画名称 必须
            animation-duration: ;  持续时间 必须
            animation-timing-function: ;  速度变化类型 可选
            animation-delay: ;  延迟时间  可选
            animation-iteration-count: ;  播放次数  可选
            animation-direction: alternate;  播放方向  可选
            animation-fill-mode: forwards;   动画停在最后一帧  可选

        */
        .box{
            width: 200px;
            height: 200px;
            background-color: red;

        }
        .box:hover{
            animation: dh 5s;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: hotpink;
            /*animation: dh 5s ease-in -1s 3 alternate forwards;*/
            animation-name: dh;
            animation-duration: 5s;
            animation-timing-function: ease-in;
            animation-delay: -1s;
            animation-iteration-count: 3;
            animation-direction: alternate;
            animation-fill-mode: forwards;



        }
        .box1:hover{
            animation-play-state: paused;
        }
        /*定义动画*/
        @-webkit-keyframes dh {
            0%{
                width: 300px;
                height: 300px;
                background-color: blue;
            }
            25%{
                transform: rotate(360deg);
            }
            30%{
                transform: scale(1.5);
            }
            88%{
                border-radius: 50%;
                background-color: orange;
            }
            100%{
                transform: translate(600px,200px);
            }
        }



    </style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
</body>
</html>