Dégradé de texte de la barre de progression CSS en fonction de la progression-tutoriel CSS-php.cn

Dégradé de texte de la barre de progression CSS en fonction de la progression

php中世界最好的语言

Libérer： 2018-03-20 14:26:04

original

2830 Les gens l'ont consulté

Cette fois je vous apporte le barre de progression texte de css qui change progressivement en fonction de la progression Quelles sont les précautions du texte de la barre de progression css qui change en fonction de la progression. ? Voici les cas pratiques, regardons ensemble Jetez un oeil.

Cet article présente l'exemple de code pour le texte de la barre de progression CSS à modifier en fonction de la progression et le partage avec tout le monde. Les détails sont les suivants :

Exigences<.>

1. Progression Le texte dans la barre doit changer en fonction de la durée de la progression

Principe

Utilisez deux p du même style pour chevauchement

Effet

La police commence en bleu et passe au blanc en suivant la barre de progression

Code

<!DOCTYPE html>
<html lang="cmn-hans">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <script>!function(e,t){function n(){t.body?t.body.style.fontSize=12*o+"px":t.addEventListener("DOMContentLoaded",n)}function d(){var e=i.clientWidth/10;i.style.fontSize=e+"px"}var i=t.documentElement,o=e.devicePixelRatio||1;if(n(),d(),e.addEventListener("resize",d),e.addEventListener("pageshow",function(e){e.persisted&&d()}),o>=2){var a=t.createElement("body"),s=t.createElement("p");s.style.border=".5px solid transparent",a.appendChild(s),i.appendChild(a),1===s.offsetHeight&&i.classList.add("hairlines"),i.removeChild(a)}}(window,document);</script>
    <title>进度条渐变</title>
    <style type="text/css">
        * {
            box-sizing: border-box;
        }
        .box{
            position: fixed;
            left: 50%;
            transform: translate(-50%);
            width: 320px;
            height: 44px;
            background-color: white;
            color: #00a0e9;
            border: 1px solid #00a0e9;
        }
        .process{
            position: absolute;
            height: 100%;
            width: 0;
            background: #00a0e9;
            color: white;
            overflow: hidden;
            z-index: 10;
        }
        .process-text{
            position: absolute;
            left: 160px;
            top: 50%;
            font-size: 12px;
            transform: translate(-50%, -50%);
            white-space: nowrap;
        }
    </style>
    <script>
        function process() {
            var t = 1;
            var max = 320;
            var progress = document.getElementById("process");
            var process_texts = document.getElementsByClassName("process-text");
            var interval = setInterval(function () {
                if (t == max) {
                    clearInterval(interval);
                    for (var i in process_texts){
                        process_texts[i].innerHTML = '完成'
                    }
                } else {
                    progress.style.width = t + "px";
                    for (var i in process_texts){
                        process_texts[i].innerHTML = '进度' + (t / max * 100).toFixed(2) + "%"
                    }
                    t++;
                }
            }, 10)
        }
    </script>
</head>
<body>
<p class="box" onclick="process()">
    <p class="process" id="process">
        <span class="process-text">点击开始</span>
    </p>
    <span class="process-text">点击开始</span>
</p>
</body>
</html>

Copier après la connexion

Je crois que vous avez lu cet article. Vous maîtrisez la méthode des cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser CSS pour définir et enregistrer les mots de passe des utilisateurs

Comment utiliser le redessin et la redistribution

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!