css 纯CSS的图像滑块

Posted 2021-05-13

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}

// alert('Hello world!');

<div class="image-slider">
<div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/photoshop-face-before.jpg" /></div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/photoshop-face-after.jpg" />
</div>

/**
 * Image slider with pure CSS
 * Original version in http://demosthenes.info/blog/css
 */

.image-slider {
	position:relative;
	display: inline-block;
	line-height: 0;
}

/* Could use a pseudo-element, but they’re currently
   super buggy. See: http://dabblet.com/gist/ab432c3f6a8f672cd077 */
.image-slider > div {
	position: absolute;
	top: 0; bottom: 0; left: 0;
	width: 25px;
	max-width: 100%;
	overflow: hidden;
	resize: horizontal;
}

/* Cross-browser resizer styling */
.image-slider > div:before {
	content: '';
	position: absolute;
	right: 0; bottom: 0;
	width: 13px; height: 13px;
	padding: 5px;
	background: linear-gradient(-45deg, white 50%, transparent 0);
	background-clip: content-box;
	cursor: ew-resize;
	-webkit-filter: drop-shadow(0 0 2px black);
	filter: drop-shadow(0 0 2px black);
}

.image-slider img {
	user-select: none;
	max-width: 400px;
}