[前端css-3] 实现图片卷帘效果，以及动画
1.效果展示：
效果预览
2.知识点：
1.position（相对定位/绝对定位）
2.伪类（:after/:before）
3.animation（动画）
3.源代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>层叠图片拖动卷帘式动画特效原图细节对比原生js插件</title>
<meta name="keywords" content="层叠图片,拖动,卷帘式,动画特效,原图细节对比,原生js插件">
<meta name="description"
content="层叠图片拖动卷帘式动画特效原图细节对比原生js插件代码下载。一款很实用的jQuery图片插件，它可以帮助你实现原图和经过处理的图片进行对比，拖动中间的分割线来进行两张图片的细节对比。">
<style>
#page {
width: 100%;
height: 100%;
position: absolute;
}
* {
margin: 0;
box-sizing: border-box;
}
.wrapper {
width: 900px;
height: 600px;
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0);
overflow: hidden;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.before,
.after {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-color: white;
background-size: cover;
background-position: center;
position: absolute;
top: 0;
left: 0;
pointer-events: none;
overflow: hidden;
}
.content-image {
height: 100%;
}
.after {
width: 125px;
animation-name: move;
animation-duration: 10s;
animation-iteration-count: 1;
}
.scroller {
width: 50px;
height: 50px;
position: absolute;
left: 100px;
top: 50%;
transform: translateY(-50%);
border-radius: 50%;
background-color: transparent;
opacity: 0.9;
pointer-events: auto;
cursor: pointer;
animation-name:move1;
animation-duration:10s;
animation-iteration-count:1;
}
.scroller:hover {
opacity: 1;
}
.scrolling {
pointer-events: none;
opacity: 1;
z-index: 1;
}
.scroller__thumb {
width: 100%;
height: 100%;
padding: 5px;
}
.scroller:before,
.scroller:after {
content: " ";
display: block;
width: 7px;
height: 9999px;
position: absolute;
left: 50%;
margin-left: -3.5px;
z-index: 30;
transition: 0.1s;
}
.scroller:before {
top: 100%;
}
.scroller:after {
bottom: 100%;
}
.scroller {
border: 5px solid #fff;
}
.scroller:before,
.scroller:after {
background: #fff;
}
@keyframes move {
0% {
width:10%
}
25% {
width:30%
}
50% {
width:50%
}
75% {
width:80%
}
100% {
width:100%
}
}
@keyframes move1 {
0% {
left:0px
}
25% {
left:10%
}
50% {
left:30%
}
75% {
left:60%
}
100% {
left:100%
}
}
</style>
</head>
<body>
<div id="page">
<div class="wrapper">
<div class="before">
<img class="content-image"
src="https://www.jsdaima.com/Uploads/js/201802/1518162334/images/26145024230_06acd55d1b_b.jpg"
draggable="false">
</div>
<div class="after" style="width: 150px;">
<img class="content-image"
src="https://www.jsdaima.com/Uploads/js/201802/1518162334/images/25814974803_d4c55ff708_b.jpg"
draggable="false">
</div>
<div class="scroller" style="left: 125px;">
<svg class="scroller__thumb" xmlns="http://www.w3.org/2000/svg" width="100" height="100"
viewBox="0 0 100 100">
<polygon points="0 50 37 68 37 32 0 50" style="fill:#fff"></polygon>
<polygon points="100 50 64 32 64 68 100 50" style="fill:#fff"></polygon>
</svg>
</div>
</div>
</div>
<script>
let active = false;
document.querySelector('.scroller').addEventListener('mousedown', function () {
active = true;
document.querySelector('.scroller').classList.add('scrolling');
});
document.body.addEventListener('mouseup', function () {
active = false;
document.querySelector('.scroller').classList.remove('scrolling');
});
document.body.addEventListener('mouseleave', function () {
active = false;
document.querySelector('.scroller').classList.remove('scrolling');
});
document.body.addEventListener('mousemove', function (e) {
if (!active) return;
let x = e.pageX;
x -= document.querySelector('.wrapper').getBoundingClientRect().left;
scrollIt(x);
});
function scrollIt(x) {
let transform = Math.max(0, (Math.min(x, document.querySelector('.wrapper').offsetWidth)));
document.querySelector('.after').style.width = transform + "px";
document.querySelector('.scroller').style.left = transform - 25 + "px";
}
scrollIt(150);
document.querySelector('.scroller').addEventListener('touchstart', function () {
active = true;
document.querySelector('.scroller').classList.add('scrolling');
});
document.body.addEventListener('touchend', function () {
active = false;
document.querySelector('.scroller').classList.remove('scrolling');
});
document.body.addEventListener('touchcancel', function () {
active = false;
document.querySelector('.scroller').classList.remove('scrolling');
});
</script>
</body>
</html>
4.相关知识点学习资料：