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

最新推荐文章于 2022-08-16 23:03:53 发布

小溪彼岸

最新推荐文章于 2022-08-16 23:03:53 发布

阅读量641

点赞数

分类专栏： # CSS样式文章标签： css 盒子模式

本文链接：https://blog.csdn.net/zww1984774346/article/details/51810239

版权

CSS样式专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一个简单的盒子模型框架

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

收藏

觉得还不错? 一键收藏
0
评论
css基础学习（3）（盒子模型,动画）

一个简单的盒子模型框架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
复制链接

扫一扫