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

效果图:

这里写图片描述
这里写图片描述
这里写图片描述

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

这里写图片描述
这里写图片描述
这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值