按下使用CSS3動畫的按鈕

我想在活動狀態下按下一個斜角看按鈕。我希望過渡足夠平穩，但問題是我不知道如何使這種平滑。我所取得的成果如下。按下使用CSS3動畫的按鈕

.button { 
 
    background-color: #ff962c; 
 
    border-radius: 10px; 
 
    width: 25%; 
 
    text-align: center; 
 
    color: #FFFFFF; 
 
    padding: 10px; 
 
    font-family: 'Source Sans Pro', sans-serif; 
 
    display: inline-block; 
 
    font-size: 20px; 
 
    box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .4), inset -2px -2px 2px rgba(0, 0, 0, .4); 
 

 
} 
 
.button:active { 
 
    border: 1px solid #ff962c; 
 
    background-color: #ffa346; 
 
    box-shadow: inset 2px 2px 2px rgba(0, 0, 0, .8), inset -1px -1px 1px rgba(255, 255, 255, .4); 
 
} 
 
.button:hover { 
 
    background-color: #ffa346; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet" /> 
 
<a href="" id="upload" class="button"> 
 
    <i class="fa fa-cloud-upload fa-lg fa-align-center" aria-hidden="true"></i> 
 
</a> 
 

 
<a href="" id="view" class="button"> 
 
    <i class="fa fa-eye fa-lg fa-align-center" aria-hidden="true"></i> 
 
</a>

來源

2016-11-11 Ayan

看看CSS過渡！你可以在互聯網上找到很多教程，這裏有一個基本的教程：http://www.w3schools.com/css/css3_transitions.asp –

您可以添加CSS過渡。確切地說：transition: box-shadow .2s ease-in-out;。我建議只改變特定屬性的轉換，特別是如果我們正在討論盒子陰影和其他這樣的重度效果。

.button { 
 
    background-color: #ff962c; 
 
    border-radius: 10px; 
 
    width: 25%; 
 
    text-align: center; 
 
    color: #FFFFFF; 
 
    padding: 10px; 
 
    font-family: 'Source Sans Pro', sans-serif; 
 
    display: inline-block; 
 
    font-size: 20px; 
 
    box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .4), inset -2px -2px 2px rgba(0, 0, 0, .4); 
 
    transition: box-shadow .2s ease-in-out; 
 
} 
 
.button:active { 
 
    box-shadow: inset 2px 2px 2px rgba(0, 0, 0, .8), inset -1px -1px 1px rgba(255, 255, 255, .4); 
 
} 
 
.button:hover { 
 
    background-color: #ffa346; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet" /> 
 
<a href="" id="upload" class="button"> 
 
    <i class="fa fa-cloud-upload fa-lg fa-align-center" aria-hidden="true"></i> 
 
</a> 
 

 
<a href="" id="view" class="button"> 
 
    <i class="fa fa-eye fa-lg fa-align-center" aria-hidden="true"></i> 
 
</a>

來源

2016-11-11 09:54:05

是的。還有一件事，配色方案是否完美，讓它具有bg＃222D33的逼真效果？ – Ayan

@Ayan對於這些類型的問題，我建議你這個網站：http://ux.stackexchange.com/ –

@Ayan你可以添加'背景顏色：＃222D33'給你.button'：active'class，並且在按鈕類的轉換上進行轉換：box-shadow .2s緩進出，背景色.2s緩進出;'而不是'過渡：盒子陰影.2s緩出來';'。請注意，通過轉換'all.2s ease-in-out'，您可以轉換您不打算使用的屬性，並且通過降低網站性能，絕對會阻礙最終用戶的體驗。 –

你的意思是這樣的，簡單地使用transitions？
看一看這個環節也可能是有用的：hover.css

.button { 
 
    background-color: #ff962c; 
 
    border-radius: 10px; 
 
    width: 25%; 
 
    text-align: center; 
 
    color: #FFFFFF; 
 
    padding: 10px; 
 
    font-family: 'Source Sans Pro', sans-serif; 
 
    display: inline-block; 
 
    font-size: 20px; 
 
    box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .4), inset -2px -2px 2px rgba(0, 0, 0, .4); 
 
    -webkit-transition: all .1s ease; 
 
    -moz-transition: all .1s ease; 
 
    -o-transition: all .1s ease; 
 
    transition: all .1s ease; 
 
} 
 
.button:active { 
 
    border: 1px solid #ff962c; 
 
    background-color: #ffa346; 
 
    box-shadow: inset 2px 2px 2px rgba(0, 0, 0, .8), inset -1px -1px 1px rgba(255, 255, 255, .4); 
 
} 
 
.button:hover { 
 
    background-color: #ffa346; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet" /> 
 
<a href="" id="upload" class="button"> 
 
    <i class="fa fa-cloud-upload fa-lg fa-align-center" aria-hidden="true"></i> 
 
</a> 
 

 
<a href="" id="view" class="button"> 
 
    <i class="fa fa-eye fa-lg fa-align-center" aria-hidden="true"></i> 
 
</a>

來源

2016-11-11 09:49:58 Federico

試試這個

.button { 
 
    background-color: #ff962c; 
 
    border-radius: 10px; 
 
    width: 25%; 
 
    text-align: center; 
 
    color: #FFFFFF; 
 
    padding: 10px; 
 
    font-family: 'Source Sans Pro', sans-serif; 
 
    display: inline-block; 
 
    font-size: 20px; 
 
    box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .4), inset -2px -2px 2px rgba(0, 0, 0, .4); 
 
    
 
} 
 
.button:active { 
 
    border: 1px solid #ff962c; 
 
    background-color: #ffa346; 
 
    box-shadow: inset 2px 2px 2px rgba(0, 0, 0, .8), inset -1px -1px 1px rgba(255, 255, 255, .4); 
 
    -webkit-transition: all .1s ease; 
 
    -moz-transition: all .1s ease; 
 
    -o-transition: all .1s ease; 
 
    transition: all .1s ease; 
 
} 
 
.button:hover { 
 
    background-color: #ffa346; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet" /> 
 
<a href="#" id="upload" class="button"> 
 
    <i class="fa fa-cloud-upload fa-lg fa-align-center" aria-hidden="true"></i> 
 
</a> 
 

 
<a href="#" id="view" class="button"> 
 
    <i class="fa fa-eye fa-lg fa-align-center" aria-hidden="true"></i> 
 
</a>

來源

2016-11-11 10:03:13

按下使用CSS3動畫的按鈕

回答

相關問題