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

1.效果展示：

效果预览

2.知识点：

 1.position（相对定位/绝对定位）2.伪类（:after/:before）3.animation（动画）

3.源代码:

 <!--* @Description: 文件描述：* @Autor: hwf* @Date: 2021-08-13 15:25:04* @LastEditors: Seven* @LastEditTime: 2021-08-13 15:36:54
-->
<!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.相关知识点学习资料：

freeCodeCamp 响应式网页设计（animation课程）

[前端css-3] 实现图片卷帘效果，以及动画相关推荐

html页面图片翻转特效代码,如何使用css实现翻转图片的效果（附代码）
本篇文章给大家带来的内容是关于如何使用css实现翻转图片的效果(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 具体效果图如下: 主要用到的技术除了3D翻转和定位 ,还用到了 ...
记录html+css制作一个上下跳动效果的动画
需求想用html+css制作一个上下跳动效果的动画,然后记录一下代码,方便今后使用. 实例代码 <!DOCTYPE html > <html><head>< ...
【web前端】JavaScript实现图片幻灯片滚动播放动画效果
JavaScript实现图片幻灯片滚动播放动画效果 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.co ...
html hover图片效果,CSS第9款：Imagehover.css 纯CSS打造的图片悬停效果
用过很多图片县停效果,说实在话,很多都不好用.我大致说一下原因: 1.对基础CSS影响比较大: 2.附加的插件太多: 3.还要引用有一些JS. 而CSS3的诞生,对我们前端开发来说,有了质的飞跃!下边 ...
html图片重叠怎么实现,css如何实现图片堆叠效果
1.初始index.html 为了建立第一张照片,也就是最上面的那张.我们只需要添加一个div,里面包含照片的img.就这么多,剩下的效果都是通过CSS来实现的.确保div的class为stackon ...
CSS实现的图片缩进效果
鼠标未移动时: 鼠标悬停在某一张图片时:一张展开,其余的图片缩进. 代码部分 CSS代码: @charset "utf-8"; /* CSS Document *//*Now th ...
纯前端CSS实现动态太极阴阳鱼效果
今天小千来给大家分享一期纯CSS实现太极动态效果的教程,最终的效果如下图所示,完全没用到JavaScript哦,看下去. 把2d静态的太极图改成了3d,阴极和阳极分到了两个平面里实现旋转效果,这个好实 ...
前端HTML点击图片放大效果展示
目录代码效果放大前放大后最后代码 <!DOCTYPE html> <html lang="en"><head><meta ch ...
html5文字图片垂直居中代码,css实现文字图片垂直居中效果
复制代码代码如下: 轻松实现:垂直居中文字图片 html{ font-size:12px; } .control{ width:600px; border:1px solid #000; paddin ...

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

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

1.效果展示：

2.知识点：

3.源代码:

4.相关知识点学习资料：

[前端css-3] 实现图片卷帘效果，以及动画相关推荐

最新文章

热门文章