2.7 CSS动画

1. 转换 

transform:

　　<1>2D转换

　　　　translate()

　　　　rotate()

　　　　scale()

　　　　skew()  倾斜

　　　　matrix()

　　<2>3D转换

　　　　rotateX()

　　　　rotateY()

 

2. 过渡

　　transition:

　　transition-property 过渡名称

　　transition-duration 过渡时间

　　transition-timing-function 过渡时间去西安

　　transition-delay 过渡开始时间

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="mycss.css">
</head>
<body>
    <div>效果展示</div>
</body>
</html>
div{
    width: 100px;
    height: 100px;
    background-color: blue;
    text-align: center;
    transition: width 2s, height 2s, transform 2s;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}

div:hover{
    width: 200px;
    height: 200px;
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
}

　　

　　鼠标放在蓝色方块上, 会在2s内完成放大为200px*200px且旋转360度的动作

 

3. 动画

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="mycss.css">
</head>
<body>
    <div>效果展示</div>
</body>
</html>
div{
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    animation: anim 5s;
    -webkit-animation: anim 5s;
}

@keyframes anim{
    0%{background-color: red; left: 0px; top:0px}
    25%{background-color: blue; left: 200px; top:0px}
    50%{background-color: chocolate; left: 200px; top:200px}
    75%{background-color: brown; left: 0px; top:200px}
    100%{background-color: red; left: 0px; top:0px}
}

//浏览器的适配
@-webkit-keyframes anim {
     0%{background-color: red; left: 0px; top:0px}
     25%{background-color: blue; left: 200px; top:0px}
     50%{background-color: chocolate; left: 200px; top:200px}
     75%{background-color: brown; left: 0px; top:200px}
     100%{background-color: red; left: 0px; top:0px}
 }

　　div在5s内向右, 向下, 向左, 向上回到原地, 并且颜色此过程中也在改变

 

4. 多列

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="mycss.css">
</head>
<body>
    <div>
        欢迎光临武汉这里山好水好人更好周黑鸭很好吃精武鸭脖也不错
        欢迎光临武汉这里山好水好人更好周黑鸭很好吃精武鸭脖也不错
        欢迎光临武汉这里山好水好人更好周黑鸭很好吃精武鸭脖也不错
        欢迎光临武汉这里山好水好人更好周黑鸭很好吃精武鸭脖也不错
        欢迎光临武汉这里山好水好人更好周黑鸭很好吃精武鸭脖也不错
        欢迎光临武汉这里山好水好人更好周黑鸭很好吃精武鸭脖也不错
        欢迎光临武汉这里山好水好人更好周黑鸭很好吃精武鸭脖也不错
        欢迎光临武汉这里山好水好人更好周黑鸭很好吃精武鸭脖也不错
        欢迎光临武汉这里山好水好人更好周黑鸭很好吃精武鸭脖也不错
        欢迎光临武汉这里山好水好人更好周黑鸭很好吃精武鸭脖也不错
        欢迎光临武汉这里山好水好人更好周黑鸭很好吃精武鸭脖也不错
        欢迎光临武汉这里山好水好人更好周黑鸭很好吃精武鸭脖也不错
        欢迎光临武汉这里山好水好人更好周黑鸭很好吃精武鸭脖也不错
        欢迎光临武汉这里山好水好人更好周黑鸭很好吃精武鸭脖也不错
    </div>
</body>
</html>
div{
    column-count: 4;
    column-gap: 50px;
    column-rule: 5px outset red;
    -webkit-column-count: 4;
    -webkit-column-gap: 50px;
    -webkit-column-rule: 5px outset red;
}

　　

 

5. 瀑布流效果

　　

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="mycss.css">
</head>
<body>
    <div class="container">
        <div><img src="img/1.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/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/3.jpg"></div>
        <div><img src="img/4.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/6.jpg"></div>
        <div><img src="img/8.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/7.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/6.jpg"></div>
        <div><img src="img/7.jpg"></div>
        <div><img src="img/9.jpg"></div>
    </div>
</body>
</html>
.container{
    column-width: 250px;
    column-gap: 5px;
    -webkit-column-width: 250px;
    -webkit-column-gap: 5px;
}
.container div{
    width: 250px;
    margin: 5px 0px;
}

　　

 

posted @ 2015-02-11 17:57  Mirrorhanman  阅读(124)  评论(0)    收藏  举报