communauté Apprendre Bibliothèque d'outils Loisirs

Français

Maison > interface Web > tutoriel CSS > Partager un exemple simple de comment créer une petite horloge avec CSS3

Partager un exemple simple de comment créer une petite horloge avec CSS3

黄舟

Libérer： 2017-09-01 15:15:47

original

1440 Les gens l'ont consulté

Partage d'un exemple simple de la façon de créer une petite horloge avec CSS3

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{
      padding:0;
      margin:0;
    }
    #hd{
      width:700px;
      height:700px;
      background: url("zhong2.jpg") no-repeat;
      -webkit-background-size: 100% 100%;
      background-size: 100% 100%;
      /*设置模糊背景*/
      box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
      /*box-shadow: 10px 10px 10px black;*/
      position: relative;
      margin:0  auto;
      border-radius: 50%;
    }
    #hd img{
      width:35px;
      position: absolute;
      left:335px;
      top:113px;
      animation: run 60s linear infinite;
      /*设置旋转基准点*/
      transform-origin: 50% 67%;
      }
    @keyframes run {
      from{
        transform: rotate(0deg);
      }
      to{
        transform: rotate(360deg);
      }    
      }  
      </style>
      </head>
      <body>
      <div id="hd">  
      <img src="zhizhen3.jpg" alt="">
      </div>
      </body>
      </html>

Copier après la connexion

Partager un exemple simple de comment créer une petite horloge avec CSS3

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!

Étiquettes associées：

css css3

source：php.cn

Article précédent：Explication détaillée de l'exemple de comment afficher les boutons en dehors du DIV après que la souris CSS survole le DIV Article suivant：Explication détaillée du problème d'affichage des boutons en dehors du DIV après que la souris CSS survole le DIV

Déclaration de ce site Web

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

Derniers articles par auteur