主页 / 问题 / 936192
Accepted
BrainSwitch
Asked:2020-01-24 21:16:35 +0000 UTC2020-01-24 21:16:35 +0000 UTC

能够移动每个片段的图像碎片

  • 772

问题的本质在标题中，我只补充一点，用什么标签和css（甚至js，但最好没有它）并不重要，主要是图像片段可以移动。

有类似的东西，但这个解决方案不适合

javascript

2 个回答

  1. Best Answer

    找一张自己喜欢的图

    方面 -813 x 514px

    在此处输入图像描述

    <!-- Необходимо подобрать значения background-position при сильном отличии габаритных размеров вашей картинки от оригинала --> .imgWrap .left { left: 0; background-position: 3% 0; } .imgWrap .center{ left:34.83%; background-position: -87% 0; } .imgWrap .right { left:69.66%; background-position:-157% 0; }

    为了给图片增加音量，他们有责任：

    .imgWrap > div:before{ content:''; position:absolute; top:0;right:100%; width:10%; height:100%; background:inherit; transform-origin:100% 50%; transform:rotateY(-90deg); }

    body{perspective:1000px;}
.imgWrap{
  position:relative;
  width:80%;
  margin:5% auto;
  padding-bottom:39%;
  transform: rotateY(25deg);
  transform-style:preserve-3d;
}
.imgWrap > div{
  position:absolute;
  top:20%;
  width:30.3%;height:100%;
  float:left;
  background-image:url('https://isstatic.askoverflow.dev/ZE0fb.jpg');
  background-size:auto 100%;
  transform-style:preserve-3d;
  outline: 2px solid transparent; */
}

.imgWrap .left  { left: 0;     background-position:   3% 0; }
.imgWrap .center{ left:34.83%; background-position: -87% 0; }
.imgWrap .right { left:69.66%; background-position:-157% 0; }


.imgWrap > div:before{
  content:'';
  position:absolute;
  top:0;right:100%;
  width:10%; height:100%;
  background:inherit;
  transform-origin:100% 100%;
   transform:rotateY(-90deg);
}
.imgWrap .left:before  { background-position:     0%   0; }
.imgWrap .center:before{ background-position: -1001.3% 0; }
.imgWrap .right:before { background-position: -2001.4% 0; }
    <div class="imgWrap">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>
</style> 

<div class="imgWrap">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>

    • 6

  2. svg 解决方案

    SVG 解决方案 - 根据定义 - 响应式的。

    在此处输入图像描述

    为了使应用程序具有自适应性并且图像片段之间的比例不会崩溃，您必须执行以下操作：

    • 使用命令将图像添加到 svg 中<image>，其尺寸以百分比设置width="100%" height="100"
    • 用组合面具剪下窗户。将蒙版分配给某个部分时，fill="white"它将是透明的，并且图像的片段将在剪切窗口中可见。阴影fill="black"使蒙版区域不透明 - 这些是窗口之间的白色桥梁。
      在此处了解有关口罩的更多信息。
    • 将 svg 包装 <div class="container">在父容器中。通过改变容器的宽度和高度的百分比，可以调整块的初始尺寸。

    .container {
width:100%;
height:100%;
}
    <div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       width="100%" height="100%" viewBox="0 0 1375 800" preserveAspectRatio="xMinYMin meet" > 
 <defs>
    <mask id="modular">
      <rect width="100%" height="100%"	 fill="black" /> 
	 <g fill="white">
      <rect x="0" y="0" width="190" height="500" />
      <rect x="210" y="0" width="180" height="500" />
      <rect x="410" y="0" width="180" height="500" />
      <rect x="610" y="0" width="180" height="500" />
      <rect x="810" y="0" width="190" height="500" />  
	  </g>
    </mask>
  </defs>	   

<image xlink:href="https://isstatic.askoverflow.dev/Se35c.jpg" width="100%" height="100%" mask="url(#modular)" />
</svg>	 
</div>

    图像片段的动画

    • 当您将鼠标悬停在图像上时，图像的片段会合并为整个图像。

    这是由添加到蒙版的动画命令提供的：

    <animate attributeName="x" values="210;189" dur="1s" begin="img1.mouseover" restart="whenNotActive" fill="freeze" />

    通过改变矩形左上角的坐标来实现图像片段（遮罩部分）的移位——X values="210;189"

    • 当光标离开图像时，图像恢复到原来的状态：

      <animate attributeName="x" values="189;210" dur="1s" begin="img1.mouseout" restart="whenNotActive" fill="freeze" /> 

    .container {
width:100%;
height:100%;
}
    <div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       width="100%" height="100%" viewBox="0 0 1000 500" preserveAspectRatio="xMinYMin meet"  > 
 <defs>
    <mask id="modular">
      <rect width="100%" height="100%"	 fill="black" /> 
	 <g fill="white">
      <rect x="0" y="0" width="190" height="500" />
      <rect x="210" y="0" width="180" height="500" >
	   <animate attributeName="x" values="210;189" dur="1s" begin="img1.mouseover" restart="whenNotActive"  fill="freeze" />
	   <animate attributeName="x" values="189;210" dur="1s" begin="img1.mouseout" restart="whenNotActive" fill="freeze" />
	  </rect>
      <rect x="410" y="0" width="180" height="500" >
	  <animate attributeName="x" values="410;360" dur="1s" begin="img1.mouseover" restart="whenNotActive" fill="freeze" />
	  <animate attributeName="x" values="360;410" dur="1s" begin="img1.mouseout" restart="whenNotActive" fill="freeze" />
	   </rect>
      <rect x="610" y="0" width="180" height="500" >
	  <animate attributeName="x" values="610;535" dur="1s" begin="img1.mouseover" restart="whenNotActive"  fill="freeze" /> 
	   <animate attributeName="x" values="535;610" dur="1s" begin="img1.mouseout" restart="whenNotActive" fill="freeze" />
	   </rect>
      <rect x="810" y="0" width="190" height="500" >
<animate attributeName="x" values="810;710" dur="1s" begin="img1.mouseover" restart="whenNotActive" fill="freeze" />
 <animate attributeName="x" values="710;810" dur="1s" begin="img1.mouseout" restart="whenNotActive" fill="freeze" />
	   </rect>	  
	  </g>
    </mask>
  </defs>	   

<image id="img1" xlink:href="https://isstatic.askoverflow.dev/Se35c.jpg" width="100%" height="100%" mask="url(#modular)" />
</svg>	 
</div>

    • 5

相关问题