CSS图片对比效果

易山易酒易诗

已于 2022-05-03 16:35:29 修改

阅读量451

点赞数 1

分类专栏： CSS

于 2022-05-03 16:31:40 首次发布

本文链接：https://blog.csdn.net/qq_44675204/article/details/124557252

版权

css css3 html

CSS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

请添加图片描述

<template>
  <div class="image-slider">
    <div>
      <img src="https://img.thehour.cn/2020/06/14/15920940945953601035590088545385.jpeg?w=720&h=480" /> 
    </div>
    <img src="https://tse1-mm.cn.bing.net/th/id/R-C.465d9c3d971512eb57e68d165b3aafc5?rik=UQSCnzYcpmlsFw&riu=http%3a%2f%2fimage.hnol.net%2fc%2f2021-05%2f27%2f22%2f20210527223130451-4609609.jpg&ehk=vRerayO7kZfqvvvnNDNZfF43WTyEicBAbAYEYzg9G0U%3d&risl=&pid=ImgRaw&r=0" /> 
  </div>
</template>

<script>
export default {
  mounted() {},
  methods: {},
};
</script>

<style>
body {
  background: none;
  font: bold 100% Helvetica, sans-serif;
}

.image-slider {
  position: relative;
  display: inline-block;
  width: 720px;
  height: 480px;
  padding: 0;
  overflow: hidden;
}

.image-slider div {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 50%;
  max-width: 100%;
  height: 100%;
  overflow: hidden;
  resize: horizontal;
}

.image-slider div::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  padding: 2px;
  background: linear-gradient(-45deg, black 0 50%, transparent 50% 100%);
  cursor: ew-resize;
}

.image-slider img {
  display: block;
  user-select: none;
}

</style>