前端学习－初级－第三周

取名苦手
192 阅读7分钟

第一天

动画（关键帧动画）

不需要触发，打开页面自动播放，循环播放

  • 定义动画 @keyframes

  • 调用动画 animation:动画名 一次动画的时间 延迟时间 动画类型

    注：为了体验感，一般开始和结束的效果是一样的，开始（0%）是可以不用写的，默认是初始状态

animation-name 动画名 必须写

animation-duration 执行一次动画的时间 必须写 s ms

animation-delay 动画延迟时间

animation-timing-function 动画速度曲线

animation-iteration-count 动画执行的次数 n　infinite (无限次)

animation-direction 规定动画是否反向播放

<div class="box1"></div>
<div class="box2">
      <div class="ball">lorem</div>
 </div>

.box1 {
    width: 300px;
    height: 300px;
    background-color: red;
    /* 调用动画 */
    animation: bgcolor 5s alternate-reverse;
    
}
/* .box1:hover {
    background-color: blueviolet;
    transition: 2s;
} */

@keyframes bgcolor {
    /* 起始 */
    from{
        background-color: red;
    }
    /* 结束 */
    to{
        background-color: rgb(92, 66, 66);
    }
}
.box2 {
    width: 400px;
    height: 400px;
    border: 2px solid;
    /* position: relative; */
}
.ball {
    width: 100px;
    height: 100px;
    background-color: rgb(64, 168, 151);
    border-radius: 50%;
    text-align: center;
    /* position: absolute; */
    /* right: 300px; */
    animation: scroll 2s  2;
}
@keyframes scroll {
    /* 起始 */
    0% {
        /* right: 300px; */
        /* bottom: 300px; */
        transform: translate(0px,0);
        
    }
    /* 中间 */
    50% {
        /* right: 0; */
        /* bottom: 0; */
        transform: translate(300px,0);
    }
    /* 结束 */
    100%{
        /* right: 300px; */
        /* bottom: 300px; */
        transform: translate(0px,0);
    }
}

第二天

轮播图

  • 定位+动画方式
<div class="loop-wrap">
        <div class="loop-images-container">
            <img src="./img/2-28-2022.bmp" alt="" class="loop-image">
            <img src="./img/3-2-2022.bmp" alt="" class="loop-image">
            <img src="./img/3-7-2022.bmp" alt="" class="loop-image">
            <img src="./img/3-9-2022.bmp" alt="" class="loop-image">
            <img src="./img/3-10-2022.bmp" alt="" class="loop-image">
            <img src="./img/2-28-2022.bmp" alt="" class="loop-image">
            
        </div>
    </div>

.loop-wrap {
    position: relative;
    height: 360px;
    width: 640px;
    margin: 100px auto;
    overflow: hidden;
}
.loop-image {
    height: 360px;
    width: 640px;
}
.loop-images-container{
    position: absolute;
    left: 0; 
    top: 0;
    width: 500%; /* 横向排列 5张图片 宽度应为主容器5倍 */
    height: 100%;
    font-size: 0;
}
.loop-images-container{
    position: absolute;
    left: 0; 
    top: 0;
    width: 500%;
    height: 100%;
    font-size: 0;
    transform: translate(0,0); /* 初始位置位移 */
    animation: loop 10s linear infinite alternate-reverse;
}

/* 创建loop动画规则 */
/* 
   轮播5张，总耗时10s，单张应为2s(20%)
   单张切换动画耗时500ms，停留1500ms
*/
@keyframes loop {
    0% {transform: translate(0,0);
    }
    15% {transform: translate(0,0);
    } /* 停留1500ms */

    20% {transform: translate(-20%,0);} /* 切换500ms 位移-20% */
    35% {transform: translate(-20%,0);}

    40% {transform: translate(-40%,0);}
    55% {transform: translate(-40%,0);}

    60% {transform: translate(-60%,0);}
    75% {transform: translate(-60%,0);}

    80% {transform: translate(-80%,0);}
    95% {transform: translate(-80%,0);}

    100% {transform: translate(0,0);} /* 复位到第一张图片 */
}
  • 弹性布局+动画
<div class="loop-wrap">
        <div class="loop-images-container">
            <img src="./img/2-28-2022.bmp" alt="" class="loop-image">
            <img src="./img/3-2-2022.bmp" alt="" class="loop-image">
            <img src="./img/3-7-2022.bmp" alt="" class="loop-image">
            <img src="./img/3-9-2022.bmp" alt="" class="loop-image">
            <img src="./img/3-10-2022.bmp" alt="" class="loop-image">
            <img src="./img/2-28-2022.bmp" alt="" class="loop-image">
        </div>
    </div>

