css3实现游戏首页，应用整个视频做首页，绝对定位，css选择器

2020-05-28 网页编程网 网页编程网

}
.video-wrap video{
    width:100%;
    height:100%;
}
.select{
    position: absolute;
    top:30px;
    left:100px;
    width: 315px;
    height: 282px;
}
.btn{
    float: left;
    width: 40px;
    height: 100%;
    margin-right: 12px;
    background-image: url('https://jx3.xoyo.com/zt/2020/05/08/fenliuye-pc/assets/img/dashijie-b606cf26.png.webp');
    background-position-x:0;
}
.btn:nth-child(2){
background-position-x:-59px;
}
.btn:nth-child(3){
background-position-x:-113px;
}
.btn:nth-child(4){
background-position-x:-169px;
}
.btn:nth-child(5){
background-position-x:-224px;
}
.btn:nth-child(6){
background-position-x:-279px;
}
.btn:nth-child(1):hover{
background-position-x:-368px;
}
.btn:nth-child(2):hover{
background-position-x:-368px;
}
.btn:nth-child(3):hover{
background-position-x:-368px;
}
.btn:nth-child(4):hover{
background-position-x:-368px;
}
.btn:nth-child(5):hover{
background-position-x:-368px;
}
.btn:nth-child(6):hover{
background-position-x:-368px;
}
</style> 
</head> 
<body> 
<div class="wrap">
<div class="video-wrap"><video src="1.mp4" autoplay muted loop></video></div>
<div class="select">
    <div class="btn"></div>
    <div class="btn"></div>
    <div class="btn"></div>
    <div class="btn"></div>
    <div class="btn"></div>
    <div class="btn"></div>
</div>
</div>
</body>
<script>
for(var i=0;i<document.querySelectorAll('li').length;i++){
    document.querySelectorAll('li')[i].style.transitionDelay=i*0.1+'s';
}
</script>

阅读原文

阅读 3533

123 显示电脑版