Question

我正在尝试使用CSS3过渡和scale（）将链接项目缩放，同时将鼠标悬停在它们上面。一切顺利，除了一个恼人的问题 - 锚元素中的文字增加了一个丑陋的混蛋，破坏了这种酷炫效果的美感。如果您运行以下代码，您将看到奇怪的文本抖动问题，同时将鼠标悬停在分页链接上。我们怎样才能防止它发生呢？

	.pagination {
		font-family:Arial, Helvetica, sans-serif;
		font-size:14px;
		text-align:center;
	}
	
	.pagination a {
		padding:8px 16px; 
		margin:0 4px;
		border:1px solid #ddd;
		text-decoration:none;
		color:#000000;
		display:inline-block;
		-webkit-transition:all 0.3s ease;
		-o-transition:all 0.3s ease;
		-moz-transition:all 0.3s ease;
		transition:all 0.3s ease;
	}
	
	.pagination a:hover {
		background-color:#ddd;
		-webkit-transform:scale(1.5);
		-ms-transform:scale(1.5);
		-o-transform:scale(1.5);
		-moz-transform:scale(1.5);
		transform:scale(1.5);
	}
	
	.pagination span.current {
		padding:8px 16px; 
		margin:0 4px;
		border:1px solid #4CAF50;
		background-color:#4CAF50;
		color:#FFF;
	}
	
	.pagination span.disabled {
		padding:8px 16px; 
		margin:0 4px;
		border:1px solid #EEE;
		color:#DDD;
		/*display:none;*/ 
	}

 <div class="pagination">
    <span class="disabled">&laquo; Prev</span>
    <span class="current">1</span>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
    <a href="#">6</a>
    <a href="#">7</a>
    <span>...</span>
    <a href="#">19</a>
    <a href="#">20</a>
    <a class="next" href="#">Next &raquo;</a>
</div>

Answer 1

解决此问题的方法是添加

transform

...到您的CSS。

但是，在您的情况下，由于字体太小而且很薄，由于font-family效果结束时的子像素渲染，您仍会遇到一些抗锯齿跳跃。对于这种情况唯一有效的解决方案（如果不允许更改font-weight或font-size），则将font-size: 14.5px;更改为十进制像素，直到找到效果不太明显的值。

driver.find_element_by_css_selector

...似乎是你案件的改进。小提琴here。

如何在css过渡中缩放锚点时避免文本混蛋？

1 个答案: