css3手工繪製旋轉選單
下面是css**：
.box
.border
.border .spritemenu .spritemenu_sub_child
@keyframes _text_out_ to
}@keyframes _text_in_ to
}/*整體旋轉動畫*/
.border .spritemenu
/*展開時旋轉*/
@keyframes _rotate_out_
}/*收回時旋轉*/
@keyframes _rotate_in_
}/*選單的每個按鈕範定義*/
.border .spritemenu .spritemenu_sub_box
/*自定義游標*/
.mousecur
@keyframes _mousecur_
12.5%
25%37.5%
50%62.5%
75%87.5%
100%
}下面是js**：
var example = function() {};
example.prototype = ,
creatediv: function(cnt,cls)
},//新增偽類樣式string
addcssvaltext : function(styleid,text)
s.innertext+=text;
},//重寫樣式
rewirtecssvaltext : function(styleid,text)
s.innertext=text;}}
var aaa = new example();
aaa.initdiv();
aaa.creatediv(8,"spritemenu");
/*x軸標尺新增文字 */
var word = ;
for(i=1;i<=8;i++)
var color = ;
var radius = 70;//半徑
var round = 9;//圓環度
var movedown = 50;//下移量
var pasitionx = [ 0,
-(2*radius)/(math.sqrt(2)+2)-(radius/round),
-radius,
-(2*radius)/(math.sqrt(2)+2)-(radius/round),
0,+(2*radius)/(math.sqrt(2)+2)+(radius/round),
+radius,
+(2*radius)/(math.sqrt(2)+2)+(radius/round)
];var pasitiony = [ -radius,
-(2*radius)/(math.sqrt(2)+2)-(radius/round),
0,+(2*radius)/(math.sqrt(2)+2)+(radius/round),
+radius,
+(2*radius)/(math.sqrt(2)+2)+(radius/round),
0,-(2*radius)/(math.sqrt(2)+2)-(radius/round)
];var relative = new array;
//設定初始位置
var style = "";
var sub_height = 0;
for(i=1;i<=8;i++)";
sub_height += 52; //圓的直徑+邊距
relative[i-1] = sub_height;
}//動畫設定
for(i=1;i<=8;i++)";
//彈出動畫
style += "@keyframes _out_"+i+""; //透明度
style += "100%}"; //透明度
//收回動畫
style += "@keyframes _in_"+i+""; //透明度
style += "100%}"; //透明度
}aaa.addcssvaltext("css",style);
//滑鼠右鍵觸發事件
aaa.showflag = false;
document.body.oncontextmenu = function(env) ";
//style += ".border ";
style += ".border "; //用top和left來控制位置
for(i=1;i<=8;i++)";
}style += ".border .spritemenu ";
style += ".border .spritemenu .spritemenu_sub_child ";
aaa.rewirtecssvaltext("css1",style);
}return false; //遮蔽滑鼠右鍵
}//滑鼠左鍵觸發事件
document.body.onclick = function(env) ";
}style += ".border .spritemenu ";
style += ".border .spritemenu .spritemenu_sub_child ";
aaa.addcssvaltext("css1",style);
}//取消滑鼠箭頭
= "none";
//設定新的滑鼠箭頭
document.body.onmousemove = function(env) ";
//style += "transform:translate("+(env.pagex-90)+"px,"+(env.pagey-140)+"px);}";
style += ".mousecur ";//用top和left來控制位置
aaa.rewirtecssvaltext("css2",style);
}//當滑鼠移出視窗時隱藏
document.body.onmouseout = function(env) ";
aaa.addcssvaltext("css2",style);
}有個問題，當div旋轉的時候，裡面的文字也跟隨旋轉，而我的策略是在class=spritemenu_sub_box的div下巢狀乙個spritemenu_sub_child的div來填充文字，讓其以反方向旋轉，這麼做感覺很繁瑣，如果有好辦法的兄弟們不吝賜教哈~~
css3動畫 彈出式選單
今天主要來講講transition和transform結合做的動畫，會舉一些現在 2017年 常見的動畫例子。注 本人也接觸css3不久，如果寫的有紕漏請指出，不喜勿噴。效果 要做這個效果主要用到的是translate 思路就是把整個選單放到右下角，並且設定rigth為負值，當hover的時候，tr...
滑鼠懸停顯示CSS3動畫邊框
效果體驗 以下是 1 doctype html 2 html xmlns 3 head 4 meta charset utf 8 5 title css3滑鼠懸停顯示動畫邊框 柯樂義 title base target blank 6 link href type text css rel styl...
css3動畫的 消失 」」
今天做了一件特別丟人的事情，用css3寫乙個最基礎最簡單的動畫 元素從左上角開始，到200px 處轉換成圓形 到 400px 處轉換成方形 第一次寫的時候，我的 是這樣寫的 結果是每當這個動畫執行結束之後，這個div就會 消失 然後我就反覆的檢查我的 看一下是不是哪兒搞錯了，結果是看了一遍又一遍都沒...