CSS3动画 响应式布局之媒体查询

1. animation 通过关键帧来声明一个动画。

animation: 对应元素名称 所需时间 动画函数 延迟时间 次数 方向;

 <style>
        body {
            background-color: lightblue;
        }

        img {
            position: absolute;
            animation: ball 20s linear 0s infinite alternate;
        }

        @keyframes ball {
            0% {
                top: 0;
                left: 0;
            }

            55% {
                top: 220px;
                left: 825px;
                transform: rotate(-30deg);
            }

            100% {
                top: 400px;
                left: 1500px;
                transform: rotate(0deg);
            }
        }
    </style>

2. 响应式布局之媒体查询

/* min-width:800px，屏幕宽度大于等于800px的时候显示如下的样式 */
        @media screen and (min-width:800px) {
            div{
                background-color: red;
            }
        }
/* max-width:700px，屏幕宽度小于等于700px的时候显示如下样式 */
        @media screen and (max-width:700px) {
            div{
                background-color: yellow;
            }
        }