(7)CSS动画-页面特效

一、2D、3D转换

通过CSS3转换，我们能够对元素精心移动、缩放、转动、拉长或者拉伸转换是使元素改变形状、尺寸和位置的一种效果，可以使用2D3D转换元素

<body>
    <div>这是一个初始效果</div>
    <br/>
    <div class="div2">改变后的效果2</div>
    <div class="div3">改变后的效果3</div>
    <div class="div4">改变后的效果4</div>
    <div class="div5">改变后的效果5</div>
    <div class="div6">改变后的效果6</div>
</body>

div{
    width: 100px;
    height: 100px;
    background-color: gray;
}

1.2D转换方法

translate()--移动
rotate()--旋转
scale()--缩放
skew()
matrix()

.div2{
    transform:translate(100px,100px);/*向上向下移动100px*/
    -webkit-transform:translate(100px,100px);/*safari chrome*/
    -ms-transform:translate(100px,100px);/*IE*/
    -o-transform:translate(100px,100px);/*opera*/
    -moz-transform:translate(100px,100px);/*firefox*/
}
.div3{
    transform:rotate(180deg);/*旋转180°*/
    -webkit-transform:rotate(180deg);/*safari chrome*/
    -ms-transform:rotate(180deg);/*IE*/
    -o-transform:rotate(180deg);/*opera*/
    -moz-transform:rotate(180deg);/*firefox*/
}
.div4{
    margin-top: 200px;
    transform:scale(1,2);/*宽度1倍，高度2倍*/
    -webkit-transform:scale(1,2);/*safari chrome*/
    -ms-transform:scale(1,2);/*IE*/
    -o-transform:scale(1,2);/*opera*/
    -moz-transform:scale(1,2);/*firefox*/
}
.div5{
    margin-top: 200px;
    transform:skew(50deg,50deg);/*x轴倾斜50°，y轴倾斜50°*/
    -webkit-transform:skew(50deg,50deg);/*safari chrome*/
    -ms-transform:skew(50deg,50deg);/*IE*/
    -o-transform:skew(50deg,50deg);/*opera*/
    -moz-transform:skew(50deg,50deg);/*firefox*/
}

2.3D转换方法

rotateX()
rotateY()

.div6{
    transform:rotateX(100deg);/*x轴倾斜50°，y轴倾斜50°*/
    -webkit-transform:rotateX(100deg);/*safari chrome*/
    -ms-transform:rotateX(100deg);/*IE*/
    -o-transform:rotateX(100deg);/*opera*/
    -moz-transform:rotateX(100deg);/*firefox*/
}

二、过渡

通过使用CSS3，可以给元素添加一些效果
过渡是元素从一种样式转换成另一种样式
动画效果的CSS
动画执行的CSS
属性：

属性	描述
transition	设置四个过渡属性
transition-property	过渡的名称
transition-duration	过渡效果花费的时间
transition-timing-function	过渡效果的时间曲线
transition-delay	过渡效果的开始时间

<div>测试</div>

div{
    width:100px;
    height:100px;
    background-color:blue;
    -webkit-transition:width 2s,height 2s,-webkit-transform 2s;
    -moz-transition:width 2s,height 2s,-moz-transform 2s;
    -o-transition:width 2s,height 2s,-o-transform 2s;
    transition:width 2s,height 2s,-o-transform 2s;
    -webkit-transition-delay:2s;
    -moz-transition-delay:2s;
    -o-transition-delay:2s;
    transition-delay:2s;
}
div:hover{
width:200px;
height:200px;
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
}

以上代码的效果就是鼠标放上去后旋转360°，宽变为200px高度也变为200px，延迟两秒钟执行

三、动画

CSS3的动画需要遵循@keyframes规则
规定动画的时长
规定动画的名称

<body>
    <div>动画效果</div>
</body>

div{
    width:100px;
    height:100px;
    background-color: blue;
    position:relative;
    animation:anim 5s infinite alternate;/*动画效果5s,持续进行，逆向进行*/
    -webkit-animation:anim 5s infinite alternate;
}
@keyframes anim{
    0%{background: blue;left: 0px;top: 0px;}
    25%{background: red;left: 200px;top: 0px;}
    50%{background: #ccffcc;left: 200px;top: 200px;}
    75%{background: #00ffff;left: 0px;top: 200px;}
    {background: blue;left: 0px;top: 0px;}
}
@-webkit-keyframes anim{
    0%{background: blue;left: 0px;top: 0px;}
    25%{background: red;left: 200px;top: 0px;}
    50%{background: #ccffcc;left: 200px;top: 200px;}
    75%{background: #00ffff;left: 0px;top: 200px;}
    {background: blue;left: 0px;top: 0px;}
}

四、多列

可以创建多列来对文本或者区域进行布局
属性：
column-count 分列的数量
column-gap 每列中间间隔的距离
column-rule 每列之间间隔的线及线的颜色

<div class="div1">大家好，我是在csdn上面写的博客，我叫扁豆，请多多指教！大家好，我是在csdn上面写的博客，我叫扁豆，请多多指教！大家好，我是在csdn上面写的博客，我叫扁豆，请多多指教！大家好，我是在csdn上面写的博客，我叫扁豆，请多多指教！大家好，我是在csdn上面写的博客，我叫扁豆，请多多指教！大家好，我是在csdn上面写的博客，我叫扁豆，请多多指教！大家好，我是在csdn上面写的博客，我叫扁豆，请多多指教！大家好，我是在csdn上面写的博客，我叫扁豆，请多多指教！</div>

.div1{
    column-count: 3;
    -webkit-column-count: 3;
    -webkit-column-gap: 50px;
    column-gap: 50px;
    column-rule: 5px outset #FF0000;
    -webkit-column-rule: 5px outset #FF0000;
}

五、瀑布流效果

<body>
    <div class="container">
        <div><img src="img/1.jpg"></div>
        <div><img src="img/2.jpg"></div>
        <div><img src="img/3.jpg"></div>
        <div><img src="img/4.jpg"></div>
        <div><img src="img/5.jpg"></div>
        <div><img src="img/6.jpg"></div>
        <div><img src="img/7.jpg"></div>
        <div><img src="img/8.jpg"></div>
        <div><img src="img/9.jpg"></div>
        <div><img src="img/1.jpg"></div>
        <div><img src="img/2.jpg"></div>
        <div><img src="img/3.jpg"></div>
        <div><img src="img/4.jpg"></div>
        <div><img src="img/5.jpg"></div>
        <div><img src="img/6.jpg"></div>
        <div><img src="img/7.jpg"></div>
        <div><img src="img/8.jpg"></div>
        <div><img src="img/1.jpg"></div>
        <div><img src="img/2.jpg"></div>
        <div><img src="img/3.jpg"></div>
        <div><img src="img/4.jpg"></div>
        <div><img src="img/5.jpg"></div>
        <div><img src="img/6.jpg"></div>
        <div><img src="img/7.jpg"></div>
        <div><img src="img/8.jpg"></div>
        <div><img src="img/9.jpg"></div>
    </div>
</body>

.container{
    column-width: 250px;
    -webkit-column-width: 250px;
    -o-column-width: 250px;
    -ms-column-width: 250px;
    -moz-column-width: 250px;
    column-gap: 5px;
}
.container div{
    width:250px;
    margin:5px 0px;
}