前端CSS3-11

于 2021-07-25 15:47:56 发布
阅读量97 收藏
点赞数
分类专栏： 笔记 学习 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53950248/article/details/119065106
版权

目录

复仇者联盟

 缩放

 less的简介

less的语法

父元素和扩展

混合函数

less的补充

弹性盒简介

flex(弹性盒、伸缩盒)

 弹性容器

 弹性元素

弹性元素的属性

flex-direction 

 会弹的导航条

 弹性容器上的样式

flex-wrap

 justify-content

 align-item

复仇者联盟

①引入图片

<!-- 创建一个外部的容器 -->
    <div class="cube">
        <!-- 引入图片 -->

        <div class="box1">
            <img src="./img/14/1.jpg">
        </div>
        <div class="box2">
            <img src="./img/14/2.jpg">
        </div>
        <div class="box3">
            <img src="./img/14/3.jpg">
        </div>
        <div class="box4">
            <img src="./img/14/4.jpg">
        </div>
        <div class="box5">
            <img src="./img/14/5.jpg">
        </div>
        <div class="box6">
            <img src="./img/14/6.jpg">
        </div>
    </div>

②设置图片位置

 img{
            vertical-align: top;
        }
        .box1{
            transform: rotateY(90deg)translateZ(100px);
        }
        .box2{
            transform: rotateY(-90deg)translateZ(100px);
        }
        .box3{
            transform: rotateX(90deg)translateZ(100px);
        }
        .box4{
            transform: rotateX(-90deg)translateZ(100px);
        }
        .box5{
            transform: rotateY(180deg)translateZ(100px);
        }
        .box6{
            transform: rotateY(0deg)translateZ(100px);
        }

③设置图片旋转3d效果

 @keyframes rotate{
            from{
                transform:rotateX(0) rotateZ(0) ;
            }
            to{
                transform: rotateX(iturn)rotateZ(iturn);
            }
        }
 html{
            perspective:800px;
        }
        .cube{
            width: 200px;
            height: 200px;
            /* background-color: #bfa; */
            margin: 100px auto;
            /* 设置3d变形效果 */
            transform-style: preserve-3d;
            /* transform: rotateX(45deg)rotateZ(45deg); */
            animation: rotate 20s infinite linear;
        }
        .cube>div{
            width: 200px;
            height: 200px;
            /* 为元素设置透明效果 */
            opacity: 0.7;
            position: absolute;
        }

使立体图旋转起来

animation: rotate 20s infinite linear;

将代码组合起来如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html{
            perspective:800px;
        }
        .cube{
            width: 200px;
            height: 200px;
            /* background-color: #bfa; */
            margin: 100px auto;
            /* 设置3d变形效果 */
            transform-style: preserve-3d;
            /* transform: rotateX(45deg)rotateZ(45deg); */
            animation: rotate 20s infinite linear;
        }
        .cube>div{
            width: 200px;
            height: 200px;
            /* 为元素设置透明效果 */
            opacity: 0.7;
            position: absolute;
        }
        img{
            vertical-align: top;
        }
        .box1{
            transform: rotateY(90deg)translateZ(100px);
        }
        .box2{
            transform: rotateY(-90deg)translateZ(100px);
        }
        .box3{
            transform: rotateX(90deg)translateZ(100px);
        }
        .box4{
            transform: rotateX(-90deg)translateZ(100px);
        }
        .box5{
            transform: rotateY(180deg)translateZ(100px);
        }
        .box6{
            transform: rotateY(0deg)translateZ(100px);
        }
        @keyframes rotate{
            from{
                transform:rotateX(0) rotateZ(0) ;
            }
            to{
                transform: rotateX(iturn)rotateZ(iturn);
            }
        }
    </style>
</head>
    <!-- 创建一个外部的容器 -->
    <div class="cube">
        <!-- 引入图片 -->

        <div class="box1">
            <img src="./img/14/1.jpg">
        </div>
        <div class="box2">
            <img src="./img/14/2.jpg">
        </div>
        <div class="box3">
            <img src="./img/14/3.jpg">
        </div>
        <div class="box4">
            <img src="./img/14/4.jpg">
        </div>
        <div class="box5">
            <img src="./img/14/5.jpg">
        </div>
        <div class="box6">
            <img src="./img/14/6.jpg">
        </div>
    </div>
</body>
</html>

