CSS学习笔记（5）

来源：互联网发布：直通车软件哪个好编辑：程序博客网时间：2024/05/29 17:42

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;}

0 0