css3+html5——horloge oscillante-tutoriel CSS-php.cn

css3+html5——horloge oscillante

jacklove

Libérer： 2018-06-11 23:42:15

original

2217 Les gens l'ont consulté

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>

Copier après la connexion

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!