css实例2 与 forEach map $.each 的使用

这里写图片描述

--dirname 是css中的声明变量  var(--n)是一个函数指的是读取变量
让其动画的时间不一致则可以达到图片的效果.这是仿一个大佬的小案例
//html代码
  <div class="box">
        <span></span>
        <span></span>
        <span></span>
    </div>
//css代码
html,body{
    /* 因为默认是没有高度的 */
    height: 100%;
    /* 使其box 居中显示 */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
}



.box{
    width: 150px;
    height: 150px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box span{
    /* 全部 居中显示 作为一个行内块元素 */
    position: absolute;
    /* 定义一个 css变量 --diameter 方便计算 
     var() css函数 读取csss变量*/
    --diameter: calc(40% + (var(--n)-1) *30%);
    width: var(--diameter);
    height: var(--diameter);
    box-sizing: border-box;
    border:10px solid dimgray;
    border-radius: 2px;
    animation: one  linear infinite;

}

.box span:nth-child(1){
    /* 定义一个 变量 --n */
    --n:1;
    /* 动画的时间 */
    animation-duration: 1s;
}
.box span:nth-child(2){
    /* 定义一个 变量 --n */
    --n:2;
    /* 动画的时间 */
    animation-duration: 2s;
}
.box span:nth-child(3){
    /* 定义一个 变量 --n */
    --n:3;
    /* 动画的时间 */
    animation-duration: 4s;
}


.box span::before,.box span::after{
    content: "";
    background-color: gold;
    width: 10px;
    height: 50%;
    position: absolute;
}
.box span::before {
    top: -10px;
    left: -10px;
}

.box span::after {
    bottom: -10px;
    right: -10px;
}

@keyframes one{
    to{
        transform: rotateY(360deg)
    }
}

forEach的用法与 map 与 $.each

//语法
//value：遍历的数组内容；index：对应的数组索引，array：数组本身。
//第三参数基本不使用
数组.forEach(function(value, index, array) {

    });
//map 数组[1,2,3,4,5,6] v 值 i索引 
数组.map(function(v,i){return v*2})
会返回一个新数组, [2,4,6,,8,10,12]
 不写return 会返回一堆 undefined

//jquery中的循环, 传入需要遍历的数组, 需要注意的是值与其他的是相反的
//索引在前, 值在后
$.each(arr,function(index,value){})

这里写图片描述

css实例2 与 forEach map $.each 的使用

猜你喜欢