Utilisez HTML5 pour créer un effet d'animation d'horloge-Tutoriel H5-php.cn

Utilisez HTML5 pour créer un effet d'animation d'horloge

王林

Libérer： 2021-01-05 10:37:25

avant

3582 Les gens l'ont consulté

Utilisez HTML5 pour créer un effet d'animation d'horloge

Jetons d'abord un coup d'œil aux rendus (quelle que soit la correspondance des couleurs) :

(Partage vidéo d'apprentissage : Tutoriel vidéo html5)

Utilisez HTML5 pour créer un effet danimation dhorloge

Il faut d'abord comprendre comment mettre en œuvre cette horloge. Ne pensez pas à l'animation pour le moment, apprenez à démonter le problème et à le mettre en œuvre étape par étape.

Nous devons d'abord dessiner un carré avec une bordure, lui donner un coin arrondi pour obtenir l'anneau le plus extérieur, puis faire pivoter un long rectangle plusieurs fois pour obtenir l'échelle

Utilisez HTML5 pour créer un effet danimation dhorloge

Dessinez simplement un autre cercle blanc pour le recouvrir afin d'obtenir l'échelle standard

Utilisez HTML5 pour créer un effet danimation dhorloge

Ajoutez enfin trois rectangles et le petit cercle au milieu L'état initial de l'horloge peut être réalisé

Implémentation du code

Après avoir compris le processus ci-dessus, l'implémentation du code sera beaucoup plus simple. La seule chose à prendre en compte est l'optimisation du code. simplicité et clarté. Comment mettre en œuvre la première étape, il y a beaucoup de code répété.

Concernant l'animation, il suffit de régler l'animation de rotation. L'animation des aiguilles des heures, des minutes et des secondes n'a besoin que de changer d'heures différentes.

Veuillez consulter le code pour plus de détails :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>时钟</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .clock{
            width: 300px;
            height: 300px;
            border: 10px solid #ccc;
            /*百分比参照的是实际宽高*/
            border-radius: 50%;
            margin: 20px auto;
            position: relative;
        }
        .line{
            width: 8px;
            height: 300px;
            background-color: #ccc;
            position: absolute;
 
            /*实现居中*/
            /*参照父元素的宽*/
            left: 50%;
            top: 0;
            /*参照元素本身*/
            transform: translate(-50%,0);
 
            /*保留，否则会被覆盖*/
 
 
        }
        .line2{
            transform: translate(-50%,0) rotate(30deg);
        }
        .line3{
            transform: translate(-50%,0) rotate(60deg);
        }
        .line4{
            transform: translate(-50%,0) rotate(90deg);
        }
        .line5{
            transform: translate(-50%,0) rotate(120deg);
        }
        .line6{
            transform: translate(-50%,0) rotate(150deg);
        }
 
        .cover{
            width: 250px;
            height: 250px;
            border-radius: 50%;
            background-color: #fff;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
        .hour{
            width: 6px;
            height: 80px;
            background-color: red;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-100%);
 
            /*设置轴心*/
            transform-origin: center bottom;
            /*动画*/
            -webkit-animation: move 43200s linear infinite;
 
        }
        .minute{
            width: 4px;
            height: 90px;
            background-color: green;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-100%);
 
            /*设置轴心*/
            transform-origin: center bottom;
            /*动画*/
            -webkit-animation: move 3600s linear infinite;
 
 
        }
        .second{
            width: 2px;
            height: 100px;
            background-color: blue;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-100%);
 
            /*设置轴心*/
            transform-origin: center bottom;
            /*动画*/
            -webkit-animation: move 60s infinite steps(60);
            /*linear与step(60)重复*/
 
        }
        .center{
            width:20px;
            height:20px;
            background-color: #ccc;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
 
        }
 
        /*创建移动动画*/
        @keyframes move{
            0%{
                transform: translate(-50%,-100%) rotate(0deg);
            }
            100%{
                transform: translate(-50%,-100%) rotate(360deg);
            }
 
        }
    </style>
</head>
<body>
<div>
    <div class="line line1"></div>
    <div class="line line2"></div>
    <div class="line line3"></div>
    <div class="line line4"></div>
    <div class="line line5"></div>
    <div class="line line6"></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
</body>
</html>

Copier après la connexion

Recommandations associées : Tutoriel HTML5

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!