|
felita66 ヽ(`∀´)ノ過年。
私訊
發言
+好友
2018-04-21 00:18:44
|
|
好像沒看到動畫的分享
寫了一個分享給大家
(不知為何動態的按鈕有點噁? :目
CSS語法:
========按鈕樣式========================
.option-btn,.nametag{
background:linear-gradient(90deg,#222,#444,#222);
width: 7vw;
height: 7vh;
color:#fff;
border-radius:3.5vh;
box-shadow: inset 0px 0px 10px 1px rgba(117,182,255,0.4), 0px 0px 20px rgba(117,182,255,0.1);
animation:gogoloader 3s alternate infinite;
}
============按鈕被滑鼠滑過樣式=============================
.option-btn:hover {
-webkit-animation: pulse 1s alternate infinite;
-moz-animation: pulse 1s alternate infinite;
color:#222;
}
=============按下按鈕後樣式==================================
.option-btn:active {
background-color:#eee;
color:#222;
}
==============閃爍動畫==================================
@-webkit-keyframes pulse {
0% {
background: rgba(255,255,255,1);
box-shadow: inset 0px 0px 10px 2px rgba(117,182,255,0.5),
0px 0px 40px 2px rgba(105,135,255,1);
}
100% {
background: rgba(255,255,255,0);
box-shadow: inset 0px 0px 10px 2px rgba(117,182,255,0.5),
0px 0px 30px 2px rgba(105,135,255,0.3);
}
}
@-moz-keyframes pulse {
0% {
background: rgba(255,255,255,1);
box-shadow: inset 0px 0px 10px 2px rgba(117,182,255,0.5),
0px 0px 40px 2px rgba(105,135,255,1);
}
100% {
background: rgba(255,255,255,0);
box-shadow: inset 0px 0px 10px 2px rgba(117,182,255,0.5),
0px 0px 30px 2px rgba(105,135,255,0.3);
}
}
====================放大縮小動畫================================
@keyframes gogoloader {
0% {-webkit-transform: scale(1);}
50% {opacity: 0.8;
-webkit-transform: scale(1.1);
}
100% {
-webkit-transform: scale(1);
opacity:1;
}
}
@-webkit-keyframes gogoloader {
0% {-webkit-transform: scale(1);}
50% {opacity: 0.8;
-webkit-transform: scale(1.1);
}
100% {
-webkit-transform: scale(1);
opacity:1;
}
}
=================其他設置===============================
.app-bar, .app-bar-bottom{
background: -webkit-linear-gradient(#313131, #222); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#31131, #222); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#313131, #222); /* For Firefox 3.6 to 15 */
background: linear-gradient(#313131, #222); /* Standard syntax */
}
.c3 {
visibility:hidden;
display:none;
}
.c2 > center, .c1 > center{
visibility:hidden;
display:none;
}
.container2 > center{
visibility:hidden;
display:none;
}
#control > center{
visibility:hidden;
display:none;
}
.site{
width:95%;}
.content-game-cover-ad{
display:none;
}
|
Lv.15:0 
Lv.10 