.loop-wrap {
    height: 360px;
    width: 640px;
    margin: 100px auto;
    overflow: hidden;
}
.loop-image {
    height: 360px;
    width: 640px;
}
.loop-images-container{
    width: 100%; 
    height: 100%;
    display: flex;
    animation: loop 5s infinite ;
}
@keyframes loop {
    20%{
        transform: translate(-100%,0);
    }
    40%{
        transform: translate(-200%,0);
    }
    60%{
        transform: translate(-300%,0);
    }
    80%{
        transform: translate(-400%,0);
    }
    100%{
        transform: translate(-500%,0);
    }
}
  • label标签实现轮播图
<div class="loop-wrap1">
        <input type="radio" name="pic" id="one">
        <label for="one" class="absolute"><img src="./img/2-28-2022.bmp" alt="" class="loop-image "></label>
        <!--  -->
        <input type="radio" name="pic" id="two">
        <label for="two" class="absolute"><img src="./img/3-2-2022.bmp" alt="" class="loop-image"></label>
        <!--  -->
        <input type="radio" name="pic" id="three">
        <label for="three" class="absolute"><img src="./img/3-7-2022.bmp" alt="" class="loop-image"></label>
        <!--  -->
        <input type="radio" name="pic" id="four">
        <label for="four" class="absolute"><img src="./img/3-9-2022.bmp" alt="" class="loop-image"></label>
        <!--  -->
        <input type="radio" name="pic" id="five">
        <label for="five" class="absolute"><img src="./img/3-10-2022.bmp" alt="" class="loop-image "></label>
    </div>

.loop-wrap1 {
    height: 380px;
    width: 660px;
    margin: 100px auto;
    background-color: aqua;
    position: relative;

}
.absolute {
    position: absolute;
    top: 0;
    left: 10px;
}
input {
    margin-top: 365px;
}
input:checked+label {
    z-index: 2;
}

属性选择器

[属性名=“属性值”]、[属性名]

[type="text"] {
    width: 300px;
    height: 40px;
}
[type] {
    border: none;
}

阴影

文字阴影

text-shadow:水平阴影|垂直阴影|模糊距离|阴影颜色

水平阴影、垂直阴影 必须写

模糊距离和阴影颜色 可以不写，若阴影颜色不写则默认跟随字体颜色

h1 {
    text-shadow: 10px -10px 8px red;
}

盒子阴影

box-shadow:h-shadow | v-shadow | blur | spread | color | inset

值说明
h-shadow必须的，水平阴影的位置，允许负值
v-shadow必须的，垂直阴影的位置，允许负值
blur可选。模糊距离
spread可选。阴影的大小
color可选。阴影的颜色,不写则跟随color
inset可选，从外层的阴影（开始时）改变阴影内测阴影

注：

  1. 如果要让元素四周都有阴影，则h-shadow和v-shadow都设为0
  2. 一个元素可以应用多个阴影效果
.box1 {
    height: 300px;
    width: 300px;
    border: 1px solid;
    box-shadow: 30px 20px 100px 10px purple inset;
}

.box2 {
    height: 300px;
    background-color: yellow;
    width: 300px;
    border: 2px solid red;
    box-shadow: 30px 20px 10px 10px ;
}


.box3 {
    height: 300px;
    width: 300px;
    border: 1px solid;
    box-shadow: 30px 20px 20px 10px purple,-10px -30px  20px blue;
}

.box4 {
    height: 300px;
    width: 300px;
    border-radius: 50%;
    box-shadow: 0px 0px 20px 10px brown;
}

阴影在修改单选框样式的应用


/* 修改单选框样式 */


[type="radio"] {
    display: none;
}
/* 添加伪元素重写单选框样式 */
label::after {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 2px solid red;
    border-radius: 50%;
    box-sizing: border-box;
}
/* 把文字与日radio框绑定，使点击文字能够被选中 */
/* 选中样式 */
[type="radio"]:checked+label::after {
    border: 2px solid white;
    box-shadow: 0 0 0 2px red;
    background-color: red;
}

响应式布局

响应式布局的概念：一套代码针对不同尺寸屏幕(视口大小)显示不同的效果

关键字：

媒体查询 @media

min-width 最小屏幕（大于）

max-width 最大屏幕(小于)

screen 屏幕

给定显示范围通过and连接

两个概念：

  • 衬线字体(serif) 如：宋体

文字边缘经过修饰，在纸张上视觉效果良好

  • 非衬线字体(sans-serif) 如：幼圆

文字边缘未经过修饰，在电子设备上视觉效果良好

设置字体：font-family

.box1 {
    height: 100px;
    width: 300px;
    background-image: linear-gradient(to right,red,yellow);
}

/* 小于600px时的样式 */
@media screen and (max-width:600px) {
    .box1 {
        height: 100px;
        width: 300px;
        background-image: linear-gradient(to right,purple,rgb(17, 0, 255));
    }
}
/* 大于1000px时的样式 */
@media screen and (min-width:1000px) {
    .box1 {
        height: 100px;
        width: 300px;
        background-image: radial-gradient(black,white);
    }
}


