首頁 > web前端 > css教學 > 主體

css3+html5-擺動的鐘錶

jacklove
發布: 2018-06-11 23:42:15
原創
2197 人瀏覽過

先提供大家兩張鐘錶和指標的圖:(具體大小需要自己下去調)

            

然後是效果圖:


#然後是效果圖:

#程式碼如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>摆动的钟表</title>
    <style type="text/css">
        body{
            margin: 0;
            background: #111;
            text-align: center;
        }
        h1{
            font-size: 14px;
            font-family: "Microsoft YaHei UI";
            text-align: center;
        }
        .stage{
            width: 120px;
            height:auto;
            margin: 0 auto;
            position: relative;
            -webkit-transform-origin: center top;
            -webkit-transform: rotate(-30deg);
            -webkit-animation: sway 2.2s infinite alternate ease-in-out;/*alternate:反向*/
        }
        .watch{
            width: 100%;
            height: auto;
        }
        .seconds{
            position: absolute;
            width: 8%;
            height:auto;
            bottom:11%;
            left:45.5%;
            -webkit-transform-origin: center 68%;
            -webkit-animation: second 60s infinite linear;/*infinite:无限循环*/
        }
        @-webkit-keyframes second {
            to{
                -webkit-transform: rotate(355deg);
            }
        }
        @-webkit-keyframes sway {
            to{
                -webkit-transform: rotate(30deg);
            }
        }
    </style>
</head>
<body>
    <p class="stage">
        <p class="watch"><img src="../img/clock.png" alt="" width="120" height="410"></p>
        <p class="seconds"><img src="../img/secondHand.png" alt="" width="10" height="55"></p>
    </p>
</body>
</html>
登入後複製

#本文說明了利用css3 html5製作擺動的鐘錶,更多相關內容請關注php中文網。

相關推薦:
簡易PHP MySQL 分頁類別


#兩個不用遞歸的樹狀陣列建構子

############HTML轉Excel,並實作列印,下載功能##########

以上是css3+html5-擺動的鐘錶的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!