css3如何制作小时钟的简单实例分享

黄舟

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

asal

1440 orang telah melayarinya

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>

Salin selepas log masuk

Atas ialah kandungan terperinci css3如何制作小时钟的简单实例分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：

css css3

sumber：php.cn

Artikel sebelumnya：关于CSS鼠标悬浮DIV后如何显示DIV外的按钮的示例详解 Artikel seterusnya：CSS鼠标悬浮DIV后显示DIV外的按钮问题详解

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang