Maison > Article > interface Web > css3+html5——horloge oscillante

css3+html5——horloge oscillante

jackloveoriginal: 2018-06-11 23:42:152202parcourir

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!

Déclaration：

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

Article précédent：Comment faire une transformation 2D via CSS3Article suivant：Comment faire une transformation 2D via CSS3

Articles Liés

Voir plus