Web Component实现图片拖拽前后对比效果代码-html代码-BFW代码库

Web Component实现图片拖拽前后对比效果代码

代码语言：html

所属分类：拖放

代码描述：Web Component实现图片拖拽前后对比效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
<style>
figure:has(image-compare) {
	margin-inline: 0;
	figcaption { text-align: center; }
}

image-compare {
	--exposure: 50%;
	
	--thumb-background-color: hsla(0, 0%, 100%, 0.9);
	--thumb-background-image: url('data:image/svg+xml;utf8,<svg viewbox="0 0 60 60" width="60" height="60" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M20 20 L10 30 L20 40"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M40 20 L50 30 L40 40"/></svg>');
	--thumb-size: clamp(3em, 10vmin, 5em);
	--thumb-radius: 50%;
	--thumb-border-color: hsla(0, 0%, 0%, 0.9);
	--thumb-border-size: 2px;

	--focus-width: var(--thumb-border-size);
	--focus-color: hsl(200, 100%, 80%);

	--divider-width: 2px;
	--divider-color: hsla(0, 0%, 0%, 0.9);

	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	overflow: clip;
	
	&:not(:defined) {
.........完整代码请登录后点击上方下载按钮下载查看