communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > Tutoriel H5 > Code d'effets spéciaux d'animation de compte à rebours de la barre de progression HTML5 CSS3 [recommandé] Compétences du didacticiel _html5

Code d'effets spéciaux d'animation de compte à rebours de la barre de progression HTML5 CSS3 [recommandé] Compétences du didacticiel _html5

WBOY
Libérer： 2016-05-16 15:45:36
original
2239 Les gens l'ont consulté

Effet spécial d'animation de compte à rebours de la barre de progression html5 css3. J'ai accidentellement découvert ce travail alors que je cherchais des ressources réseau sur Internet aujourd'hui. Voyant que l'effet est très bon et très pratique, je l'ai trié et partagé avec tout le monde. Il est principalement utilisé. Les technologies HTML5, JavaScript et CSS3 sont utilisées, ainsi que SVG, cercle et texte. . .

Le code de base est le suivant


Copier le code
Le code est le suivant :

fonction alertSet(e) {
document.getElementById("js-alert-box").style.display = "block",
document.getElementById("js-alert-head").innerHTML = e;
var t = 10,
n = document.getElementById("js-sec-circle");
document.getElementById("js-sec-text").innerHTML = t,
setInterval(function() {
if (0 == t){
location.href="http://www.jb51.net"
}else {
t -= 1,
document.getElementById( "js- sec-text").innerHTML = t;
var e = Math.round(t / 10 * 735);
n.style.StrokeDashoffset = e - 735
}
} ,
970)

L'effet est le suivant :

Le code d'effets spéciaux d'animation de compte à rebours de la barre de progression HTML5 css3 ci-dessus [recommandé] est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence et j'espère que vous soutiendrez Script Home.

Étiquettes associées：
css3 html5 倒计时 进度条
source：php.cn
Article précédent：Super stratégie pour dessiner des rectangles à l'aide des conseils du didacticiel HTML5 Canvas API_html5 Article suivant：Comment utiliser les compétences du didacticiel HTML5 canvas_html5
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Comment faire apparaître mon image sur l'écran principal de la page ? Ce que je veux faire, c'est recevoir des photos en utilisant NASAAPI. Ces photos sont ensu...
Depuis 2024-04-06 15:33:12
0
1
433
Les fichiers PDF peuvent-ils exécuter HTML5 et Javascript ? J'ai une idée stupide d'essayer de créer un programme qui ne sera bloqué sur aucun ordinat...
Depuis 2024-04-05 12:57:00
0
1
456
Quelle est la différence entre enctype et formenctype en HTML5 ? Je me demande simplement quelle est la différence entre les attributs enctype et formencty...
Depuis 2024-04-02 11:47:56
0
1
275
Rendre la page adaptée aux mobiles ? J'ai de nombreuses pages Web et quelques sites Web. Le fait est que je suis débutant. J'ut...
Depuis 2024-04-01 20:42:38
0
1
259
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal