CSS3动画 响应式布局

css3动画

    div{
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: aqua;               /* infinite无限循环 */
            /* 动画名称  持续时间  动画效果  延迟时间  执行次数   播放方向 */
        animation: donghua 5s ease-in-out 0s 2 alternate;  
        }              
        /*  alternate */ /* 播放为偶数次向前播放，一开始为0，0是偶数所以向前播放*/
        
        
    @keyframes donghua{
        /* 动画开始的时候 */
        0%{
            left: 0px;
            top: 0px;
        }
        /* 中间的时候 */
        50%{
            left: 600px;
            top: 600px;
        }
        /* 动画结束的时候 */
        100%{
            left: 1200px;
            top: 0px;
        }
    }
    /* 直接写 @keyframes可能会出现谷歌或者火狐不兼容，所以要加前缀*/
    /* @-webkit-keyframes */
    /* 兼容谷歌浏览器 */
    /* @-moz-keyframes */
    /* 兼容火狐浏览器 */
    
    
复制代码

响应式布局

 <style>
    div{
        width: 200px;
        height: 200px;
        background-color: cyan;
    }
    /* 实现div在屏幕不同大小的时候显示不同的颜色 */
    /* 媒体查询 */
    /* max-width 最大宽度 */
    /* min-width 最小宽度 */
    /* 500-700之间包括500,700 */
    @media screen and (max-width:700px) and (min-width:500px){
         div{
             background: darkgreen;
         }
    }
    /* (min-width:500px)屏幕大小 大于等于 500的时候显示如下像素 */
    /* (max-width:700px)屏幕大小 小于等于 700的时候显示如下像素 */


</style>

<!-- 响应式的样式用外部链接时要放到最后 -->
<!-- all代表所有屏幕 -->
<!--  only screen 只支持电脑屏幕 -->
<!-- <link rel="stylesheet" href="" media="all and (min-withde:500px)"> -->