HTML+CSS3と少しのJS_html/css_WEB-ITnoseで作った小さな時計

原文: http://margox.me/css3clock.html

初めて記事を投稿するので、とても興奮しています。
このプログラマーは長い間 Dribbble などのデザイナー Web サイトに夢中で、その美しいデザイン作品を見るととても興奮します。しかし、私は PS に習熟していないので、AI のことをすっかり忘れていました。フロントエンドのことを少し調べただけで、偶然目にした時計のデザインが斬新なものがいくつかあったので、CSSで実装するのは難しくなさそうだと思い、1時間かけて考えました。

レンダリング

技術的なポイント

• box-shadow 文字盤の質感は全てそれに依存します
• nth-child(x)は文字盤スケールの位置決めなどに使用します
• transform-origin これを使用します位置決め用 3 つの時計の針の回転の中心点
• キーフレーム時計の手のアニメーション効果

プロセス

最初に DOM 構造を設計します。コードは次のとおりです:

<div class="clock-wrapper">    <div class="clock-base">        <div class="click-indicator">            <div></div>            <div></div>            <div></div>            <div></div>            <div></div>            <div></div>            <div></div>            <div></div>            <div></div>            <div></div>            <div></div>            <div></div>        </div>        <div class="clock-hour"></div>        <div class="clock-minute"></div>        <div class="clock-second"></div>        <div class="clock-center"></div>    </div></div>

構造は非常に単純です。スタイル名の各要素、中央の段落 空の div は当然ダイヤルスケールです。

次は CSS コードです

html,body{    height: 100%;    margin: 0;    padding: 0;    background-image: linear-gradient(#e7e7e7,#d7d7d7);}/*时钟容器*/.clock-wrapper{    position: absolute;    top: 0;    right: 0;    bottom: 100px;    left: 0;    width: 250px;    height: 250px;    margin: auto;    padding: 5px;    background-image: linear-gradient(#f7f7f7,#e0e0e0);    border-radius: 50%;    box-shadow: 0 10px 15px rgba(0,0,0,.15),0 2px 2px rgba(0,0,0,.2);}/*表盘*/.clock-base{    width: 250px;    height: 250px;    background-color: #eee;    border-radius: 50%;    box-shadow: 0 0 5px #eee;}/*表盘刻度容器*/.click-indicator{    position: absolute;    z-index: 1;    top: 15px;    left: 15px;    width: 230px;    height: 230px;}/*表盘刻度*/.click-indicator div{    position: absolute;    width: 2px;    height: 4px;    margin: 113px 114px;    background-color: #ddd;}/*分别设置各个刻度的位置和角度*/.click-indicator div:nth-child(1) {    transform: rotate(30deg) translateY(-113px);}.click-indicator div:nth-child(2) {    transform: rotate(60deg) translateY(-113px);}.click-indicator div:nth-child(3) {    transform: rotate(90deg) translateY(-113px);    background-color: #aaa;}.click-indicator div:nth-child(4) {    transform: rotate(120deg) translateY(-113px);}.click-indicator div:nth-child(5) {    transform: rotate(150deg) translateY(-113px);}.click-indicator div:nth-child(6) {    transform: rotate(180deg) translateY(-113px);    background-color: #aaa;}.click-indicator div:nth-child(7) {    transform: rotate(210deg) translateY(-113px);}.click-indicator div:nth-child(8) {    transform: rotate(240deg) translateY(-113px);}.click-indicator div:nth-child(9) {    transform: rotate(270deg) translateY(-113px);    background-color: #aaa;}.click-indicator div:nth-child(10) {    transform: rotate(300deg) translateY(-113px);}.click-indicator div:nth-child(11) {    transform: rotate(330deg) translateY(-113px);}.click-indicator div:nth-child(12) {    transform: rotate(360deg) translateY(-113px);    background-color: #c00;}/*时针*/.clock-hour{    position: absolute;    z-index: 2;    top: 80px;    left: 128px;    width: 4px;    height: 65px;    background-color: #555;    border-radius: 2px;    box-shadow: 0 0 2px rgba(0,0,0,.2);    transform-origin: 2px 50px;    transition: .5s;    -webkit-animation: rotate-hour 43200s linear infinite;}/*分针*/.clock-minute{    position: absolute;    z-index: 3;    top: 60px;    left: 128px;    width: 4px;    height: 85px;    background-color: #555;    border-radius: 2px;    box-shadow: 0 0 2px rgba(0,0,0,.2);    transform-origin: 2px 70px;    transition: .5s;    -webkit-animation: rotate-minute 3600s linear infinite;}/*秒针*/.clock-second{    position: absolute;    z-index: 4;    top: 20px;    left: 129px;    width: 2px;    height: 130px;    background-color: #a00;    box-shadow: 0 0 2px rgba(0,0,0,.2);    transform-origin: 1px 110px;    transition: .5s;    -webkit-animation: rotate-second 60s linear infinite;}.clock-second:after{    content: "";    display: block;    position: absolute;    left: -5px;    bottom: 14px;    width: 8px;    height: 8px;    background-color: #a00;    border: solid 2px #a00;    border-radius: 50%;    box-shadow: 0 0 3px rgba(0,0,0,.2);}/*表盘中央的原型区域*/.clock-center{    position: absolute;    z-index: 1;    width: 150px;    height: 150px;    top: 55px;    left: 55px;    background-image: linear-gradient(#e3e3e3,#f7f7f7);    border-radius: 50%;    box-shadow: inset 0 -1px 0 #fafafa, inset 0 1px 0 #e3e3e3;}.clock-center:after{    content: "";    display: block;    width: 20px;    height: 20px;    margin: 65px;    background-color: #ddd;    border-radius: 50%;}

スタイル ファイルはこれですべてですが、この場合、3 つのポインターがすべて 12 時の位置にあるため、ポインターを移動する必要があります。

実際、もっと簡単な場合は、CSS でアニメーションのルールを設定するだけです。時針は 3600 秒で 360 度回転し、分針と秒針は 360 度回転します。
しかし、強迫性障害の人は、これは絶対に不可能だと言いました。正しい時間を示すことさえできない時計は偽物に違いないので、ここでは CSS の兄弟である JavaScript の助けを見つける必要があります。 head タグに追加することを忘れないでください。 何かを入れてください:

(function(){    //generate clock animations    var now       = new Date(),        hourDeg   = now.getHours() / 12 * 360 + now.getMinutes() / 60 * 30,        minuteDeg = now.getMinutes() / 60 * 360 + now.getSeconds() / 60 * 6,        secondDeg = now.getSeconds() / 60 * 360,        stylesDeg = [            "@-webkit-keyframes rotate-hour{from{transform:rotate(" + hourDeg + "deg);}to{transform:rotate(" + (hourDeg + 360) + "deg);}}",            "@-webkit-keyframes rotate-minute{from{transform:rotate(" + minuteDeg + "deg);}to{transform:rotate(" + (minuteDeg + 360) + "deg);}}",            "@-webkit-keyframes rotate-second{from{transform:rotate(" + secondDeg + "deg);}to{transform:rotate(" + (secondDeg + 360) + "deg);}}"        ].join("");    document.getElementById("clock-animations").innerHTML = stylesDeg;})();

そうしないと、JS によって生成されたスタイル コードが存在する場所がなくなります。

OK、上記のコードを jsbin に置きました:

http://output.jsbin.com/xeraxe

--

以上です、ごめんなさい、皆さんパッティングしてください~ :)