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

来源：互联网发布：ggplot python legend 编辑：程序博客网时间：2024/06/06 17:20

一个简单的盒子模型框架

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

0 0