如何使用 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实现毛玻璃效果示例源码
Sep 25 HTML / CSS
CSS3 简写animation
May 10 HTML / CSS
使用CSS3编写类似iOS中的复选框及带开关的按钮
Apr 11 HTML / CSS
CSS3 实现的加载动画
Dec 07 HTML / CSS
使用phonegap创建联系人的实现方法
Mar 30 HTML / CSS
使用phonegap获取设备的一些信息方法
Mar 31 HTML / CSS
基于canvas的骨骼动画的示例代码
Jun 12 HTML / CSS
HTML5 SEO优化的一些建议
Aug 27 HTML / CSS
HTML5输入框下拉菜单功能的示例代码
Sep 08 HTML / CSS
html table呈现个人简历以及单元格宽度失效的问题解决
Jan 22 HTML / CSS
通过feDisplacementMap和feImage实现水波特效
Apr 24 HTML / CSS
使用CSS实现黑白格背景效果
Jun 01 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 按指定元素值去除数组元素的实现方法
2011/11/04 PHP
Zend Framework页面缓存实例
2014/06/25 PHP
PHP实现的通过参数生成MYSQL语句类完整实例
2016/04/11 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
javascript各浏览器中option元素的表现差异
2011/04/07 Javascript
基于jquery的无刷新分页技术
2011/06/11 Javascript
表单元素的submit()方法和onsubmit事件应用概述
2013/02/01 Javascript
js监听键盘事件示例代码
2013/07/26 Javascript
js实现飞入星星特效代码
2014/10/17 Javascript
使用JavaScript 编写简单计算器
2014/11/24 Javascript
jQuery中change事件用法实例
2014/12/26 Javascript
设置点击文本框或图片弹出日历控件的实现代码
2016/05/12 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
2017/03/05 Javascript
Bootstrap媒体对象学习使用
2017/03/07 Javascript
详解js几个绕不开的事件兼容写法
2017/08/30 Javascript
vue升级之路之vue-router的使用教程
2018/08/14 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
2019/04/04 Javascript
Vue学习之常用指令实例详解
2020/01/06 Javascript
微信小程序全选多选效果实现代码解析
2020/01/21 Javascript
vue跳转方式(打开新页面)及传参操作示例
2020/01/26 Javascript
JS实现点星星消除小游戏
2020/03/24 Javascript
vue项目中使用bpmn-自定义platter的示例代码
2020/05/11 Javascript
react ant Design手动设置表单的值操作
2020/10/31 Javascript
Python3实现从指定路径查找文件的方法
2015/05/22 Python
理解生产者消费者模型及在Python编程中的运用实例
2016/06/26 Python
浅谈Python类的__getitem__和__setitem__特殊方法
2016/12/25 Python
Python实现密码薄文件读写操作
2019/12/16 Python
HTML5拖放API实现拖放排序的实例代码
2017/05/11 HTML / CSS
加拿大著名的奢侈品购物网站:SSENSE(支持中文)
2020/06/25 全球购物
Internet主要有哪些网络群组成
2015/12/24 面试题
会计专业大学生职业生涯规划书
2014/02/11 职场文书
乡镇交通安全实施方案
2014/03/29 职场文书
献爱心大型公益活动策划方案
2014/09/15 职场文书
2014年销售工作总结与计划
2014/12/01 职场文书
redis 查看所有的key方式
2021/05/07 Redis
Prometheus 监控MySQL使用grafana展示
2021/08/30 MySQL