您的位置：首页 > Web前端 > CSS

CSS学习笔记（5）

2015-08-15 11:27 731 查看
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;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航