Web Component实现图片拖拽前后对比效果代码
代码语言:html
所属分类:拖放
代码描述:Web Component实现图片拖拽前后对比效果代码
代码标签: 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) {
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0