CSS深度操作（3）

一、IE的兼容

兼容
    <!--[if IE 6]>
        <p>为了您和家人的健康，请远离IE6！！</p>
    <![endif]-->
    
    <!--[if IE 8]>
        <p>当前浏览器是IE8！！</p>
    <![endif]-->

    <!--[if lt IE 9]>
        <p>该标签会在IE9以下的浏览器中显示</p>
    <![endif]-->

    <!--[if gte IE 9]>
        <p>该标签会在IE9及以上的浏览器中显示</p>
    <![endif]-->

    <!--[if lte IE 9]>
        <p>该标签会在IE9及以下的浏览器中显示</p>
    <![endif]-->

    <!--[if ! IE 6]>
        <p>你的浏览器不是IE6</p>
    <![endif]-->*/

属性
  
            希望黄色背景只在IE6中生效
                在样式前添加一个下划线，则该样式只有IE6及以下的浏览器才可以识别
            */
            /*_background-color: yellow;*/
            /*添加了*的样式只有IE7及以下的浏览器认识*/
            /**background-color: yellow;*/
            /*在样式最后添加一个\0，则只有IE8及以上的浏览器才能识别*/
            /*background-color: yellow\0;*/
            /*
            CSS Hack不到万不得已的情况尽量不要使用
            */
  
/*
        在选择器前添加* html 则该选择器只有IE6可以识别
        */
        * html body{
            background-color: #bfa;
        }

二、过度动画

    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            background-color: gold;
            /*在哪产生动画、动画的时间、运动曲线、延迟*/
            /*transition: border-radius 500ms ease,width 500ms ease 500ms,height 500ms ease 1s,background-color 500ms ease 1.5s;*/
            transition: all 500ms ease;
        }
    </style>

在transition中写入多个

三、圆角and阴影and透明度

圆角

    .box{
            width: 200px;
            height: 200px;
            border: 2px solid #000;
            background-color: gold;
            margin: 50px auto 0;
            /*border-top-left-radius: 100px 50px;左上角为椭圆圆角*/
            /*border-top-left-radius: 100px;
            border-top-right-radius: 100px;左、右上角为正圆圆角*/
            /*border-radius: 40px;曲率半径为40的圆角矩形*/
            /*border-radius: 20%;最大200px，20%即40px*/
            border-radius: 50%;/*正圆*/
        }

• 阴影

    .box{
            width: 200px;
            height: 200px;
            border: 2px solid #000;
            background-color: gold;
            margin: 50px auto 0;
            /*水平偏移 垂直偏移 羽化大小 扩展大小 颜色*/
            box-shadow: 10px 10px 10px 0px #bfa;
        }

• 透明度

    .box4{
        /*背景透明 */
        background: rgba(255,215,0,0.3);
        border: 2px solid rgba(0,0,0,0.3);
        }

四、运动曲线

linner	匀速
ease	开始结束慢，中间匀速
ease-in	开始慢速，结尾突然停住
ease-out	突然开始，结束慢速
ease-in-out	开始和结束都是慢速
cubic-bezier	贝塞尔曲线

<style type="text/css"
    div{transition:all 1s ease;}
<style>

五、变形

translate	位移
rotate	沿坐标轴旋转
scale	缩放
skew	斜切

.box4:hover{
            /*斜切*/
            /*transform: skew(45deg,0);*/
            transform: skew(0,45deg);
        }

六、元素旋转

.box{
    transform-style:preserve-3d;
    设置三D效果
    transform:prespective(800px) roteY(0deg);
    }
    沿Y轴旋转90度
.box:hover{
    transform:prespective(800px) roteY(90deg);
    }

七、变形中心

.box:hover{
    transform:rotate(-45deg);
    }
.box{
    transform-origin:left top;
    设置中心点 也可以用px来设置具体位置
    }

八、背面

与元素旋转一样 背面就旋转180度 多了背面是否可见属性

.box{backface-visibility: hidden;}
这是不可见，可见为默认的

九、animation动画

/*动画名称、时间、曲线、延迟、播放次数(infinite 不限制次数)、结束后是否返回（alternate:动画结束返回，返回也算次数）
动画前后的状态：
1.forward动画完成后保持在最后一帧
2.backwards在延迟时间内，在动画显示之前，应用from开始属性值（例如box宽100，from宽200，在延迟1s内显示200）
3.both向前和向后填充模式都被应用（例如起始按200，结束停在最后一帧）

<style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            background-color: gold;
            animation: moving 1s ease 1s 5 alternate both;
            /*动画暂停*/
        }
        .box:hover{
            /*动画运行*/
            /*animation-play-state: running;*/
        }
        /*定义一个动画，名称为moving*/
        @keyframes moving{
            /*初始状态*/
            from{
                width: 200px;
            }
            /*结束状态*/
            to{
                width: 500px;
            }
        }
    </style>