CSS3跳轉頁面

從HTML4到HTML5，URL跳轉的方式是利用標簽：或者等。 Css3為了用戶更好的體驗跳轉頁面，增加了幾個動畫效果以及其他效果。而且是用純css3實現的，不要用javascript的實現。

.btn{
display: inline-block;
padding: 10px 30px;
text-align: center;
text-decoration: none;
color: #fff;
border-radius: 6px;
/* 背景色漸變 */
background: linear-gradient(#7abaff, #4776E6);
}
/* 跳轉時，按鈕有一個扔掉的動畫 */
.btn.-throw{
animation-name: throwButton;
animation-duration: 1s;
}
/* 動畫的樣式 */
@keyframes throwButton {
from {
transform: translateY(0) rotate(0deg);
opacity: 1;
}
to {
transform: translateY(50px) rotate(60deg);
opacity: 0.1;
}
}

比如說我們有一個按鈕，跳轉到百度搜索

跳轉到百度

我們在CSS3樣式中寫一個 .btn 的類，先定義一個常規的樣式，給它設置了顏色、圓角和背景通道。之后在.btn.-throw根據需要（跳轉時）觸發的扔掉動畫樣式，我們通過給按鈕添加類名的方式去觸發。

希望你們學習CSS3的跳轉頁面技巧，更好地實現各種跳轉動畫效果。記得這些動畫必須通過CSS3進行實現，而不是使用JavaScript。