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 & 下載

Web Demo
Github

Reference

• 魔法陣製作 Magic Circle @ Morri's Blog 
• Set Text on a Circle @ CSS-TRICKS 
• Lettering.js

備註

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