利用CSS實現(xiàn)酷炫的下拉框特效

發(fā)布時間：2016-10-20 17:26:40 作者：佚名

我要評論

這篇文章給大家介紹的是一個利用CSS實現(xiàn)的酷炫的下拉框，實現(xiàn)后效果真的非常不錯，文中給出了詳細實現(xiàn)過程和示例代碼，感興趣的朋友們下面來一起看看吧。

首先來看看要實現(xiàn)的效果圖

想要制作這么一個效果還是比較麻煩的，但是代碼并不難理解。

首先，來看看 Html 代碼。

XML/HTML Code復制內(nèi)容到剪貼板

<div class="container">
<div class="heading">
<h2>Custom Select</h2>
</div>
<div class="select">
<p>Please select</p>
<ul>
<li data-value="HTML5">HTML5</li>
<li data-value="CSS3">CSS3</li>
<li data-value="JavaScript">JavaScript</li>
<li data-value="JQuery">JQuery</li>
<li data-value="Backbone">Backbone</li>
</ul>
</div>
</div>

可見，我們并沒有利用原生的 select 元素，而是利用其它元素來模擬這個效果。我們?yōu)?li 元素指定了 data-value,主要是接下來我們會用 JQuery 獲取選中值并將其放置到 p 元素下。

下面逐步來看 CSS 代碼。

CSS Code復制內(nèi)容到剪貼板

* {
margin: 0;
padding: 0;
}
html {
font-family: 'Terminal';
font-size: 62.5%;
}
body {
background-color: #33CC66;
}

1、將網(wǎng)頁中所有元素的外邊距和內(nèi)邊距設置為 0。

2、將網(wǎng)頁中的默認字體設置為 Terminal，字體大小設置為 62.5%, 也就是 10px。

3、設置背景顏色為 #33CC66。

XML/HTML Code復制內(nèi)容到剪貼板

<link href='http://fonts.googleapis.com/css?family=Lobster|Terminal+Dosis' rel='stylesheet' type='text/css'>

上面我們用到了 Terminal 字體，而且接下來我們還會使用 Lobster 字體，所以用這行代碼添加引用。

1、指定 headng, select 寬度并指定其水平居中。

2、修改 heading 的寬度，主要是為了讓其寬度大于 select 的寬度，顯得更加美觀。然后指定其上外邊距和下外邊距。

3、設置 heading 下 h2 元素的字體和字體大小，顏色。

CSS Code復制內(nèi)容到剪貼板

.select > p, .select ul {
background-color: #ffffff;
font-size: 2rem;
border: 1px solid bisque;
border-radius: 5px;
margin-bottom: 0;
}
.select > p {
text-align: left;
padding: 1rem;
position: relative;
border-bottom-rightright-radius: 0;
border-bottom-left-radius: 0;
cursor: pointer;
color: rgba(102, 102, 102, .6);
}
.select > p:after {
display: block;
width: 10px;
height: 10px;
content: '';
position: absolute;
top: 1.4rem;
rightright: 2rem;
border-bottom: 1px solid #33CC66;
border-left: 1px solid #33CC66;
transform: rotate(-45deg);
transition: transform .3s ease-out, top .2s ease-out;
}

1、設置 p 和 ul 元素的背景顏色和邊框等設置。

2、為 p 元素單獨指定樣式，并設置其 position 屬性，主要是為了下面繪制右側的下拉按鈕。

3、利用 :after 在p 元素的右方繪制下拉按鈕，可以看出來，我們是利用左下邊框然后旋轉 -45 度模擬的這個效果。值得注意的是，我們需要將其 display 設置為 block，并且設置寬高，否則看不到這個效果。

CSS Code復制內(nèi)容到剪貼板

.select ul {
margin-top: 0;
border-top-left-radius: 0;
border-top-rightright-radius: 0;
list-style-type: none;
cursor: pointer;
overflow-y: auto;
max-height: 0;
transition: max-height .3s ease-out;
}
.select ul li {
padding-left: 0.5rem;
display: block;
line-height: 3rem;
text-align: left;
}

1、設置 ul 的一些默認屬性，并將其設置最大寬度為 0，指定 overflow-y 為 auto ，這個時候ul 將會被隱藏。

2、在這里設置的時候我遇到了一個問題，就是 li 標簽始終占不滿 ul 的一行，那是因為其默認有 margin 和 padding ，所以在一開始的時候就將網(wǎng)頁中所有元素的外邊距和內(nèi)邊距設置成了 0。

CSS Code復制內(nèi)容到剪貼板

.select.open ul {
max-height: 20rem;
transform-origin: 50% 0;
-webkit-animation: slide-down .5s ease-in;
}
.select.open > p:after {
position: absolute;
top: 1.6rem;
transform: rotate(-225deg);
transition: transform .3s ease-in, top .2s ease-in;
}

1、為 open 設置最大高度，并為其指定動畫效果。

2、將下拉按鈕旋轉 -225 度，并為其指定動畫。

下面我們看看為 ul 元素指定的 slide-down 動畫效果，這也是這個下拉特效的關鍵所在。

CSS Code復制內(nèi)容到剪貼板

@-webkit-keyframes slide-down {
0% {
transform: scale(1, 0);
}
25% {
transform: scale(1, 1.25);
}
50% {
transform: scale(1, 0.75);
}
75% {
transform: scale(1, 1.1);
}
100% {
transform: scale(1, 1);
}
}

