CSS动画与变换-优快云博客

本文链接：https://blog.youkuaiyun.com/thystar/article/details/47665233

CSS动画

2D和3D的转换：

css

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

/*/!*平移*!/*/
/*.div2{*/
    /*transform: translate(200px, 100px);*/
    /*/!*选择支持的浏览器*!/*/
    /*-webkit-transform: translate(200px, 100px); /!*Safari， chrome*!/*/
    /*-ms-transform: translate(200px, 100px); /!*IE*!/*/
    /*-o-transform: translate(200px, 100px);/!*opera*!/*/
    /*-moz-transform: translate(200px, 100px);/!*FireFox*!/*/
/*}*/

/*/!*旋转*!/*/
/*.div2{*/
/*transform: rotate(45deg);*/
/*/!*选择支持的浏览器*!/*/
/*-webkit-transform: rotate(45deg); /!*Safari， chrome*!/*/
/*-ms-transform: rotate(45deg); /!*IE*!/*/
/*-o-transform: rotate(45deg);/!*opera*!/*/
/*-moz-transform: rotate(45deg);/!*FireFox*!/*/
/*}*/

/*缩放*/
.div2{
    margin-top: 200px;
     transform: scale(1,3);
     /*选择支持的浏览器*/
     -webkit-transform: scale(1,3); /*Safari， chrome*/
     -ms-transform: scale(1,3); /*IE*/
     -o-transform: scale(1,3);/*opera*/
     -moz-transform: scale(1,3);/*FireFox*/
 }

/*倾斜*/
/*.div2{*/
    /*margin-top: 200px;*/
    /*transform: skew(50deg, 50deg);*/
    /*/!*选择支持的浏览器*!/*/
    /*-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*!/*/
/*}*/

/*3D转换*/
.div2{
    margin-top: 200px;
    transform: rotateX(200deg);
    /*选择支持的浏览器*/
    -webkit-transform: rotateX(100deg); /*Safari， chrome*/
    -ms-transform: rotateX(100deg); /*IE*/
    -o-transform: rotateX(100deg);/*opera*/
    -moz-transform: rotateX(100deg);/*FireFox*/
}

html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="seldemo.css" type="text/css" rel="stylesheet">
</head>
<body>
<div>初始</div>
<div class="div2">变换</div>
</body>
</html>

CSS动画-过渡：

css:

div{
    width: 100px;
    height: 100px;
    background-color: blue;
    /*执行动画效果*/
    -webkit-transform:width 2s,height 2s,-webkit-transform 2s; /*Safari， chrome*/
    transition: width 2s, height 2s, transform 2s;
}
/*当鼠标放到该位置时变换*/
div:hover{
    width: 200px;
    height: 200px;
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    /*过渡开始延时的时间*/
    transition-delay:2s;
    -webkit-transition-delay:2s;

}

CSS动画效果：

html:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="seldemo.css" type="text/css" rel="stylesheet">
</head>
<body>
<div>初始</div>
<!--<div class="div2">变换</div>-->
</body>
</html>

.css

div{
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    animation: anim 5s;
    -webkit-animation: anim 5s;
}
@keyframes  anim{
    0%{background: red;left: 0px; top:0px}
    25%{background:blue;left: 200px; top:0px}
    50%{background: green;left:200px;top:200px }
    75%{background: gold;left:0px;top:200px }
    100%{background: red;left: 0px; top:0px}
}
@-webkit-keyframes anim {
    0%{background: red;left: 0px; top:0px}
    25%{background:blue;left: 200px; top:0px}
    50%{background: green;left:200px;top:200px }
    75%{background: gold;left:0px;top:200px }
    100%{background: red;left: 0px; top:0px}
}


/*div{*/
    /*width: 100px;*/
    /*height: 100px;*/
    /*background-color: blue;*/
    /*/!*执行动画效果*!/*/
    /*-webkit-transform:width 2s,height 2s,-webkit-transform 2s; /!*Safari， chrome*!/*/
    /*transition: width 2s, height 2s, transform 2s;*/
/*}*/
/*/!*当鼠标放到该位置时变换*!/*/
/*div:hover{*/
    /*width: 200px;*/
    /*height: 200px;*/
    /*transform: rotate(360deg);*/
    /*-webkit-transform: rotate(360deg);*/
    /*/!*过渡开始延时的时间*!/*/
    /*transition-delay:2s;*/
    /*-webkit-transition-delay:2s;*/

/*}*/

/*/!*平移*!/*/
/*.div2{*/
    /*transform: translate(200px, 100px);*/
    /*/!*选择支持的浏览器*!/*/
    /*-webkit-transform: translate(200px, 100px); /!*Safari， chrome*!/*/
    /*-ms-transform: translate(200px, 100px); /!*IE*!/*/
    /*-o-transform: translate(200px, 100px);/!*opera*!/*/
    /*-moz-transform: translate(200px, 100px);/!*FireFox*!/*/
/*}*/

/*/!*旋转*!/*/
/*.div2{*/
/*transform: rotate(45deg);*/
/*/!*选择支持的浏览器*!/*/
/*-webkit-transform: rotate(45deg); /!*Safari， chrome*!/*/
/*-ms-transform: rotate(45deg); /!*IE*!/*/
/*-o-transform: rotate(45deg);/!*opera*!/*/
/*-moz-transform: rotate(45deg);/!*FireFox*!/*/
/*}*/

/*缩放*/
/*.div2{*/
    /*margin-top: 200px;*/
     /*transform: scale(1,3);*/
     /*/!*选择支持的浏览器*!/*/
     /*-webkit-transform: scale(1,3); /!*Safari， chrome*!/*/
     /*-ms-transform: scale(1,3); /!*IE*!/*/
     /*-o-transform: scale(1,3);/!*opera*!/*/
     /*-moz-transform: scale(1,3);/!*FireFox*!/*/
 /*}*/

/*倾斜*/
/*.div2{*/
    /*margin-top: 200px;*/
    /*transform: skew(50deg, 50deg);*/
    /*/!*选择支持的浏览器*!/*/
    /*-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*!/*/
/*}*/

/*3D转换*/
/*.div2{*/
    /*margin-top: 200px;*/
    /*transform: rotateX(200deg);*/
    /*/!*选择支持的浏览器*!/*/
    /*-webkit-transform: rotateX(100deg); /!*Safari， chrome*!/*/
    /*-ms-transform: rotateX(100deg); /!*IE*!/*/
    /*-o-transform: rotateX(100deg);/!*opera*!/*/
    /*-moz-transform: rotateX(100deg);/!*FireFox*!/*/
/*}*/

瀑布流：

.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="pubu.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="contener">
    <div><img src="img/1.jpg">
        <p>海贼王</p>
    </div>
    <div><img src="img/2.jpg">
        <p>海贼王</p>
    </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">
        <p>海贼王</p>
    </div>
    <div><img src="img/2.jpg">
        <p>海贼王</p>
    </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>
</html>

.css

.contener{
    column-rule-width: 250px;
    -webkit-column-width: 250px;
    -webkit-column-gap:5px;
    column-gap: 5px;
}

.contener div{
    width: 250px;
    margin: 5px 0;

}

.contener p{
    text-align: center;
}

CSS学习笔记（5）