6
कोई विचार क्यों यह क्रोम में काम करता है लेकिन सफारी नहीं?सीएसएस चमक एनीमेशन कीफ्रेम क्रोम पर काम करते हैं लेकिन आईओएस सफारी नहीं
सीएसएस:
@-webkit-keyframes glow {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.glow:after {
-webkit-animation-name: glow;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
background: rgba(255,255,255,0.5);
border: 1px solid rgba(255,255,255,0.5);
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
content: "";
border-radius: 3px;
opacity: 0;
}
#btn {
background: red;
text-align: center;
font-size: 100px;
color: white;
line-height: 100px;
}
HTML:
<div id="btn" class="glow">
Start
</div>
उत्तर के लिए धन्यवाद, लेकिन की बात ': after' छद्म तत्व एक सफेद 'मुखौटा' जोड़ने के लिए इतनी चमक किसी भी रंग पर काम होता था। इसके साथ, मेरे पूरे तत्व की अस्पष्टता कम हो गई है जिससे यह चमकने की बजाय अधिक सुस्त दिखती है। क्या बटन के सामने कोई तत्व जोड़ने के बिना मुझे सफेद मास्क के रूप में ऐसा करने का कोई तरीका है? – Garrett
@ गेटेट मैंने अभी अपना बेवकूफ़ अपडेट किया है, हो सकता है कि आप ऐसा कुछ कर रहे हों: http://jsfiddle.net/tTxMV/4। एचटीएमएल पर कोई अतिरिक्त तत्व नहीं, लेकिन सीएसएस पर थोड़ा और काम। अतिरिक्त मार्कअप जोड़ने के बिना, मुझे लगता है कि यह प्राप्त करने का यह सबसे आसान तरीका होगा और आपके कोड को कुछ पुन: प्रयोज्य रहने दें, बिल्कुल छद्म-तत्वों का उपयोग करने की तरह नहीं। कभी-कभी हमें ब्राउज़र जीतने के लिए मजबूर होना पड़ता है: '( – pzin
मुझे लगता है कि यह सफारी बग के साथ जितना करीब है। धन्यवाद! – Garrett