CSS-滑块

Jackie_Mina

已于 2023-02-09 11:32:10 修改

阅读量583

点赞数 1

分类专栏： CSS 前端文章标签： css css3 前端

于 2023-02-07 09:48:00 首次发布

本文链接：https://blog.csdn.net/weixin_36752088/article/details/128912982

版权

前端同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

CSS

7 篇文章 0 订阅

订阅专栏

原视频：CodingStartup起码课

移动滑块，显示图片的黑白区域

在这里插入图片描述

<div class="comparison" style="--slide:500">
  <input type="range" class="slider" min="1" max="1000" value="500" oninput="this.parentNode.style.setProperty('--slide',`${this.value}`)">
</div>

body{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:100vh;
}
.comparison{
  --image:url(https://images.unsplash.com/photo-1629337419504-9611ef2dfa94?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80);
  --height:700px;
  width:900px;
  height:var(--height);
  position:relative;
  
  overflow:hidden;
  box-shadow:0px 2px 6px rgba(0,0,0,0.15);
  border-radius:4px;
}


.comparison::before,
.comparison::after {
  content: '';
  display: block;
  width: inherit;
  height: inherit;
  background-size: cover;
  background-image: var(--image);
  position: absolute;
  top: 0;
  left: 0;
}
/*将before伪类设置为灰度100%的滤镜*/
.comparison::before{
  filter: grayscale(100%);
}
/*将after伪类设置：剪裁可以显示区域*/
.comparison::after{
  clip-path: inset(0 0 0 calc(var(--slide) /10 * 1% ));
}

/*设置滑块样式:不显示滑块*/
.slider{
  position:absolute;
  top:0;
  left:0;
  
  -webkit-appearance:none;
  appearance:none;
  outline:none;
  margin:0;
  
  background:transparent;
  width:100%;
  height:100%;
  z-index:100;
}
/*-webkit-slider-thumb:type为range的input标签内的一种伪类样式,用于设置range的滑块的具体样式,该伪类只在内核为webkit/blink的浏览器中有效*/
/*将滑块的操作部分，改成宽14高100%的黑色长条，鼠标样式改成双向箭头*/
.slider::-webkit-slider-thumb{
  -wenbit-appearance:none;
  appearance:none;
  width:14px;
  height:var(--height);
  background:#000;
  box-shadow:0px 0px 6px rgba(0,0,0,.15);
  border-radius:2px;
  cursor:ew-resize;
}