H5/C3之自定义动画+多媒体查询

最新推荐文章于 2023-08-29 00:47:41 发布

zhy0509

最新推荐文章于 2023-08-29 00:47:41 发布

阅读量2.1k

点赞数 1

分类专栏： HTMI

本文链接：https://blog.csdn.net/zhy0509/article/details/78595811

版权

HTMI 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1.自定义动画（@keyframes 动画）

定义

 @keyframes bjxg {
            from{background:blue；}
            to{background:orange；}

引用：

animation:bjxg 6s linear;

多种颜色：

@keyframes bjxg {
            0%{
                background:paleturquoise;
                           }
            25%{
                background:orchid;
                           }
            50%{
                background:forestgreen;
                            }
            75%{
                background:darkcyan;
                            }
            100%{
                background:lightsalmon;
                            }

也可在其中加上其他效果，如移动、圆角等。

ambition:名称时间速度曲线延迟时间循环次数下一周期是否逆向运行或暂停

速度曲线：
linear—-开始到结束速度相同
ease—-慢-快-慢
ease-in—-开始缓慢
ease-out—-结束缓慢
ease-in-out—-开始结束都缓慢

循环次数：默认为1，infinite为无限次循环

是否逆向：默认是normal，若逆向，则为alternate

2.多媒体查询

（1）

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="pc.css" media="all and (min-width:992px)">
    <link rel="stylesheet" href="iPad.css" media="all and (max-width:991px) and (min-width:769px)">
    <link rel="stylesheet" href="phone.css" media="all and (max-width:768px)">
</head>
<body>
</body>
</html>

pc.css

body{
    background:dodgerblue;
}

iPad.css

body{
    background:crimson;
}

phone.css

body{
    background:peachpuff;
}

效果图：

这里写图片描述

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="index.css">
</head>
<body>

</body>
</html>

css:

@media all and (min-width:992px) {
    body{
        background:darkblue;
    }
}
@media all and (max-width:991px) and (min-width:769px) {
    body{
        background:peachpuff;
    }
}
@media all and (max-width:768px) {
    body{
        background:orangered;
    }
}