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) {
.........完整代码请登录后点击上方下载按钮下载查看