效果如下：

 缩放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html{
            perspective: 800px;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            transition: 2s;
            margin: 100px auto;

            /* 变形的原点 默认值 center*/
            transform-origin: 20px 20px;
        }
        .box1:hover{
            /* 对元素进行缩放的函数 
                    scaleX 水平方向缩放
                    scaleY 垂直方向缩放
                    scale() 双方向的缩放*/
            transform: scale(2);
        }
        .img-wrapper{
            width: 200px;
            height: 200px;
            border: 1px red solid;
            overflow: hidden;
        }
        img{
            transition: .2s;
        }
        .img-wrapper:hover img{
            transform: scale(1.2);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="img-wrapper">
        <img src="an.jpg"width="100%">
    </div>
</body>
</html>

效果静态图（将鼠标移动到绿色正方形和照片内，它们会放大，移走将恢复到原来的样子）：

 less的简介

less是一门css的预处理语言

            -less是一个css的增强版，通过less可以编写更少的代码实现更强大的样式

            -在less中添加了许多的新特性，像对变量的支持，对mixin的支持......

            -less的语法大体和css语法一致，但是less中增添了许多对css的扩展 

             所以浏览器无法直接执行less代码，要执行必须向将less转化为css，然后再由浏览器执行

 <div class="box1">aaaa</div>
 <div class="box2">aaaa</div>
 <div class="box3">aaaa</div>
 <style>
        .html{
            /* css原生也支持变量的设置 */
            --color:#ff0;
            --length:200px;
        }
        .box1{
            /* calc()计算函数 */
            width: calc(200px*2);
            height: var(--length);
            background-color: var(--color);
        }
        .box2{
            width: var(--length);
            height: var(--length);
            color: var(--color);
        }
        .box3{
            width: var(--length);
            height: var(--length);
            border: 10px solid var(--color);
        }
    </style>
body{
    width: 100px;
    height: 100px;

body div{
        color: red;
    }
}
body{
    width: 100px;
    height: 100px;
}
body div{
        color: red;
    }

less的语法

    <link rel="stylesheet"href="css/syntax.less">
//less中的单行注释，注释中的内容不会被解析到css中
/*
    css中的注释，内容会被解析到css文件中
*/
.box1{
    background-color: #bfa;

    .box2{
        background-color: #ff0;

        .box4{
            color: red;
        }
    }
    .box3{
        background-color: orange;
    }
}
//变量，在变量中可以存储一个任意的值
//并且我们可以在需要时，任意的修改变量中的值
//变量的语法，@变量名
@a:200px;
@b:#bfa;
@c:box6;
.top5{
    //使用变量时，如果是直接使用则以@变量名的形式使用即可
    width: @a;
    color: @b;
}
//作为类名，或者一部分值使用时必须以@{变量名}的形式使用
.@{c}{
    width: @a;
    background-image: url("@{c}/1.jpg");
}
@d:200px;
@d:300px;

div{
    //变量发生重名时，会优先使用比较近的变量
    @d:115px;
    width: @d;
    height: @e;
}
//可以在变量声明前就使用变量
@e:335px;

.widget{
    color: #efefef;
    background-color: $color;
}
.box1{
    background-color: #bfa;
}
.box1.box2{
    background-color: #ff0;
}
.box1.box2.box4{
    color: red;
}
.box1.box3{
    background-color: orange;
}
.box5{
    width: 200px;
    color: #bfa;
}
.box6{
    width: 200px;
    background-color: url("box6/1.jpg");
}
div{
    width: 115px;
    width: 335px;
}
div{
    width: 300px;
    /* 新版的语法 */
    /* height: $width; */
}

父元素和扩展

.box1{
    .box2{
        color: red;
    }
    >.box3{
        color: red;

        &:hover{
            color: blue;
        }
    }
    //为box1设置一个hover
    //&就表示外层的父元素
  &:hover{
        color: orange;
    }
    div &{
        width: 100px;
    }
}
.p1{
    width: 100px;
    height: 200px;
}
//extend() 对当前选择器扩展指定选择器的样式（选择器分组）
.p2:extend(.p1){
    color: red;
}
.p3{
    //直接对指定的样式进行引用，这里就相当于将p1的样式在这里进行了复制
    //mixin 混合
    .p1();
}
//使用类选择器时可以在选择器后边添加一个括号，这时我们实际上就创建了一个mixins
.p4(){
    width: 100px;
    height: 100px;
    background-color: #bfa;
}
.p5{
    .p4();
}
.box1 .box2{
    color: red;
}
.box1>.box3{
    color: red;
}
.box1 .box1:hover{
    color: orange;
}
div .box1{
    width: 100px;
}
.p1,.p2{
    width: 100px;
    height: 200px;
}
.p2{
    color: red;
}
.p3{
    width: 100px;
    height: 200px;
}

混合函数

//混合函数 在混合函数中可以直接设置变量
.test(@w,@h,@bg-color){
    width: @w;
    height: @h;
    border:1px solid @bg-color;
}
div {
    //调用混合函数，按顺序传递参数
    // .test(200px,300px,#bfa);
    .test(300px);
    // .test(@bg-color:red,@h:100px,@w:100px);
}
span{
    color: average(red,blue);
}
html{
    width: 100%;
    height: 100%;
}
body{
    width: 100%;
    height: 100%;
   background-color: #bfa;
}
body:hover{
    background-color: darken(#bfa,10%);
}
.p3{
    width: 100px;
    height: 200px;
}
.p5{
    width: 100px;
    height: 100px;
}
div{
    width: 300px;
    height: 100px;
    border: 1px solid red;
}
span{
    color: #800080;
}

less的补充

//可以通过import来将其他的less引入到当前的less中
@import "syntax2.less";

.box1{
    //在less中所有的数值都可以可以直接进行运算

    width: 100px +100px;
    height: 100px/2;
    background-color: #bfa;
}

弹性盒简介

flex(弹性盒、伸缩盒)

            -是css中的又一种布局手段，它主要用来代替浮动来完成页面的布局

            -flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变

 弹性容器

            -要使用弹性盒，必须先将一个元素设置为弹性容器

            -我们要通过display来设置弹性容器

                display:flex 设置为块级弹性容器

                display:inline-flex 设置为行内的弹性容器

 弹性元素

            -弹性容器的子元素是弹性元素（弹性项）

            -一个元素可以同时是弹性容器和弹性元素

弹性元素的属性

                flex-grow指定弹性元素的伸展的系数

                -当父元素有多余空间时，子元素如何伸展

                -父元素的剩余空间，会按照比例进行分配

                flex-shrink 指定弹性元素的收缩系数

                -当父元素中的空间不足以容纳所有的子元素时，如果对子元素进行收缩

flex-direction 

                指定容器中弹性元素的排列方式

                    可选值：

                        row 默认值 ，弹性元素在容器中水平排列（左向右）

                            -主轴 自左向右

                        row-reverse 弹性元素在容器中反水平排列（右向左）

                            -主轴 自右向左

                        column 弹性元素纵向排列（自上向下）

                        column弹性元素方向纵向排列（自下向上）

                    主轴：

                        弹性元素的排列方向称为主轴

                    侧轴：

                        与主轴垂直方向的称为侧轴

 /* 将ul设置为弹性容器 */
            display: flex;
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
 <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul{
            width: 800px;
            border: 10px red solid;
            /* 将ul设置为弹性容器 */
            display: flex;
            flex-direction: row;
        }
        li{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            font-size: 50px;
            text-align: center;
            /* display: flex; */
            line-height: 100px;
           
        }
        li:nth-child(1){
            flex-grow: 0;
        }
        li:nth-child(2){
            background-color: pink;
        }
        li:nth-child(3){
            background-color: orange;
        }
    </style>

呈现效果：

 会弹的导航条

<body>
    <ul class="nav">
        <li><a href="#">HTML/CSS</a></li>
        <li><a href="#">Browser Side</a></li>
        <li><a href="#">Server Side</a></li>
        <li><a href="#">Programming</a></li>
        <li><a href="#">XML</a></li>
        <li><a href="#">Web Building</a></li>
        <li><a href="#">Reference</a></li>

    </ul>
</body>
<link rel="stylesheet"href="css/reset.css">
    <style>
        .nav{
            width: 1210px;
            height: 24px;
            margin: 50px auto;
            background-color: #e8e7e3;
            /* 设置为弹性容器 */
            display: flex;
        }
        .nav li{
            /* 设置增长系数 */
            flex-grow: 1;
        }
        .nav a{
            display: block;
            color: #808080;
            text-decoration: none;
            font-size: 16px;
            text-align: center;
        }
        .nav a:hover{
            background-color: #636363;
            color: #fff;
        }
    </style>

呈现效果：

 弹性容器上的样式

flex-wrap

                    设置弹性元素是否在弹性容器中自动换行

                    可选值

                      nowrap  默认值，元素不会自动换行

                      wrap 元素沿着辅轴方向自动换行

                      wrap-reverse元素沿着辅轴反方向换行

 /* flex-wrap: wrap-reverse; */
            /* flex-flow: wrap;和direction的简写属性 */
            /* flex-flow:row wrap; */

 justify-content

                    -如何分配主轴上的空白空间（主轴上的元素如何排列）

                    -可选值

                        flex-start 元素沿着主轴起边排列

                        flex-end元素沿着主轴终边排列

                        center元素居中排列

                        space-around 空白分布到元素两侧

                        space-between 空白均匀分布到元素间

                        space-evenly空白分布到元素的单侧

                       justify-content:center;

 align-item

                    -元素在辅轴上如何对齐

                    -元素间的关系

                        -可选值：

                            stretch 默认值，将元素的长度设置为相同的值

                            flex-start 元素不会拉伸，沿着辅轴起边对齐

                            flex-end 沿着辅轴的终边对齐

                            center 居中对齐

                            baseline 基线对齐

 justify-content: center;
            align-items: center;

            /* align-content: 辅轴空白空间的分布; */
            align-content: flex-start;

画个圈圈诅咒你 yebo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值