Question

我正在研究一个简单的CSS动画，并遇到了一个奇怪的问题。

当动画几个小div时，如果我在Chrome / Firefox上放大或缩小，div的高度会变得不一致 - 尽管它们都共享相同的大小样式。

有没有办法用CSS解决这个问题？我希望条纹保持一致的高度，而不考虑缩放级别。我意识到这是一个边缘情况，但希望覆盖尽可能多的基础！

示例是here。

HTML

.animation-box {
  width: 100px;
}

.animation-bar {
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-name: bargraph;
  animation-timing-function: linear;
  background-color: #0d97c1;
  height: 3px;
  margin: 2px;
}

@keyframes bargraph {
  0% {
    width: 100%;
  }
  50% {
    width: 10%;
  }
  100% {
    width: 100%;
  }
}

CSS

import csv
import urllib.request
from bs4 import BeautifulSoup

twiturl = "https://twitter.com/ACInvestorBlog"
twitpage = urllib.request.urlopen(twiturl)
soup = BeautifulSoup(twitpage,"html.parser")

tweets = [i.text for i in soup.select('a.twitter-cashtag.pretty-link.js-nav b')]
print(tweets)

Answer 1

如果只使用一个元素而不是代码进行简化：

＆＃13;

.animation-bar {
  animation: bargraph 1.5s infinite linear alternate;
  width: 100px;
  height: 25px;
  background-image: linear-gradient(#0d97c1 50%, transparent 50%);
  background-position:0 0;
  background-size: 100% 5px;
  background-repeat: repeat-y;
}

@keyframes bargraph {
  0% {
    background-size: 100% 5px;
  }
  100% {
    background-size: 10% 5px;
  }
}

＆＃13;

<div class="animation-bar"></div>

＆＃13;

Answer 2

这是子像素渲染的问题。这里的问题是，当你缩放时，两个条之间的空间必须捕捉到屏幕上的给定像素。

如果您有 3px 页边距@ 150％缩放，则计算空间 4,5px 。这意味着屏幕上的缩放空间将以4或5px 不一致地呈现。

在常规CPU计算的dom上，你的条形图将被放置在最接近的值，产生那些奇怪的间隙。

你可以做些什么来减少效果是应用一些GPU渲染的CSS（与常规CPU渲染相反），这在渲染亚像素图形方面更好。

这样做的一种方法是应用变换。

.animation-box {
  width: 55px;
  margin: 0 15px 0 -5px;
}

.animation-bar {
  animation: bargraph 1s infinite linear;
  transform-origin: top left;
  height: 3px;
  background-color: #0d97c1;
  margin-bottom: 3px;
}

@keyframes bargraph {
  0% {
    transform: scaleX(1);
  }
  25% {
    transform: scaleX(.8);
  }
  50% {
    transform: scaleX(.6);
  }
  75% {
    transform: scaleX(.8);
  }
  100% {
    transform: scaleX(1);
  }
}

<div class='animation-box animate'>
  <div class="animation-bar"></div>
  <div class="animation-bar"></div>
  <div class="animation-bar"></div>
  <div class="animation-bar"></div>
</div>

我推荐一篇关于Smashing Magazine的优秀文章：CSS GPU Animation: Doing It Right

浏览器缩放时，CSS调整大小不一致

2 个答案: