使用CSS转换时,我该怎么做才能避免图像模糊/闪烁问题？我尝试过CSS转换效果的一堆建议让图像模糊/移动图像1px,在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, 28, 33, 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%;
}
我认为这是一个错误。虽然不是那么简洁，但我的建议是暂时对绝对定位的元素进行动画处理。您可以将其放置sectors-icon在您想要的位置，为其定位，然后通过定位relative将悬停动画添加到其子级：imgabsolute
@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
| 归档时间： |
|
| 查看次数： |
374 次 |
| 最近记录： |