css3实现炫酷侧边栏，fixed应用

2020-05-27 网页编程网 网页编程网

}
ol{
    list-style: none;
}
li{
    position: relative;
    width:139px;
    height: 30px;
    right: -100px;
    background-color: #3399ff;
    border-bottom: 2px solid #fff;
    transition:1s ;/*过渡*/
    transition-delay: 3s;/*延迟过渡*/
}
.box:hover li{
right: 0;

}
/*
li:nth-child(1){
    transition-delay:0.1s;
}
li:nth-child(2){
    transition-delay:0.2s;
}
li:nth-child(3){
    transition-delay:0.3s;
}
li:nth-child(4){
    transition-delay:0.4s;
}
li:nth-child(5){
    transition-delay:0.5s;
}
li:nth-child(6){
    transition-delay:0.6s;
}
li:nth-child(7){
    transition-delay:0.7s;
}
li:nth-child(8){
    transition-delay:0.8s;
}
li:nth-child(9){
transition-delay:0.9s;
}
li:nth-child(10){
transition-delay:1s;
}
li:nth-child(11){
transition-delay:1.1s;
}
li:nth-child(12){
transition-delay:1.2s;
}
li:nth-child(13){
transition-delay:1.3s;
}
*/
</style> 
</head> 
<body> 
让li改变位置时间，越后的
<div class="box">
<ol>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ol>
</div>
</body>
<script>
for(var i=0;i<document.querySelectorAll('li').length;i++){
    document.querySelectorAll('li')[i].style.transitionDelay=i*0.1+'s';
}
</script>

阅读原文

阅读 3162

123 显示电脑版