主页 / 问题 / 649178
Accepted
ruslik
Asked:2020-04-06 18:13:04 +0000 UTC2020-04-06 18:13:04 +0000 UTC

使用 CSS3 增加圈子

  • 772

为什么添加到.circle属性后scale它不再居中对齐？

.furniture-item {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  transform: scale(4);
  transform-origin: 50%;
  background-color: rgba(110, 100, 204, 0.5);
  border-radius: 50%;
  cursor: pointer;
  z-index: 1;
  transition: transform 1s;
}
.circle {
  position: absolute;
  opacity: 1;
  width: 25px;
  height: 25px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: 50%;
  border-radius: 50%;
  background-color: rgba(0, 100, 204, 0.5);
  z-index: 1;
}
<button onclick="document.querySelector('.circle').style.transform='scale(2) translate(-50%, -50%)'">Zoom</button>

<div class="furniture-item active">
  <div class="circle"></div>
</div>

例子

html

4 个回答

  1. 使用 将参考点移动到图形的中心transform: translate(-50%, -50%);。这里的参数需要根据值进行调整scale：

    • 在scale(1)--50%
    • 在scale(2)--25%
    • 在scale(4)--12.5%
    • 当scale(N)- -50% / N（通式）

    一个负值margin，设置为块宽度和高度的一半（以像素为单位），将工作得更稳定：

    .furniture-item {
  background-color: rgba(110, 100, 204, 0.5);
  border-radius: 50%;
  height: 100px;
  left: 50%;
  margin: -50px;
  position: absolute;
  top: 50%;
  transform: scale(4);
  width: 100px;
}

.circle {
  background-color: rgba(0, 100, 204, 0.5);
  border-radius: 50%;
  height: 25px;
  left: 50%;
  margin: -12.5px;
  position: absolute;
  top: 50%;
  transform: scale(2);
  width: 25px;
}
    <div class="furniture-item active">
  <div class="circle"></div>
</div>

    jsfiddle 上的示例。

    • 6
  2. Best Answer

    转换按顺序应用- 缩放必须在移位 后应用。

    transform: translate(-50%, -50%) scale(2);

    .furniture-item {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  transform: scale(4);
  transform-origin: 50%;
  background-color: rgba(110, 100, 204, 0.5);
  border-radius: 50%;
  cursor: pointer;
  z-index: 1;
  transition: transform 1s;
}
.circle {
  position: absolute;
  opacity: 1;
  width: 25px;
  height: 25px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: 50%;
  border-radius: 50%;
  background-color: rgba(0, 100, 204, 0.5);
  z-index: 1;
}
    <button onclick="document.querySelector('.circle').style.transform='translate(-50%, -50%) scale(2)'">Zoom</button>

<div class="furniture-item active">
  <div class="circle"></div>
</div>

    • 4

  3. 有必要返回旧尺寸的 50%，即 增加 25%：

    .furniture-item {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  transform: scale(4);
  transform-origin: 50%;
  background-color: rgba(110, 100, 204, 0.5);
  border-radius: 50%;
  cursor: pointer;
  z-index: 1;
  transition: transform 1s;
}

.circle {
  position: absolute;
  opacity: 1;
  width: 25px;
  height: 25px;
  top: 50%;
  left: 50%;
  transform: scale(2) translate(-25%, -25%);
  transform-origin: 50%;
  border-radius: 50%;
  background-color: rgba(0, 100, 204, 0.5);
  z-index: 1;
}
    <div class="furniture-item active">
  <div class="circle"></div>
