參見 https://codepen.io/i18n-site/pen/WNqWevp
p input#rangeInput(type="range", min="0", max="100", value="50") progress#progressBar(value="50", max="100") p progress(max="100", value="10") progress(max="100", value="40") progress(max="100", value="80") progress(max="100", value="100")
progress[value], progress[value]::-webkit-progress-bar { border-radius: 10px; box-shadow: 0 0 3px inset #ccc; background-size: 400% 400%; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="a" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="%23fff"/><stop offset="50%" stop-color="%23eee"/><stop offset="100%" stop-color="%23fff"/><animateTransform attributeName="gradientTransform" type="translate" from="-1 0" to="1 0" dur="2s" repeatCount="indefinite" additive="sum"/></linearGradient></defs><rect width="100%" height="100%" fill="url(%23a)"/></svg>'); } progress[value] { width: 200px; border: 2px solid #eee; -webkit-appearance: none; -moz-appearance: none; appearance: none; overflow: hidden; height: 20px; --pbarbg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="20" preserveAspectRatio="xMidYMid"><defs><pattern id="a" patternUnits="userSpaceOnUse" width="100" height="100"><g transform="translate(7.8)"><path fill="%23ddd" d="M-40-10h10v120h-10z" transform="rotate(20 50 50) scale(1.2)"/><path fill="%23eee" d="M-30-10h10v120h-10z" transform="rotate(20 50 50) scale(1.2)"/><path fill="%23ddd" d="M-20-10h10v120h-10z" transform="rotate(20 50 50) scale(1.2)"/><path fill="%23eee" d="M-10-10H0v120h-10z" transform="rotate(20 50 50) scale(1.2)"/><path fill="%23ddd" d="M0-10h10v120H0z" transform="rotate(20 50 50) scale(1.2)"/><path fill="%23eee" d="M10-10h10v120H10z" transform="rotate(20 50 50) scale(1.2)"/><path fill="%23ddd" d="M20-10h10v120H20z" transform="rotate(20 50 50) scale(1.2)"/><animateTransform attributeName="transform" type="translate" values="0 0;26 0" keyTimes="0;1" repeatCount="indefinite" dur="2s"/></g></pattern></defs><path fill="url(%23a)" d="M0 0h26v20H0z"/></svg>'); } progress[value]::-webkit-progress-value { box-shadow: 0 0 3px inset #999; border-radius: 10px; background: var(--pbarbg); transition: all 0.5s; } progress::-moz-progress-bar { box-shadow: 0 0 3px inset #999; border-radius: 10px; background: var(--pbarbg); transition: all 0.5s; }
以上是單一進度使用純css實現動畫效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!