如何使用 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 简写animation
May 10 HTML / CSS
实列教程 一款基于jquery和css3的响应式二级导航菜单
Nov 13 HTML / CSS
CSS3+js实现简单的时钟特效
Mar 18 HTML / CSS
CSS3中使用RGBa来调节透明度的教程
May 09 HTML / CSS
CSS3 transforms应用于背景图像的解决方法
Apr 16 HTML / CSS
CSS3实现淘宝留白的方法
Jun 05 HTML / CSS
一篇文章带你学习CSS3图片边框
Nov 04 HTML / CSS
HTML5实现QQ聊天气泡效果
Jun 26 HTML / CSS
html5新增的属性和废除的属性简要概述
Feb 20 HTML / CSS
用html5的canvas画布绘制贝塞尔曲线完整代码
Aug 14 HTML / CSS
HTML5 transform三维立方体实现360无死角三维旋转效果
Aug 22 HTML / CSS
html中相对位置与绝对位置的具体使用
May 15 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中break及continue两个流程控制指令区别分析
2011/04/18 PHP
解析CI即CodeIgniter框架在Nginx下的重写规则
2013/06/03 PHP
PHP下获取上个月、下个月、本月的日期(strtotime,date)
2014/02/02 PHP
PHP/HTML混写的四种方式总结
2017/02/27 PHP
PHP正则判断一个变量是否为正整数的方法
2019/02/27 PHP
javascript 函数式编程
2007/08/16 Javascript
JavaScript的单例模式 (singleton in Javascript)
2010/06/11 Javascript
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
2010/06/29 Javascript
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
2012/06/14 Javascript
简约JS日历控件 实例代码
2013/07/12 Javascript
jQuery实现连续动画效果实例分析
2015/10/09 Javascript
基于javascript实现页面加载loading效果
2020/09/15 Javascript
完美的js div拖拽实例代码
2016/09/24 Javascript
JavaScript实现水平进度条拖拽效果
2017/01/18 Javascript
jQuery层级选择器实例代码
2017/02/06 Javascript
Angular2搜索和重置按钮过场动画
2017/05/24 Javascript
微信小程序switch开关选择器使用详解
2018/01/31 Javascript
使用jQuery给Table动态增加行、清空table的方法
2018/09/05 jQuery
详解为什么Vue中不要用index作为key(diff算法)
2020/04/04 Javascript
JQuery获得内容和属性方法解析
2020/05/30 jQuery
Python中有趣在__call__函数
2015/06/21 Python
实时获取Python的print输出流方法
2019/01/07 Python
Python判断变量名是否合法的方法示例
2019/01/28 Python
Python文件操作函数用法实例详解
2019/12/24 Python
python简单实现最大似然估计&amp;scipy库的使用详解
2020/04/15 Python
香港交友网站:be2香港
2018/07/22 全球购物
西班牙购买行李箱和背包网站:Maletas Greenwich
2019/10/08 全球购物
JSF面试题:Jsf中的核心类用那些?有什么作用?LiftCycle六大生命周期是什么?
2014/07/17 面试题
建筑设计所实习生自我鉴定
2013/09/25 职场文书
行政办公员自我评价分享
2013/12/14 职场文书
奶茶店创业计划书范文
2014/01/17 职场文书
十八大报告观后感
2014/01/28 职场文书
民间借贷协议书范本
2014/10/01 职场文书
研究生就业推荐表导师评语
2014/12/31 职场文书
2015新教师教学工作总结
2015/07/22 职场文书
2016年政治理论学习心得体会
2016/01/25 职场文书