html+css實(shí)現(xiàn)自定義圖片上傳按鈕

通的input[type=‘file’]的效果很樸素

可以自定義一個(gè)file選擇文件的按鈕：

思路為：用定位將自定義的按鈕遮住原來的選擇文件按鈕，再讓點(diǎn)擊自定義按鈕時(shí)觸發(fā)原來的選擇文件按鈕的事件即可（對(duì)此，label可實(shí)現(xiàn)）

eg:html:

css樣式：

結(jié)果圖：

點(diǎn)擊“選擇圖片”按鈕，則會(huì)觸發(fā)選擇圖片的事件，你就可以選擇圖片啦！

以上，是用bootstrap實(shí)現(xiàn)的，原生的如下：

html:

CSS:

效果圖：

點(diǎn)一下，就可以彈出選擇文件的文件夾啦！

示和隱藏圖片

點(diǎn)擊顯示和隱藏按鈕分別控制圖片的顯示和隱藏。

框架繪制，顯示按鈕、隱藏按鈕、div標(biāo)簽：

<input type="button" value="顯示" id="btn1">
<input type="button" value="隱藏" id="btn2">
<div id="box"></div>

添加樣式：按鈕居中，div設(shè)置寬高和背景圖片，display:block; 代表顯示圖片；display:none; 代表顯示圖片。

<style>
    body{
        text-align: center;
    }

    input{
        margin: 10px;
    }

    #box{
        height: 400px;
        width: 500px;
        background: url(./images/001.jpg) no-repeat;
        background-size: cover;
        margin: auto;
        display: block;
    }
</style>

獲取對(duì)象：

let btn1 = document.getElementById("btn1");
let btn2 = document.getElementById("btn2");
let box = document.getElementById("box");

當(dāng)按鈕點(diǎn)擊切換顯示狀態(tài)：

console.log(box.style.display, typeof(box.style.display));
btn1.onclick = function(){
    box.style.display = "block";
}

btn2.onclick = function(){
    console.log(box.style.display, typeof(box.style.display));
    box.style.display = "none";
}

切換背景圖像

按下UP向上跳躍：

按下DOWN落地：

天跟大家分享與CSS3按鈕相關(guān)的特效展示案例，這些例子特效主要由CSS3編寫出來，除了新鮮有創(chuàng)意之外，編寫代碼質(zhì)量也很高，對(duì)于前端人員或設(shè)計(jì)師都有參考的價(jià)值，當(dāng)然有的不是全CSS3編寫的，部分是需要與JS代碼結(jié)合使用才能發(fā)揮效果。

下面大家一起看看這些CSS按鈕DEMO，確實(shí)很酷哦！

1.css按鈕點(diǎn)擊效果

2.css按鈕提交動(dòng)畫

3.css按鈕懸停動(dòng)畫

4.css訂購按鈕

5.css動(dòng)畫按鈕

6.css黑白懸停按鈕

7.css藍(lán)色動(dòng)畫按鈕

8.css立方體按鈕

9.css鼠標(biāo)懸填充效果

10.css鼠標(biāo)懸停邊框按鈕

11.按鈕懸停效果

12.純css按鈕動(dòng)畫

13.純css動(dòng)畫按鈕

14.純css多彩按鈕

15.垃圾桶按鈕動(dòng)畫

16.文件壓縮按鈕動(dòng)畫

整理了16款css按鈕，經(jīng)過全部測(cè)試，沒發(fā)現(xiàn)有影響使用的bug，其中也可能存在部分bug，但是應(yīng)該問題不大。

代碼已上傳到網(wǎng)盤，獲取源碼請(qǐng)關(guān)注公眾號(hào)【青年碼農(nóng)】回復(fù)【css按鈕】即可。

在線咨詢

上一篇：新手學(xué)Python精選：Python如何爬取動(dòng)態(tài)網(wǎng)頁內(nèi)容
下一篇：視頻和源碼詳解html5加原生js打造大型商城刮刮卡特效

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商