使用CSS转换时,我该怎么做才能避免图像模糊/闪烁问题？我已经尝试了一些来自 CSS transition effect makes image blurry / moves image 1px,i
... . . 使用CSS转换时,我该怎么做才能避免图像模糊/闪烁问题？我已经尝试了一些来自 CSS transition effect makes image blurry / moves image 1px,in Chrome?的建议,但似乎无法弄明白.
我在下面附上了plunker代码.
https://plnkr.co/edit/kXbrxjnD0llt3u8dBujv?p=preview
的index.html
<head> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> <body> <img src="usequities_green.svg" class="sample_fixed_income"><section class="sectors"> <div class="container index-container-responsive"> <div class="row"> <div class="sectors-icon"> <img src="usequities_green.svg" class="sectors-icon-container fixed_income"> </div> </div> </div></section> </body></html>
style.css文件
/* Styles go here */.sectors { background-color: #30B784; color: white; display: flex; height: 680px; align-items: center; justify-content: center; position: relative;}.sectors__section__title { font-size: 32px; line-height: 48px;}.sectors-icon .sectors-icon-container{ animation-direction: alternate; animation-iteration-count: infinite; animation-play-state: running; animation-timing-function: ease-in-out; background-color: white; background-position: center; background-repeat: no-repeat; border-radius: 50%; box-shadow: 0 10px 40px 0 rgba(23,28,33,0.13),0 31px 13px 0 rgba(23,0.05); opacity: 1; transition: margin 0s cubic-bezier(0.2,0.6,0.3,1),opacity 0s ease;}@keyframes floating_fixed_income { 0% { transform: translate(0%,0%); } 12.5% { transform: translate(-2%,1%); } 25% { transform: translate(-4%,2%); } 50% { transform: translate(-2%,3%); } 62.5% { transform: translate(0%,2%); } 75% { transform: translate(1%,1%); } 100% { transform: translate(2%,0%); }}.sectors-icon-container.fixed_income { animation-name: floating_fixed_income; animation-duration: 5s; height: 112px; background-size: 112%; width: 112px; margin-left: 73%; margin-top: -11%;}.解决方法
. 我认为这是一个错误.虽然不是很整洁,但我的建议是暂时使用一个绝对定位元素的动画.你可以将你的扇区图标定位在你想要的位置,给它相对定位,然后将悬停动画添加到它的子img中,绝对定位：
@keyframes floating_fixed_income { 0% { top: 0; } 12.5% { top: 20px; } 25% { top: 10px; } 50% { top: 100px; } 62.5% { top: 50px; } 75% { top: 20px; } 100% { top: 0; }} https://plnkr.co/edit/YHIeL9vO2nQpTaoBpup3?p=preview
. . .. ...