--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){})