interface Web
tutoriel CSS
Comment dessiner une horloge dynamique circulaire en utilisant CSS3 (explication détaillée)
Comment dessiner une horloge dynamique circulaire en utilisant CSS3 (explication détaillée)
Dans cette époque où le temps c'est de l'argent, les gens deviennent de plus en plus conscients du temps, non seulement dans la vie quotidienne, mais aussi surtout lorsqu'ils surfent sur Internet. Ainsi, lors du développement du front-end, apprendre à utiliser le CSS3 pour créer une horloge. c'est suffisant Cela semble nécessaire. Le contenu que cet article vous apporte porte sur ce sujet et a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.
Le principe de l'utilisation de CSS3 pour dessiner une horloge dynamique circulaire
Comme nous le savons tous, le La forme div est un carré, nous devons alors d'abord utiliser la propriété border-radius pour la transformer en cercle.
Afin de faire pivoter le pointeur, nous devons utiliser -webkit-transform-origin:center 100px pour définir notre point de base de rotation. Utilisez ensuite -webkit-transform: rotate(0); pour laisser notre li faire pivoter l'angle correspondant pour former l'échelle correspondante.
Après avoir conçu l'échelle, vous devez impliquer un sélecteur nth-of-type() pour spécifier à quel élément enfant il appartient à l'élément parent.
Au centre même de l'horloge circulaire, nous devons définir une icône div pour le point de connexion du pointeur.
Ensuite, nous utilisons js pour obtenir le div et restituer l'échelle du cadran.
Enfin, démarrez une minuterie et exécutez la fonction toutes les secondes.
Code pour dessiner une horloge dynamique circulaire en utilisant CSS3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>钟表</title>
<style id="css">
#wrap{width:200px; height:200px; border:2px solid #000; margin:100px auto;border-radius:50%; position:relative;}
#wrap ul{margin:0; padding:0; height:200px; position:relative; list-style:none;}
#wrap ul li{width:2px; height:6px; background:#000; position:absolute; left:99px; top: 0;-webkit-transform-origin:center 100px;}
/*#wrap ul li:nth-of-type(1){-webkit-transform: rotate(0);}
#wrap ul li:nth-of-type(2){-webkit-transform: rotate(6deg);}
#wrap ul li:nth-of-type(3){-webkit-transform: rotate(12deg);}
#wrap ul li:nth-of-type(4){-webkit-transform: rotate(18deg);}
#wrap ul li:nth-of-type(5){-webkit-transform: rotate(24deg);}
#wrap ul li:nth-of-type(6){-webkit-transform: rotate(30deg);}
#wrap ul li:nth-of-type(7){-webkit-transform: rotate(36deg);}
#wrap ul li:nth-of-type(8){-webkit-transform: rotate(42deg);}*/
#wrap ul li:nth-of-type(5n+1){ height:12px;}
#hour{width:6px; height:45px; background:#000; position:absolute; left:97px; top:55px;-webkit-transform-origin:bottom ;}
#min{width:4px; height:65px; background:#999; position:absolute; left:98px; top:35px;-webkit-transform-origin:bottom ;}
#sec{width:2px; height:80px; background:red; position:absolute; left:99px; top:20px;-webkit-transform-origin:bottom ;}
.icon{width:20px; height:20px; background:#000; border-radius:50%; position:absolute; left:90px; top: 90px;}
</style>
</head>
<body>
<div id="wrap">
<ul id="list">
<!--<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>-->
</ul>
<div id="hour"></div>
<div id="min"></div>
<div id="sec"></div>
<div></div>
</div>
<script>
var oList=document.getElementById("list");//获取到刻度
var oCss=document.getElementById("css");
var oHour=document.getElementById("hour");//获取时针
var oMin=document.getElementById("min");//获取分针
var oSec=document.getElementById("sec");//获取秒针
var oLi="";
var sCss="";
for (var i=0;i<60;i++) { //一个表盘总共是60个刻度
sCss+="#wrap ul li:nth-of-type("+(i+1)+"){-webkit-transform: rotate("+i*6+"deg);}";
oLi+="<li></li>";
};
oList.innerHTML=oLi;
oCss.innerHTML+=sCss;//表盘刻度渲染完成
toTime();
setInterval(toTime,1000);
function toTime(){
var oDate=new Date();//获取当前时间
var iSec=oDate.getSeconds();//获取当前秒
var iMin=oDate.getMinutes()+iSec/60;//获取当前分
var iHour=oDate.getHours()+iMin/60;//获取当前时
oSec.style.WebkitTransform="rotate("+iSec*6+"deg)";//秒针转动角度1秒6度 (表盘一圈360度一圈60秒所以一秒6度)
oMin.style.WebkitTransform="rotate("+iMin*6+"deg)";//分钟转动角度1分6度 (表盘一圈360度一圈60分所以一分6度)
oHour.style.WebkitTransform="rotate("+iHour*30+"deg)";//时针转动角度一小时30度(表盘一圈360度一圈12小时所以一小时30度)
};
</script>
</body>
</html>Exemple l'effet est comme indiqué sur l'image
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
1675
14
1429
52
1333
25
1278
29
1257
24
Comment obtenir un effet de vague avec du CSS3 pur ? (exemple de code)
Jun 28, 2022 pm 01:39 PM
Comment obtenir un effet de vague avec du CSS3 pur ? Cet article vous présentera comment utiliser l'animation SVG et CSS pour créer des effets de vagues. J'espère que cela vous sera utile !
Comment utiliser plusieurs minuteries sur iPhone avec iOS 17
Jun 21, 2023 am 08:18 AM
Que sont les multi-minuteries sur iOS17 ? Dans iOS17, Apple offre désormais aux utilisateurs la possibilité de définir plusieurs minuteries à la fois sur leur iPhone. Il s’agit d’un changement bienvenu, que beaucoup attendaient depuis des années. L'application Clock, qui avant iOS 16 permettait uniquement aux utilisateurs de régler une minuterie à la fois, peut désormais être utilisée pour activer n'importe quel nombre de minuteries, ce qui la rend idéale pour effectuer plusieurs tâches à la fois. Vous pouvez définir n'importe quel nombre de minuteries dans l'écran des minuteries. Une fois le minuteur démarré, tous les minuteurs actifs apparaîtront sous forme de notifications « Activité en direct » sur l'écran de verrouillage et le centre de notifications. À partir de là, vous pouvez afficher le temps restant jusqu'à ce que la minuterie soit désactivée, mettre en pause ou arrêter la minuterie sans ouvrir l'application Horloge. quand tu es à l'heure
Application d'horloge manquante sur iPhone : comment y remédier
May 03, 2024 pm 09:19 PM
L'application horloge est-elle absente de votre téléphone ? La date et l'heure apparaîtront toujours sur la barre d'état de votre iPhone. Cependant, sans l'application Horloge, vous ne pourrez pas utiliser l'horloge mondiale, le chronomètre, le réveil et bien d'autres fonctionnalités. Par conséquent, réparer l’application d’horloge manquante devrait figurer en haut de votre liste de tâches. Ces solutions peuvent vous aider à résoudre ce problème. Correctif 1 – Placer l’application Horloge Si vous avez supprimé par erreur l’application Horloge de votre écran d’accueil, vous pouvez remettre l’application Horloge à sa place. Étape 1 – Déverrouillez votre iPhone et commencez à faire glisser votre doigt vers la gauche jusqu'à atteindre la page Bibliothèque d'applications. Étape 2 – Ensuite, recherchez « horloge » dans le champ de recherche. Étape 3 – Lorsque vous voyez « Horloge » ci-dessous dans les résultats de recherche, maintenez-la enfoncée et
iOS 17 : Comment changer le style d'horloge de l'iPhone en mode veille
Sep 10, 2023 pm 09:21 PM
La veille est un mode d'écran de verrouillage qui s'active lorsque l'iPhone est branché sur le chargeur et orienté en orientation horizontale (ou paysage). Il se compose de trois écrans différents, dont l'un affiche l'heure en plein écran. Lisez la suite pour savoir comment changer le style de votre horloge. Le troisième écran de StandBy affiche les heures et les dates dans différents thèmes que vous pouvez faire glisser verticalement. Certains thèmes affichent également des informations supplémentaires, comme la température ou la prochaine alarme. Si vous maintenez une horloge enfoncée, vous pouvez basculer entre différents thèmes, notamment numérique, analogique, mondial, solaire et flottant. Float affiche l'heure dans de grands nombres de bulles dans des couleurs personnalisables, Solar a une police plus standard avec un motif d'éruption solaire dans différentes couleurs et World affiche le monde en mettant en surbrillance
Utilisez habilement CSS pour réaliser divers boutons de forme étrange (avec code)
Jul 19, 2022 am 11:28 AM
Cet article va vous montrer comment utiliser CSS pour réaliser facilement divers boutons aux formes étranges qui apparaissent fréquemment. J'espère que cela vous sera utile !
![Comment désactiver les alarmes sur iPhone [2023]](https://img.php.cn/upload/article/000/465/014/169259550735100.png?x-oss-process=image/resize,m_fill,h_207,w_330)
Comment désactiver les alarmes sur iPhone [2023]
Aug 21, 2023 pm 01:25 PM
Depuis l’avènement des smartphones, ils ont sans doute remplacé les réveils. Si vous possédez un iPhone, vous pouvez utiliser l'application Horloge pour définir facilement autant d'alarmes à plusieurs reprises tout au long de la journée. L'application vous permet de configurer l'heure de l'alarme, la tonalité, la fréquence de répétition et si vous souhaitez les retarder à l'aide de l'option Snooze. Si vous souhaitez désactiver l'alarme que vous avez définie, l'article suivant devrait vous aider à désactiver et supprimer les alarmes régulières et les alarmes de réveil sur votre iPhone. Comment désactiver une alarme régulière sur iPhone Par défaut, lorsque vous ajoutez une alarme sur l'application Horloge ou demandez à Siri d'ajouter une alarme pour vous, vous créez en fait une alarme normale. Vous pouvez créer autant de réveils sur votre iPhone que vous le souhaitez et les mettre
Comment masquer des éléments en CSS sans prendre de place
Jun 01, 2022 pm 07:15 PM
Deux méthodes : 1. À l'aide de l'attribut display, ajoutez simplement le style "display:none;" à l'élément. 2. Utilisez les attributs position et top pour définir le positionnement absolu de l'élément afin de masquer l'élément. Ajoutez simplement le style "position:absolute;top:-9999px;" à l'élément.
Il s'avère que le carrousel de texte et le carrousel d'images peuvent également être réalisés en utilisant du CSS pur !
Jun 10, 2022 pm 01:00 PM
Comment créer un carrousel de texte et un carrousel d'images ? La première chose à laquelle tout le monde pense est de savoir s'il faut utiliser js. En fait, le carrousel de texte et le carrousel d'images peuvent également être réalisés en utilisant du CSS pur. Jetons un coup d'œil à la méthode d'implémentation.
