एसवीजी छवि सीएसएस ट्रांसफॉर्म का उपयोग करते समय धुंधला और झिलमिलाहट हो जाती है

सीएसएस ट्रांसफॉर्म का उपयोग करते समय छवि धुंधला/झिलमिलाहट समस्या से बचने के लिए मैं क्या कर सकता हूं? मैंने CSS transition effect makes image blurry/moves image 1px, in Chrome? से सुझावों का एक समूह आजमाया है, लेकिन इसे समझने के लिए प्रतीत नहीं होता है।एसवीजी छवि सीएसएस ट्रांसफॉर्म का उपयोग करते समय धुंधला और झिलमिलाहट हो जाती है

मैंने नीचे प्लंकर कोड संलग्न किया है।

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%; 
}

स्रोत

2017-01-18 Cookies

मैं एक ही समस्या – georgej

मुझे लगता है कि यह एक बग है। साफ नहीं है लेकिन मेरी सिफारिश सिर्फ अभी के लिए एक बिल्कुल तैनात तत्व एनिमेट करने के साथ जाना है। आप अपने sectors-icon आप जहां चाहें रख सकते हैं, यह relative स्थिति देना और फिर absolute स्थिति के साथ यह बच्चे 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

स्रोत

2017-01-19 02:36:02

एसवीजी छवि सीएसएस ट्रांसफॉर्म का उपयोग करते समय धुंधला और झिलमिलाहट हो जाती है

उत्तर

संबंधित मुद्दे