900字范文 > [前端css-3] 实现图片卷帘效果以及动画

[前端css-3] 实现图片卷帘效果以及动画

时间：2024-03-25 05:09:56

[前端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="/Uploads/js/02/1518162334/images/26145024230_06acd55d1b_b.jpg"draggable="false"></div><div class="after" style="width: 150px;"><img class="content-image"src="/Uploads/js/02/1518162334/images/25814974803_d4c55ff708_b.jpg"draggable="false"></div><div class="scroller" style="left: 125px;"><svg class="scroller__thumb" xmlns="/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>