Maison > Article > interface Web > css3+html5——horloge oscillante
css3+html5——horloge oscillante
- jackloveoriginal
- 2018-06-11 23:42:152160parcourir
Tout d'abord, je vous fournis deux photos d'horloges et d'aiguilles : (Vous devez ajuster vous-même la taille spécifique)
Puis le rendu :
Le code est le suivant :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>摆动的钟表</title>
<style type="text/css">
body{
margin: 0;
background: #111;
text-align: center;
}
h1{
font-size: 14px;
font-family: "Microsoft YaHei UI";
text-align: center;
}
.stage{
width: 120px;
height:auto;
margin: 0 auto;
position: relative;
-webkit-transform-origin: center top;
-webkit-transform: rotate(-30deg);
-webkit-animation: sway 2.2s infinite alternate ease-in-out;/*alternate:反向*/
}
.watch{
width: 100%;
height: auto;
}
.seconds{
position: absolute;
width: 8%;
height:auto;
bottom:11%;
left:45.5%;
-webkit-transform-origin: center 68%;
-webkit-animation: second 60s infinite linear;/*infinite:无限循环*/
}
@-webkit-keyframes second {
to{
-webkit-transform: rotate(355deg);
}
}
@-webkit-keyframes sway {
to{
-webkit-transform: rotate(30deg);
}
}
</style>
</head>
<body>
<p class="stage">
<p class="watch"><img src="../img/clock.png" alt="" width="120" height="410"></p>
<p class="seconds"><img src="../img/secondHand.png" alt="" width="10" height="55"></p>
</p>
</body>
</html>Cet article explique comment utiliser css3+html5 pour créer une horloge oscillante Pour plus de contenu connexe, veuillez visiter le site Web chinois Follow php.
Recommandations associées :
Classe de pagination PHP+MySQL simple
Deux constructeurs de tableaux arborescents sans récursion
HTML vers Excel, et réaliser des fonctions d'impression et de téléchargement
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!