如何使用 resize 实现图片切换预览功能


Posted in HTML / CSS onAugust 23, 2021

关键点

  • CSS resize 属性允许你控制一个元素的可调整大小性
  • 配合 resize 实现子元素的动态宽度

HTML:
 

<div class='picA'>
    <div class='picB'>
        <div readonly class='resizeElement'></div>
    </div>
</div>

SCSS:

html {
    background: #ddd;
    height: 100%;
    width: 100%;
}
.picA {
    background-image: url(https://z3.ax1x.com/2021/08/17/fhJdpQ.png);
    background-size: cover;
    width: 650px;
    height: 340px;
    border: 5px solid #f0e5ab;
    border-radius: 3px;
    box-shadow: 0 0 1px #999, -2px 2px 3px rgba(0, 0, 0, 0.2);
    padding: 0;
    margin: 1rem auto;
    position: relative;
    overflow: hidden;
}
.picB {
    background-image: url(https://z3.ax1x.com/2021/08/17/fhJUfg.png);
    background-size: cover;
    height: 340px;
    position: absolute;
    top: 0;
    left: 0;
    min-width: 0;
    max-width: 650px;
    box-sizing: border-box;
}
.picB:before {
    content: "↔";
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    font-size: 16px;
    color: white;
    top: 0;
    right: 0;
    height: 100%;
    line-height: 340px;
}
.resizeElement {
    resize: horizontal;
    overflow: scroll;
    opacity: 0;
    position: relative;
    top: 50%;
    left: 0px;
    height: 15px;
    max-width: 650px;
    min-width: 15px;
    width: 0;
    cursor: move;
    transform: scaleY(35);
    transform-origin: center center;
    animation: delta 5s normal ease-in-out 1s;
}
@keyframes delta {
    30% {
        width: 0;
    }
    60% {
        width: 350px;
    }
    100% {
        width: 0;
    }
}

效果如下:

如何使用 resize 实现图片切换预览功能

到此这篇关于如何使用 resize 实现图片切换预览功能的文章就介绍到这了,更多相关resize 图片切换预览内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
HTML5 CSS3给网站设计带来出色效果
Jul 16 HTML / CSS
CSS的background属性及CSS3的背景图片设置总结
Jun 13 HTML / CSS
浅谈css3新单位vw、vh、vmin、vmax的使用详解
Dec 01 HTML / CSS
详解css3中dispaly的Grid布局与Flex布局
Sep 11 HTML / CSS
HTML5 Canvas图像模糊完美解决办法
Feb 06 HTML / CSS
html5+svg学习指南之SVG基础知识
Dec 17 HTML / CSS
h5使用canvas画布实现手势解锁
Jan 04 HTML / CSS
如何给HTML标签中的文本设置修饰线
Nov 18 HTML / CSS
html5移动端禁止长按图片保存的实现
Apr 20 HTML / CSS
CSS实现隐藏搜索框功能(动画正反向序列)
Jul 21 HTML / CSS
HTML实现仿Windows桌面主题特效的实现
Jun 28 HTML / CSS
CSS list-style-type属性使用方法
May 21 HTML / CSS
css中z-index: 0和z-index: auto的区别
Aug 23 #HTML / CSS
CSS Transition通过改变Height实现展开收起元素
Aug 07 #HTML / CSS
css3中transform属性实现的4种功能
Aug 07 #HTML / CSS
从QQtabBar看css命名规范BEM的详细介绍
Aug 07 #HTML / CSS
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
Aug 07 #HTML / CSS
CSS 实现Chrome标签栏的技巧
纯html+css实现Element loading效果
You might like
珊瑚虫IP库浅析
2007/02/15 PHP
php 破解防盗链图片函数
2008/12/09 PHP
php从数据库查询结果生成树形列表的方法
2015/04/17 PHP
php生成二维码
2015/08/10 PHP
php获取当前页面完整URL地址
2015/12/30 PHP
php版微信公众平台接口参数调试实现判断用户行为的方法
2016/09/23 PHP
用函数式编程技术编写优美的 JavaScript
2006/11/25 Javascript
JavaScript学习笔记之数组的增、删、改、查
2016/03/23 Javascript
Angularjs 设置全局变量的方法总结
2016/10/20 Javascript
使用webpack3.0配置webpack-dev-server教程
2018/05/29 Javascript
Angular项目如何升级至Angular6步骤全纪录
2018/09/03 Javascript
详解vue引入子组件方法
2019/02/12 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
2019/04/23 Javascript
vue中v-model对select的绑定操作
2020/08/31 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
2020/10/01 Javascript
Python中的startswith和endswith函数使用实例
2014/08/25 Python
简洁的十分钟Python入门教程
2015/04/03 Python
python实现分析apache和nginx日志文件并输出访客ip列表的方法
2015/04/04 Python
Python中函数及默认参数的定义与调用操作实例分析
2017/07/25 Python
在java中如何定义一个抽象属性示例详解
2017/08/18 Python
python Opencv计算图像相似度过程解析
2019/12/03 Python
Python扫描端口的实现
2021/01/25 Python
纯CSS3制作页面切换效果的实例代码
2019/05/30 HTML / CSS
HTML5 表单验证失败的提示语问题
2017/07/13 HTML / CSS
中国双语服务优势的在线购票及活动平台:247tickets
2018/10/26 全球购物
美国家居用品和厨具购物网站:DealsDot
2019/10/07 全球购物
工作自我评价分享
2013/12/01 职场文书
美食节策划方案
2014/05/26 职场文书
经典团队口号大全
2014/06/21 职场文书
战略合作意向书
2014/07/29 职场文书
成都人事代理协议书
2014/10/25 职场文书
赔偿协议书
2015/01/27 职场文书
2015年电话销售工作总结范文
2015/04/20 职场文书
夫妻吵架保证书
2015/05/08 职场文书
Pytorch数据读取之Dataset和DataLoader知识总结
2021/05/23 Python
Java中的Kafka为什么性能这么快及4大核心详析
2022/09/23 Java/Android