एचटीएमएल 5

के साथ चमकदार प्रभाव कैसे बनाएं स्टैक्स नई प्रलेखन साइट पर दिखाई देने वाले छोटे नीले बिंदु को लागू करने में मदद की तलाश में, यह एक डैशबोर्ड एनिमेट करने के लिए एकदम सही है जो मैं सेवा कर रहा हूं जो सेवा स्वास्थ्य/मीट्रिक दिखाता है। मैं Chrome की निरीक्षक का उपयोग कर HTML/CSS पकड़ा है, लेकिन मैं इस चीज पर भयानक रहा हूँ, मैं भी एक बिंदु, बहुत कम एक नीले रंग की एक है कि ;-Dएचटीएमएल 5

https://jsfiddle.net/raffinyc/3trup2c1/

.help-bubble:after { 
    content: ""; 
    background-color: #3af; 
    width: 12px; 
    height: 12px; 
    border-radius: 50%; 
    position: absolute; 
    display: block; 
    top: 1px; 
    left: 1px; 
} 
<span class="help-bubble-outer-dot"> 
     <span class="help-bubble-inner-dot"></span> 
</span>

चमकता नहीं मिल सकता

स्रोत

2016-07-23 raffian

आप इसे देख सकते हैं: https://codepen.io/nickpettit/pen/vacDI – Meinkraft

यह बिल्कुल सही है, जो मैं खोज रहा हूं, thx – raffian

यहां एक और उदाहरण http://jsfiddle.net/dH6LS/ 1667/अगर आपको और मदद की ज़रूरत है, तो मैं आपकी मदद कर सकता हूं। –

Here's the full reproduction। एनीमेशन स्यूडोलेमेंट्स का उदार उपयोग करता है। सीएसएस:

.help-bubble .help-bubble-outer-dot { 
    margin: 1px; 
    display: block; 
    text-align: center; 
    opacity: 1; 
    background-color: rgba(0,149,255,0.4); 
    width: 12px; 
    height: 12px; 
    border-radius: 50%; 
    animation: help-bubble-pulse 1.5s linear infinite; 
} 

.help-bubble { 
    display: block; 
    position: absolute; 
    z-index: 2; 
    cursor: pointer; 
    left: 40px; 
    top: 40px; 
} 

.help-bubble::after { 
    content: ""; 
    background-color: #3af; 
    width: 12px; 
    height: 12px; 
    border-radius: 50%; 
    position: absolute; 
    display: block; 
    top: 1px; 
    left: 1px; 
} 

.help-bubble .help-bubble-inner-dot { 
    background-position: absolute; 
    display: block; 
    text-align: center; 
    opacity: 1; 
    background-color: rgba(0,149,255,0.4); 
    width: 12px; 
    height: 12px; 
    border-radius: 50%; 
    -webkit-animation: help-bubble-pulse 1.5s linear infinite; 
    -moz-animation: help-bubble-pulse 1.5s linear infinite; 
    -o-animation: help-bubble-pulse 1.5s linear infinite; 
    animation: help-bubble-pulse 1.5s linear infinite; 
} 

.help-bubble .help-bubble-inner-dot:after { 
    content: ""; 
    background-position: absolute; 
    display: block; 
    text-align: center; 
    opacity: 1; 
    background-color: rgba(0,149,255,0.4); 
    width: 12px; 
    height: 12px; 
    border-radius: 50%; 
    -webkit-animation: help-bubble-pulse 1.5s linear infinite; 
    -moz-animation: help-bubble-pulse 1.5s linear infinite; 
    -o-animation: help-bubble-pulse 1.5s linear infinite; 
    animation: help-bubble-pulse 1.5s linear infinite; 
} 

@keyframes help-bubble-pulse{ 
    0% { 
    transform: scale(1); 
    opacity: .75; 
    } 
    25% { 
    transform:scale(1); 
    opacity:.75; 
    } 
    100% { 
    transform:scale(2.5); 
    opacity:0 
    } 
}

रिकॉर्ड के लिए, मैं बहुत अच्छी तरह से कोड बौद्धिक संपदा में नहीं वाकिफ रहा हूँ, लेकिन यह संभव नहीं दिखता आप अधिकार किसी भी तरह यह अपने खुद के बनाने के बिना वास्तव में इस का उपयोग करना पड़ता है।

स्रोत

2016-07-23 02:09:28 Harangue

पैसे पर, बहुत अच्छा, और रिकॉर्ड के लिए, इस कोड का उपयोग करने का कोई इरादा नहीं जैसा है; सिर्फ यह देखना चाहता था कि इसे कैसे कार्यान्वित किया गया था, कोड नमूना सभी शोर में कटौती करता है और तकनीक को मेरे लिए सीखना बहुत आसान बनाता है, यह वास्तव में मेरा लक्ष्य था। – raffian

मैं इसे एक अवधि के साथ कैसे रेखांकित कर सकता हूं? https://jsfiddle.net/3trup2c1/7/ –

@ZiedRebhi ' .help-bubble { डिस्प्ले: इनलाइन-ब्लॉक; जेड-इंडेक्स: 2; कर्सर: सूचक; स्थिति: रिश्तेदार; } ' – Harangue

box-shadow का प्रयास करें:

-webkit-box-shadow: 0px 0px 20px 0px rgba(0,225,255,1); 
-moz-box-shadow: 0px 0px 20px 0px rgba(0,225,255,1); 
box-shadow: 0px 0px 20px 0px rgba(0,225,255,1);

वाक्य रचना है:

0px (horizontal offset) 0px (vertical offset) 20px (bur value) 0px (spread value) rgba (color value)

अधिक जानकारी के लिए यहाँ देखें:

https://css-tricks.com/snippets/css/css-box-shadow/

स्रोत

2016-07-23 02:01:37 Toby

बिल्कुल नहीं, केवल छाया दिखाई देता है, मैं चमकती प्रभाव की तलाश में हूं, इसे देखें: http://stackoverflow.com/documentation – raffian

एचटीएमएल 5

उत्तर

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