看到以上代碼可能就都明白了，就是不斷改變 ul 的大小，讓其在 0.75-1.25 之間進行縮放，所以就會有那個跳動的效果了。

下面還有一些簡單的 CSS 代碼，不再解釋。

CSS Code復制內(nèi)容到剪貼板

.select ul li:hover {
background-color: rgba(102, 153, 102, 0.4);
}
.select .selected {
background-color: rgba(102, 153, 102, 0.8);
}

CSS 講完了，下面就可以看看我們是如何利用 JQuery 控制這個效果的。

我們并不需要下載 JQuery 就可以使用，因為現(xiàn)在已經(jīng)有很多網(wǎng)站提供了 CDN 服務，比如我使用的 BootCDN。

XML/HTML Code復制內(nèi)容到剪貼板

<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>

下面就可以使用 JQuery 了。

XML/HTML Code復制內(nèi)容到剪貼板

<script>
$(document).ready(function () {
$('.select ul li').on("click", function (e) {
var _this = $(this);
$('.select >p').text(_this.attr('data-value'));
$(_this).addClass('selected').siblings().removeClass('selected');
$('.select').toggleClass('open');
cancelBubble(e);
});
$('.select>p').on("click", function (e) {
$('.select').toggleClass('open');
cancelBubble(e);
});
$(document).on('click', function () {
$('.select').removeClass('open');
})
})
function cancelBubble(event) {
if (event.stopPropagation) {
event.preventDefault();
event.stopPropagation();
} else {
event.returnValue = false;
event.cancelBubble();
}
}
</script>

1、首先為 p 標簽綁定 click 事件，在觸發(fā)的時候，為 select 添加或移除 open class, 也就是將 ul 顯示出來。

2、為 li 綁定 click 事件，當選中了一個 li 元素的時候，首先獲取到 data-value，然后將其賦值給 p 標簽，然后為選中的 li 添加 selected class,與此同時利用 siblings() 方法，讓兄弟節(jié)點的 selected class 移除。

3、為 document 設置click 事件，當我們點擊網(wǎng)頁中任何一處地方的時候，如果 ul 是打開的，就將其關閉，不過這個時候由于所有元素都在 document 內(nèi)，所以我們需要阻止事件冒泡，調用自己寫的 cancelBubble() 方法。

總結
好了，本文的內(nèi)容到這就基本介紹了，希望能對大家的學習或者工作帶來一定的幫助，如果有疑問大家可以留言交流。

Tag：下拉框 css

jquery+css實現(xiàn)的ul+li模仿下拉框表單美化效果源碼
jquery+css實現(xiàn)的ul+li模仿下拉框表單美化效果源碼，是一款利用DIV+CSS及jquery實現(xiàn)的下拉框表單美化特效源碼，需要此段代碼的朋友們可以前來下載使用
2014-11-21
HTML5+CSS3實現(xiàn)的自定義下拉框菜單效果源碼 3D卡片折疊動畫
今天要分享的一款CSS3自定義下拉框取代了傳統(tǒng)的Select樣式，用不一樣的風格來讓select更加美觀。這款CSS3下拉框還有3D立體的卡片折疊動畫效果，非常酷
2014-11-07
CSS美化下拉框select在火狐和谷歌瀏覽器下已測試
本示例要模仿的是下拉框，經(jīng)過美化的偽下拉，右邊的小三角是用css3實現(xiàn)的，鼠標經(jīng)過的時候有旋轉特效
2014-05-13
8款精美的CSS3表單設計(登錄表單/下拉選擇/按鈕附演示及源碼)
接下來向大家分享8款精美的CSS3表單設計，表單內(nèi)容包括登錄表單、下拉選擇、按鈕等，并且每一個表單都有演示和源碼下載，如何你對此感興趣的話，就趕緊收藏他們吧，希望本
2013-02-04
CSS3簡單帶下劃線跟隨下拉菜單特效源碼
這是一套使用純CSS3制作的帶下劃線跟隨效果的下拉菜單特效的代碼，通過CSS3 transform和transition來制作。歡迎下載使用
2016-10-17
CSS怎么去掉select的下拉箭頭樣式
本文給大家介紹css代碼去掉select的下拉箭頭樣式的方法，代碼簡單易懂，需要的朋友可以參考下
2016-09-02
CSS下拉菜單簡單制作教程
這篇文章主要為大家詳細介紹了CSS下拉菜單簡單制作教程，鼠標移動到指定元素上會出現(xiàn)下拉菜單，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-07-05
CSS3美化表單控件全集
這篇文章主要為大家詳細介紹了CSS3美化表單控件的技巧，美化下拉控件、單選框、復選框，感興趣的小伙伴們可以參考一下
2016-06-29
打造最美CSS多級下拉橫向導航菜單代碼
這篇文章主要告訴大家如何打造最美CSS多級下拉橫向導航菜單效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-06-27
CSS3制作炫酷的下拉菜單及彈起式選單的實例分享
這篇文章主要介紹了CSS3制作炫酷的下拉菜單及彈起式選單的實例分享,當然菜單上如果要實現(xiàn)更多動態(tài)效果的話還是需要JavaScript的幫助才行,需要的朋友可以參考下
2016-05-17