</div>

    • 2

  4. SVG解决方案

    当使用scale(n)命令时，一切都以与 CSS中SVG相同的方式发生——增加越大，对象从初始位置偏移的越多。 

    <circle cx="40px" cy="40px" r="20px" transform="scale(2)" fill="greenyellow" stroke="none" opacity="0.9" />

    如您所知，y 的原点svg在左上角。
    使用 cx="40" cy="40" 时，圆心将位于 svg 视口左角 (0,0) 右侧 40px 和下方 40px 处。应用时，scale(2)这些数字乘以二。正因为如此，圆圈才会向右下方移动。
    圆心的新坐标将为 cx="80" 和 cy="80"。
    为清楚起见，请参见该过程的动画。
    在这里，1-2-4倍的放大率依次应用于粉红色圆圈和背面4-2-1 

    <head>
  <meta charset="utf-8">
  <title>The increase of the circle when you hover</title>
   </head>
 <body>
 <svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events"
	  width="300px" height="300px">
	 	 
          <text x="70" y="15">mouseover on pink circle</text>
		<circle cx="40px" cy="40px" r="20px" transform="scale(2)" fill="greenyellow" stroke="none" opacity="0.9" /> 
		
		<circle cx="40px" cy="40px" r="20px" transform="scale(4)" fill="dodgerblue" stroke="none" opacity="0.9" />
		<text x="132" y="162">Scale(4)</text>
		<text x="52" y="82">Scale(2)</text>
		<circle id="circle1" cx="40px" cy="40px" r="20px" fill="violet" stroke="none" opacity="0.5">
		<animateTransform id="an1" fill="freeze" attributeName="transform" type="scale" dur="4s"  begin="circle1.mouseover" values="1;2;4" restart="whenNotActive"/>
		<animateTransform id="an2" fill="freeze" attributeName="transform" begin="an1.end" type="scale" dur="1s"  begin="circle1.mouseover"           values="4;4" restart="whenNotActive"/> 
		<animateTransform id="an3" fill="freeze" attributeName="transform" begin="an2.end" type="scale" dur="2s"    begin="circle1.mouseover"           values="4;2;1" restart="whenNotActive"/>
		
		</circle>

	</svg>
 
 </body>

    选项1：

    如何处理 - 有几种选择：
    假设您需要将对象最多增加 4 倍。
    我们考虑中心坐标：40*4=160px；并立即用这些坐标放置圆心： cx="160" cx="160" 现在我们有信心圆在放大时不会超出 SVG 画布。请参见下面的示例。 

    <head>
  <meta charset="utf-8">
  <title>The increase of the circle when you hover</title>
   </head>
 <body>
 <svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events"
	  width="300px" height="300px">
	   <text x="70" y="15">mouseover on greenyellow circle</text>
		
	<! --the maximum limit of the increase of circle - dotted-->
		<circle  cx="160px" cy="160px" r="81px" fill="none" stroke-width="1" stroke="gray" stroke-dasharray="15 10" opacity="0.9" />				
		
		<circle cx="160px" cy="160px" r="20px"  fill="dodgerblue" stroke="none" opacity="0.9" > 
		<animate attributeName="r" id="an1" fill="freeze"  begin="c1.mouseover"  dur="4s"   values="20;80;20;80" restart="whenNotActive"/> 
		</circle>
		 <circle id="c1" cx="160px" cy="160px" r="20px" fill="greenyellow" stroke="none" opacity="0.9" /> 
		
	</svg>
 
 </body>

    下一个例子稍微复杂一些，有两个圆圈，沿途可以看到两个动画是如何交互的。 

    <head>
  <meta charset="utf-8">
  <title>The increase of the circle when you hover</title>
   </head>
 <body>
 <svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events"
	  width="300px" height="300px">

	  <text x="70" y="15">mouseover on greenyellow circle</text>
	  
		<! --the maximum limit of the increase of circle - dotted-->
		<circle  cx="160px" cy="160px" r="80px" fill="none" stroke="gray" stroke-dasharray="15 10" opacity="0.9" />		

		<circle cx="160px" cy="160px" r="20px"  fill="dodgerblue" stroke="none" opacity="0.9" > 
		<animate id="an1" attributeName="r"  fill="freeze"  begin="c1.mouseover;an2.end+0.2s"  dur="4s"   values="20;80;20" restart="whenNotActive"/> 
		</circle>

		<circle cx="160px" cy="160px" r="20px"  fill="crimson" stroke="none" opacity="0.9" > 
		<animate id="an2" attributeName="r"  fill="remove"  begin="an1.end"  dur="4s"   values="20;80;20;80" restart="whenNotActive"/> 
		</circle>
		
		<circle id="c1" cx="160px" cy="160px" r="20px" fill="greenyellow" stroke="none" opacity="0.9" /> 
		
	</svg>
 
 </body>

    方案2 如果你需要在画布的一角放置一个圆，但不希望它超出画布的边界，或者放大时不希望它沿对角线向中心运行，则使圆心的坐标相等到圆的半径。 

    <circle cx="20px" cy="20px" r="20px" />        


    <head>
  <meta charset="utf-8">
  <title>An expanding circle in the corner</title>
   </head>
 <body>
 <svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events"
	  width="300px" height="300px">
	   <text x="20" y="185">mouseover on greenyellow circle</text>
		
	<! --the maximum limit of the increase of circle - dotted-->
		<circle  cx="80px" cy="80px" r="82px" fill="none" stroke-width="1" stroke="gray" stroke-dasharray="15 10" opacity="0.9" />		
		
		<circle cx="20px" cy="20px" r="20px"  fill="dodgerblue" stroke="none" opacity="0.9" > 
		<animateTransform id="an1" fill="freeze" attributeName="transform" type="scale" dur="4s"  begin="c1.mouseover" values="1;2;4" restart="whenNotActive"/>
		</circle>
		 <circle id="c1" cx="20px" cy="20px" r="20px" fill="greenyellow" stroke="none" opacity="0.9" /> 
		
	</svg>
 
 </body>

    在缩放时，还有更多方法可以保持、居中对象。在其他参与者的回答中，一切都已经很好地解释了。感谢所有相关人员。

    • 1

相关问题