css3css3动画 1、过渡 div{ width: 200px; height:

css3动画 1、过渡

div{ width: 200px;

height: 200px;

border-radius:50% ;

background-color: yellow;

margin:400px 0 0 0;

position: absolute;

left:0px;

加上过渡效果： transition: transform 2s ease-in-out 0s; 或者 transition: all 1s ease-out .5s; 过渡动画也可以实现}

body:hover div{自身的位置就是（0，0）

translate是结合自身的位置

transform: translate(500px,-400px);

相对于自身元素在body上的位置

margin-left:500px;

margin-top:0;

left:500px; }

background-size: 100% 100%;（ background-size第二个值不设置会变auto ）

2、平移： transform: translateX(100px);

transform: translateY(100px);

同时写会被下面的覆盖

3、缩放：transform: scale(2); 缩放一个值表示x轴和y轴都是2

缩放一个值缩小的时候是从中心点缩小

scale(1)表示本身，不变

scale(0)表示缩小到消失

scale(.5) 小于1表示缩小

只放大x轴： transform: scale(2,1);

只放大y轴： transform: scale(1,2);

4、倾斜 {度数的单位 deg}

skew第一个参数表示x轴按照逆时针方向进行旋转宽度变化，高度不变

skew第二个参数表示y轴按照顺时针方向进行旋转高度变化，宽度不变

transform : skew(60deg,0deg);

transform: skewX(70deg);

transform: skewY(30deg);

参数a单位使用deg表示，参数a取正值时元素相对原来中心顺时针旋转

5、旋转：

沿着x轴旋转会改变高度： transform: rotateX(30deg);

沿着y轴旋转会改变宽度：transform: rotateY(30deg);

rotate只设置一个值表示沿着中心点顺时针转：transform: rotate(30deg);

rotate( )函数只是旋转，而不会改变元素的形状

skew( )函数是倾斜，元素不会旋转，会改变元素的形状

    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)"> -->