如何使用 resize 实现图片切换预览功能_CSS教程_CSS_网页制作

来源:脚本之家  责任编辑:小易  

关键点

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 图片切换预览内容请搜索真格学网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持真格学网!


  • 本文相关:
  • css 使用 resize 实现图片拖拽切换预览功能(强大功能)
  • caffe ssd 里的resize是怎么实现的
  • 如何使用vector的reserve和resize方法
  • Image Resize Guide图片处理使用技巧
  • 内容页的缩略图怎么用sysResizeImg函数 帝国cms
  • VB6中,想在窗体的Resize缩放事件中实现:如果窗体宽度比以前...
  • 实现自适应窗口的用户对象 pb autoResize,该怎么解决
  • 如何使用justresizelt!
  • 如何在ps中使用OnOne Perfect Resize Professional Edition v7....
  • localResizeIMG先压缩后使用ajax无刷新上传(移动端)
  • delphi7 的splitter 实现代码,如canResize
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作csscss教程resize图片切换css 使用 resize 实现图片拖拽切换预览功能(强大功能)css教程css3div+css教程web标准教程浏览器兼容教程css布局实例css控制ul li 的样式详解(推荐)html设置超链接字体颜色和点击后的字体颜色div水平垂直居中的完美解决方案css设置各种中文字体如雅黑、黑体、宋体、楷体等等css 文本字体颜色设置方法(css color)css 漂亮搜索框美化代码css自定义select下拉选择框的样式(不用其他标签模拟)css圆角效果 -webkit-border-radius(css3中border-radcss 中的background:transparent到底是什么意思有什么css 首行缩进两个文字如何使用 resize 实现图片切换预览功能css 即将支持嵌套,sass/less 等预处理器该何去何从css transition通过改变height实现展开收起元素从qqtabbar看css命名规范bem的详细介绍css实现两栏布局,左侧固定宽,右侧自适应的多种方法css 实现chrome标签栏的技巧css实现两列布局的n种方法css实现隐藏搜索框功能(动画正反向序列)css3中animation实现简单的手指点击动画的示例
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved