CSS#魔法符文環


看到有人很無聊做了這個東西的 jQuery 版本,但我更無聊,因為 jQuery 版本佔用了很多資源,會把你的資源全部吃光光。 :P

於是乎我決定無聊的去改良這東西,變成為 CSS 版本!(歡呼聲)

魔法陣製作 Magic Circle
魔法陣符文字型出處

為了尊重原作者,所以這裡也用原作者的方式來進一步說明。

製作

前置作業


  • jQuery
  • CSS 旋轉、動畫、陰影


開始

  • 配置多層圖,可以參考 這裡 ,將內容拆成 <span>A</span> 的形式。
    (別跟我說為什麼跟原作者的步驟一模一樣,不過這部分可以用 lettering 的 jQuery Plugin 代勞)
  • 將每個 <span> 設置成絕對位置,並且使用 transform-origin center 設定為圖層中心為變形中心點。
  • .ring{
        font: 24px MagicRing, Monaco, MonoSpace;
        color:white;
        text-shadow:-1px  1px 20px rgba(237, 112, 215, 0.7),
                     1px  1px 20px rgba(237, 112, 215, 0.7),
                     1px -1px 20px rgba(237, 112, 215, 0.7),
                    -1px -1px 20px rgba(237, 112, 215, 0.7);
        position: absolute;
        top:0;
        bottom: 0;
        left: 0;
        right: 0;
        width:20px;
        height:20px;
        margin: auto;
        -webkit-transform-origin: center;
        -moz-transform-origin: center;
        -ms-transform-origin: center;
        -o-transform-origin: center;
        transform-origin: center;
    }
    
    .ring span {
      position: absolute;
      margin:auto;top:0;left:0;bottom:0;right:0;
        width:20px;
      -webkit-transform-origin: center;
      -moz-transform-origin: center;
      -ms-transform-origin: center;
      -o-transform-origin: center;
      transform-origin: center;
    }
    

  • 至於原作者說要字符偏轉角度,我這裡覽的算了,全部丟給 Javascript 去算比較快。(別嫌我懶):P
  • 動畫設定成順時鐘和逆時鐘,轉的角度從0至+-360度。(我丟給上層的圖層處理,而不是原作者直接把他放在每個字符)

  • #Ring1 span {height:150px;}
    #Ring2 span {height:250px;}
    #Ring3 span {height:350px;}
    #Ring4 span {height:450px;}
    #Ring5 span {height:550px;}
    /* 逆時針動畫 */
    @keyframes counter-clockwise {
      from {-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);}
      to   {-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-ms-transform: rotate(360deg);-o-transform: rotate(360deg);transform: rotate(360deg);}
    }
    /* Safari and Chrome */
    @-webkit-keyframes counter-clockwise {
      from {-webkit-transform: rotate(0deg);-o-transform: rotate(0deg);}
      to {-webkit-transform: rotate(360deg);-o-transform: rotate(360deg);}
    } 
    /* 順時針動畫 */
    @keyframes clockwise {
      from {-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);}
      to {-webkit-transform: rotate(-360deg);-moz-transform: rotate(-360deg);-ms-transform: rotate(-360deg);-o-transform: rotate(-360deg);transform: rotate(-360deg);}
    }
    /* Safari and Chrome */
    @-webkit-keyframes clockwise 
    {
      from {-webkit-transform: rotate(0deg);-o-transform: rotate(0deg);}
      to {-webkit-transform: rotate(-360deg);-o-transform: rotate(-360deg);}
    }
    

  • 光暈效果就隨便了,反正就 text-shadow 霸王硬上弓。

關於代碼

  • 沒有所謂的填入字符問題,因為我單純不想搞那麼複雜,所以我刪了。(別怪我無情又懶惰) :P
  • 每一層轉角為 360/count 。(這就是不複雜的好處,因為我懶) :P

  • var deg;
    $('.ring').each(function(){
        var count = $('#' + this.id + ' > span').length;
        deg = 360/count;
        $('#'+ this.id + ' > span').each(function(index){
            var currentdeg = deg * index;
    
            $(this).css({'webkitTransform' : 'rotate(' + currentdeg + 'deg)',
                            'MozTransform' : 'rotate(' + currentdeg + 'deg)',
                             'msTransform' : 'rotate(' + currentdeg + 'deg)',
                              'OTransform' : 'rotate(' + currentdeg + 'deg)',
                               'transform' : 'rotate(' + currentdeg + 'deg)'});
        });
    });


Demo & 下載

video
Web Demo
Github


Reference




備註

  • 關於 CSS animation 部分,DEMO 設定是 50sec 轉一圈。

8 件のコメント:

  1. 學習了,已經將效率調整。

    返信削除
  2. 這只是原型,應該還能變成 JS 版本自動生成。

    返信削除
  3. 關於 Web Demo 和 Youtube 影片中,不同的部分要怎麼處理?

    返信削除
  4. 抱歉,我理解能力有點差,能不能說得詳細一點 :(

    返信削除
  5. 之前在測試的時候沒注意到不同瀏覽器會有不合適的問題,現在修復後,確認火狐和Chrome可以正常運行。

    返信削除
  6. It is a great article. You will surely like this also because it is a great stuff, yeah it’s give us lots of interest and pleasure. Their opportunities are so fantastic and working style so speedy. Thank you for sharing the nice article. fastpokemap

    返信削除