CSS3를 사용하여 작은 시계를 만드는 방법에 대한 간단한 예 공유-CSS 튜토리얼-php.cn

CSS3를 사용하여 작은 시계를 만드는 방법에 대한 간단한 예 공유

黄舟

풀어 주다： 2017-09-01 15:15:47

원래의

1394명이 탐색했습니다.

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>

로그인 후 복사

로 작은 시계를 만드는 방법에 대한 간단한 예 공유