摘要:實例代碼實現漸變時間變化效果藍色按鈕橙色按鈕紫色按鈕灰色按鈕藍色按鈕橙色按鈕紫色按鈕灰色按鈕同理可應用在超鏈接按鈕等中
實例代碼:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
*{margin: 0; padding: 0;}
.container{
margin: 0 auto;
padding-top: 30px;
width: 1000px;
}
.btn{
display: inline-block;
padding: 0 30px;
width: auto;
height: 35px;
font: 14px/35px microsoft yahei;
color: #fff; border: 0;
border-radius: 3px;
text-align: center;
cursor: pointer;
/*實現漸變(時間變化效果)*/
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.blueBtn{
background: #5dcbff;
} /*藍色按鈕*/
.blueBtn:hover{
background: #40b6ee;
}
.orangeBtn{
background: #ff5700;
}/*橙色按鈕*/
.orangeBtn:hover{
background: #e25d18;
}
.violetBtn{
background: #6680ff;
}/*紫色按鈕*/
.violetBtn:hover{
background: #425de0;
}
.grayBtn{
background: #999;
}/*灰色按鈕*/
.grayBtn:hover{
background: #7f7f7f;
}
style>
head>
<body>
<div class="container">
<span class="btn blueBtn">藍色按鈕span>
<span class="btn orangeBtn">橙色按鈕span>
<span class="btn violetBtn">紫色按鈕span>
<span class="btn grayBtn">灰色按鈕span>
div>
body>
html>
同理可應用在超鏈接、按鈕等中
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/1008.html
摘要:為了讓包圍列表項,沒有使用,而是使用了,是因為前者會導致后來添加到下拉菜單中的子菜單無法顯示它們最終會顯示在父元素的外面,結果會導致溢出而被隱藏。它與父元素之間的間隙,實際上下拉菜單中第一個鏈接的邊框。 菜單由一組鏈接組成。用 HTML 中的列表元素(ul 或 ol)來分組鏈接不僅符合邏輯,而且即使沒有額外的 CSS 也能適當顯示鏈接的層次。默認情況下,由于列表(li)是塊級元素...
摘要:最后,將動畫函數選為。的表現狀態就是起止過程比較緩慢,中間過渡迅速。褪色效果首先,添加一個褪色的過渡。通過百分比的方式指定動畫的進度相對于初始位置右移。同時希望動畫持續秒的時長,采用的動畫效果。 CSS不一定要寫得多么復雜才能實現特殊效果。如下就是三個超級簡單的過渡的例子,可能只是幾行代碼,但是添加到Web應用程序中,卻會讓它增色不少。showImg(https://segmentfa...
摘要:最后,將動畫函數選為。的表現狀態就是起止過程比較緩慢,中間過渡迅速。褪色效果首先,添加一個褪色的過渡。通過百分比的方式指定動畫的進度相對于初始位置右移。同時希望動畫持續秒的時長,采用的動畫效果。 CSS不一定要寫得多么復雜才能實現特殊效果。如下就是三個超級簡單的過渡的例子,可能只是幾行代碼,但是添加到Web應用程序中,卻會讓它增色不少。showImg(https://segmentfa...
摘要:效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽??山换ヒ曨l此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。 showImg(https://segmentfault.com/img/bVbgnoQ?w=400&h=300); 效果預覽 按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。 https://codepen.io/comehop...
閱讀 713·2023-04-25 19:43
閱讀 3910·2021-11-30 14:52
閱讀 3784·2021-11-30 14:52
閱讀 3852·2021-11-29 11:00
閱讀 3783·2021-11-29 11:00
閱讀 3869·2021-11-29 11:00
閱讀 3557·2021-11-29 11:00
閱讀 6105·2021-11-29 11:00