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

css基础学习（3）（盒子模型,动画）

2016-07-02 10:57 696 查看

一个简单的盒子模型框架

boxM.html

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>BoxM</title>
<link href="../css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="top">
<div class="top_content"></div>
</div>

<div class="body">
<div class="body_image"></div>
<div class="body_content">
<div class="body_notification"></div>
</div>
</div>
<div class="footer">
<div class="footer_content"></div>
<div class="footer_menu"></div>
</div>
</body>
</html>

style.css

*{
margin: 0px;
padding: 0px;
}
.top{
width: 100%;
height: 50px;
background-color: #000000;
}

.top_content{
width: 75%;
height: 50px;
margin: 0px auto;
background-color: #98bf21;
}

.body{
margin:  20px auto;
width: 75%;
height: 1500px;
background-color: antiquewhite;
}

.body_image{
width: 100%;
height: 400px;
background-color: #bebebe;
}

.body_content{
width: 100%;
height: 1100px;
background-color: aquamarine;
}
.body_notification{
width: 100%;
height: 50px;
background-color: #cc0000;
}
.footer{
width: 75%;
height: 400px;
background-color: indigo;
margin:  0px auto;
}

.footer_content{
width: 100%;
height: 350px;
background-color: darkgreen;
}

.footer_menu{
width: 100%;
height: 50px;
background-color: #000000;
}

效果图：

动画效果

<style type="text/css">
#divq{
//平移
width: 100px;
height: 100px;
background-color: #A7C942;
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*/
}

#divq{
//旋转
width: 100px;
height: 100px;
background-color: #A7C942;
transform: rotate(180deg);
//如果浏览器不支持动画,可以设置支持
-webkit-transform:rotate(180deg);/*safari chrome*/
-ms-transform: rotate(180deg);/*IE*/
-o-transform: rotate(180deg);/*opera*/
-moz-transform: rotate(180deg);/*firefox*/
}

#divq{
//缩放
width: 100px;
height: 100px;
background-color: #A7C942;
transform: scale(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*/
}

#divq{
width: 100px;
height: 100px;
background-color: #A7C942;
transform: skew(10deg,10deg);
//如果浏览器不支持动画,可以设置支持
-webkit-transform:skew(10deg,10deg);/*safari chrome*/
-ms-transform: skew(10deg,10deg);/*IE*/
-o-transform: skew(10deg,10deg);/*opera*/
-moz-transform: skew(10deg,10deg);/*firefox*/
}
</style>

demo1:平移

div{
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: anim 5s;/*animation: anim 5s infinite alternate*/
-webkit-animation: anim 5s;
}

@keyframes anim {
0%{background: red;left: 0px;top:0px}
25%{background: blue;left: 200px;top:0px}
50%{background: #ccffcc;left: 200px;top:200px}
75%{background: #00ffff;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: #ccffcc;left: 200px;top:200px}
75%{background: #00ffff;left: 0px;top:200px}
100%{background: red;left: 0px;top:0px}
}

demo2:旋转

div{
width: 100px;
height: 100px;
background-color: blue;
-webkit-transition: width 2s ,height 2s,-webkit-transform 2s;
transition: width 2s,height 2s,transform 2s;
}

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

demo3:多列

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css 盒子模式

相关文章推荐

新的分享

章节导航