如何使用 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 相关文章推荐
css3学习之2D转换功能详解
Dec 23 HTML / CSS
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
Aug 18 HTML / CSS
CSS3 选择器 基本选择器介绍
Jan 21 HTML / CSS
一款纯css3实现的tab选项卡的实列教程
Dec 11 HTML / CSS
css3选择器基本介绍
Dec 15 HTML / CSS
巧用CSS3的calc()宽度计算做响应模式布局的方法
Mar 22 HTML / CSS
HTML5 标准将把互联网视频扔回到黑暗时代
Feb 10 HTML / CSS
关于HTML5的安全问题开发人员需要牢记的
Jun 21 HTML / CSS
html5开发之viewport使用
Oct 17 HTML / CSS
使用HTML5 Geolocation实现一个距离追踪器
Apr 09 HTML / CSS
利用Storage Event实现页面间通信的示例代码
Jul 26 HTML / CSS
使用Html5中的cavas画一面国旗
Sep 25 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
php获取mysql字段名称和其它信息的例子
2014/04/14 PHP
php实现插入排序
2015/03/29 PHP
Thinkphp3.2简单解决多文件上传只上传一张的问题
2017/09/26 PHP
JavaScript获取flash对象与网上的有所不同
2014/04/21 Javascript
Jquery实现纵向横向菜单
2016/01/24 Javascript
基于jquery编写分页插件
2016/03/07 Javascript
webpack中引用jquery的简单实现
2016/06/08 Javascript
jQuery属性选择器用法示例
2016/09/09 Javascript
微信小程序(三):网络请求
2017/01/13 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
Node.js调试技术总结分享
2017/03/12 Javascript
详解Vue 实例中的生命周期钩子
2017/03/21 Javascript
Vue键盘事件用法总结
2017/04/18 Javascript
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
2018/08/01 Javascript
Vue项目中如何使用Axios封装http请求详解
2019/10/23 Javascript
微信小程序canvas动态时钟
2020/10/22 Javascript
[01:57]DOTA2上海特锦赛小组赛解说单车采访花絮
2016/02/27 DOTA
[02:38]DOTA2 夜魇暗潮2020活动介绍官方视频
2020/11/04 DOTA
python检测远程服务器tcp端口的方法
2015/03/14 Python
python3 与python2 异常处理的区别与联系
2016/06/19 Python
基于Python中capitalize()与title()的区别详解
2017/12/09 Python
mac下给python3安装requests库和scrapy库的实例
2018/06/13 Python
Python3导入CSV文件的实例(跟Python2有些许的不同)
2018/06/22 Python
使用python语言,比较两个字符串是否相同的实例
2018/06/29 Python
Python爬虫beautifulsoup4常用的解析方法总结
2019/02/25 Python
浅谈Python爬虫基本套路
2019/03/25 Python
Python变量访问权限控制详解
2019/06/29 Python
台湾SHOPRO购物行家:亚洲首创影视.3C.家电.优质购物平台
2018/05/07 全球购物
机电专业毕业生求职信
2014/07/01 职场文书
2014财务人员自我评价范文
2014/09/21 职场文书
中小学校园安全广播稿
2014/09/29 职场文书
2014幼儿园保育员工作总结
2014/11/10 职场文书
酒店优秀员工推荐信
2015/03/24 职场文书
2015年学校政教工作总结
2015/07/20 职场文书
小学课改工作总结
2015/08/13 职场文书
Java面试题冲刺第十六天--消息队列
2021/08/07 面试题