.box2 {
    height: 100px;
    width: 500px;
    background-color: aquamarine;
}

/* 500px到800px时的样式 */
@media screen and (min-width:500px) and (max-width:800px) {
    .box2 {
        color: darkred;
        font-size: 20px;
    }
}

引入媒体查询样式表

<link rel="stylesheet" media="screen and (min-width:XXpx) and (max-width:XXpx)" href="路径">

第三天

预处理器

预处理理器器：广义上说，目标格式为 CSS 的 预处理器 是 CSS 预处理理器。或者说：以最终生成 CSS 为目的的领域特定语言。less、sass都是目前主流的 CSS 预处理理器器。

less

  • 注释

    • 单行注释：//不会被编译
    • 多行注释(块注释)：/**/

  • 变量

    @变量名：变量值

@mycolor:orange;

@mywidth:500px;

@height:80%;
h1 {
    color:@mycolor + #5bdf62;//计算
}
.box1 {
    width: @mywidth;
    height: @mywidth;
    border: 1px solid @mycolor;
}

注：使用LESS的运算特性，对数值型的value（数字、颜色、变量等）进行加减乘除四则运算

.box2 {
    margin-top: 50px;
    // 计算
    // 符号前后需要空格
    // 空格需要打括号
    width:(@mywidth / 2);
    height: @height - 20;
    border: 1px solid;
}
  • 嵌套

最终编译的结果都是后代选择器

.box2 {
    margin-top: 50px;
    width:(@mywidth / 2);
    height: @height - 20;
    border: 1px solid;
    p {
        color: @mycolor;
        font-size: 50px;
    }
    div {
        p {
            color: brown;
            font-size: @variable;
        }
    }
}

变量的生命周期

  • 全局变量：所有地方都可引用
  • 局部变量：当前元素或者其嵌套元素（后代）可引用
@variable:60px;//全局变量--->所有地方都可引用
.box3 {
    @leg:50px;//局部变量--->当前元素或者其嵌套元素（后代）可引用  
    width: @variable * 5;
    height: @leg * 4;
    border: 2px solid;
    /* 伪类选择器写法*/
    &:hover {
        background-color: #5bdf62;
    }
    /*伪元素写法*/
    &::after {
        content: "在之后";
        color: red;
    }
    h2 {
        font-size: @leg - 20px;
    }
}
  • 混入（mixins）

多个参数通过逗号隔开，顺序一一对应

当没有传参数时，使用默认值（参数名:默认值），需要使用默认值的参数往后写

//直接定义属性混入
.border {
    border: 2px solid red;
    background-color: #5bdf62;
}
.border1(@long:10px,@color) {
    border: @long solid saddlebrown;
    background-color: @color;
}
.box4 {
    height: 200px;
    width: 400px;
    background-color: black;
    .border;//执行这个，代码从上往下读
}
.box5 {
    width: 200px;
    height: 400px;
    .border1(20px,purple);
}

//默认不带值的写法
.border2(@border,@shadow) {
    border: @border;
    box-shadow: @shadow;
}
.box6{
    height: 400px;
    width: 400px;
    .border2(2px dashed green,40px 40px 50px blue);
}
//默认带值的写法
.border3 (@color1,@color3,@color2:pink) {
    background-image: linear-gradient(45deg,@color1,@color2,@color3);
}
.box7 {
    width: 300px;
    height: 600px;
    .border3(white,black)
}

scss

  • 变量

    $变量名:变量值

  • 嵌套：嵌套规则与LESS一样

    注：属性嵌套、伪类嵌套、选择器嵌套

$mycolor:rgb(129, 57, 57);
h1 {
     color: $mycolor;
}
.box1 {
    width: 200px;
    height: 200px;
    h2 {
        color: $mycolor;
        margin: {
            top:50px;
        }
        //属性嵌套
        font: {
            size: 40px;
            weight: normal;
        }
    }
    //属性嵌套
    border: {
        top:2px dashed blue;
        right: 2px solid yellow;
    }
    padding: {
        left: 400px;
    }
}

  • 混入（mixin）

    声明混合宏@mixin 混合名{混合的复用样式}--------->调用混合宏@include 混合名

    其余与LESS类似

//带默认值的写法
@mixin border($color:red) {
    border: 2px dashed $color;
}
.box2 {
    width: 200px;
    height: 200px;
    @include border;
}

  • 扩展/继承

    @extend

.box3 {
    width: 300px;
    height: 100px;
    background-color: green;
}
section {
    margin-left: 300px;
    width: 500px;
    // 先使用自己的样式，没有的才继承
    @extend .box3
}

  • 占位符

    %placeholder声明的代码块如果不被@extend调用的话，不会产生任何代码。

%style {
    height: 300px;
    width: 300px;
    margin-top: 50px;
    background-color: darkcyan;
}
.box4 {
    @extend %style;
}
avatar
文章
阅读
粉丝