css实现两张照片拖动分界线对比查看前后差异效果代码
代码语言:html
所属分类:拖放
代码描述:css实现两张照片拖动分界线对比查看前后差异效果代码
代码标签: css 两张 照片 拖动 分界线 对比 查看 前后 差异
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
:root {
/* Set aspect ratio for .before-after-container.
Images need to be same aspect ratio as container in pixels.
Handy tool to get aspect ratio for any image dimension.
---> https://www.digitalrebellion.com/webapps/aspectcalc
Aspect Ratios on CSS Tricks
----> https://css-tricks.com/almanac/properties/a/aspect-ratio/
*/
--before-after-aspect-ratio: 1 / 1; /* <--- Square 1080px x 1080px */
/* Before and After Images */
--before-image: url(//repo.bfw.wiki/bfwrepo/image/60078a8d5f89d.png);
--after-image: url(//repo.bfw.wiki/bfwrepo/image/60078abad6d5a.png);
/** **************
Example with a 16 / 9 ratio
--before-after-aspect-ratio: 16 / 9;
--before-image: url(https://assets.codepen.io/191814/16-9-original-Great-Grandfather.jpg);
--after-image: url(https://ass.........完整代码请登录后点击上方下载按钮下载查看
网友评论0