Teilen Sie ein einfaches Beispiel, wie man mit CSS3 eine kleine Uhr erstellt-CSS-Tutorial-php.cn

Teilen Sie ein einfaches Beispiel, wie man mit CSS3 eine kleine Uhr erstellt

黄舟

Freigeben： 2017-09-01 15:15:47

Original

1393 Leute haben es durchsucht

Teilen Sie ein einfaches Beispiel für die Herstellung einer kleinen Uhr mit 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>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonTeilen Sie ein einfaches Beispiel, wie man mit CSS3 eine kleine Uhr erstellt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!