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

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;
}

效果图:

H5/C3之自定义动画+多媒体查询_第1张图片
H5/C3之自定义动画+多媒体查询_第2张图片
H5/C3之自定义动画+多媒体查询_第3张图片

<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;
    }
}

H5/C3之自定义动画+多媒体查询_第4张图片
H5/C3之自定义动画+多媒体查询_第5张图片
H5/C3之自定义动画+多媒体查询_第6张图片

你可能感兴趣的:(HTMI)