利用css的变量
是使用- -开头的
<li style="--line-index: 1;"></li>
<li style="--line-index: 2;"></li>
<li style="--line-index: 3.5;"></li>
<li style="--line-index: 5.5;"></li>
<li style="--line-index: 8;"></li>
<li style="--line-index: 11;"></li>
打的popup包围晓得popup-info
利用v-show来做显示控制,要么一起出现,要么都不出现
遮罩层颜色为background-color: rgba(0, 0, 0, 0.6);
<div class="popup" v-show="show">
<div class="popup-info">
利用变量做延时动画
.loading > li {
/* 这里看起来只设置了一个的样式,其实设置了.loading下面所有近邻的li因为他们在定义时
style="--line-index:1"给他们设置了变量,所以到最后我们可以根据设置不同number值来
设置不同的时间做到不用的li有不同的延时效果 */
/* 我们在每一个li元素的行内元素都定义了一个css变量 --line-index大小不同 */
/* 此时定一个动画延迟的变量--time 经过计算calc */
--time: calc((var(--line-index) - 1) * 200ms);
border-radius: 3px;
width: 6px;
height: 30px;
background-col