जैसे प्रगति पट्टी में अंतहीन रूप से कुछ ढाल कदम उठाएं मुझे आश्चर्य है कि क्या केवल CSS3 सुविधाओं का उपयोग करके बाएं से दाएं अंत तक एक div के अंदर ढाल को स्थानांतरित करना संभव है? सभी ब्राउज़रों का समर्थन करने की कोई आवश्यकता नहीं है, मैं बस प्रयोग करना चाहता हूं। उदाहरण यह है कि नीली प्रगति पट्टी के शीर्ष पर चमकदार प्रभाव। एक उदाहरण की सराहना की है।विंडोज 7
इस सीएसएस आप एक ढाल चाल बेहद दे सकते हैं का उपयोग करना (माइकल टिप्पणी में link के आधार पर):
.bar {
background: -webkit-linear-gradient(left , #0193CD 30%, #66D4E5 80%, #0193CD 100%) repeat;
-webkit-background-size: 50% 100%;
-webkit-animation-name: moving-gradient;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
@-webkit-keyframes moving-gradient {
0% {
background-position: left bottom;
}
100% {
background-position: right bottom;
}
}
डेमो:http://jsfiddle.net/jhogervorst/X78qN/2/
WebKit में यह केवल काम करता है आधारित ब्राउज़र (उदाहरण के लिए, सफारी और क्रोम)। इसे अन्य ब्राउज़रों में भी काम करने के लिए, Michael's link देखें और कुछ और सीएसएस कॉपी करें।
संपादित करें: मुझे इसे सही बनाना था। CSS3 में लगभग पूर्ण विंडोज प्रगति पट्टी के लिए नया डेमो देखें :)
http: // www। useragentman.com/blog/2012/01/03/cross-browser-html5-progress-bars-in-depth/ – Pentium10
यह पोस्ट आपको कुछ प्रेरणा दे सकता है http://www.alldesignstuffs.com/2011/creating-css3-animation-using-css3-gradient- और-पृष्ठभूमि-क्लिपटेक्स्ट/ –
मुझे लगता है कि यह आपके प्रश्न का उत्तर भी है: http://stackoverflow.com/questions/25554852/moving-gradient-bar-in-css/25554853#25554853 –