css實現移動端訊息提醒按鈕

最後更新：2015-12-01 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：

1、利用css實現移動端訊息提醒按鈕，頁面效果如下：

2、代碼實現思路和關鍵點分析：

代碼的結構如所示，一共有4個提醒模組，每個模組都用li標籤包裹起來，li標籤裡設定兩個div，左邊的div是文案，右邊的div用於包裹按鈕。

css樣式一看就懂，就不囉嗦了。本文的重點是按鈕效果的實現。

2.1 如，我們用一個class為“.setting_btn”的div 繪製橢圓，設定背景色、1個像素的補白。以此讓中間白色的圓與外框看起來有1px的間距。

用class為“.setting_circle”的em繪製原型，因為em是行內元素，用display：inline-block將em變成行內塊元素，以便設定em的寬和高。

將一個width:30px height:28的塊元素設定成圓的方法是： border-radius 2倍的數值大於或等於width和height的值，就能顯示出圓形。

例如:此處我設定border-radius:40,width：30px; height:28px; border-radius 的2倍等於80px, 40X2=80 > 28

2.2 按鈕從“關閉”到“開啟” 一共完成了如下兩件事。

a:背景色由 #999 變成了 #FF777B

b:白色的圓圈由左邊勻速地平行到了右邊。

c:點擊按鈕

因為我們在設定了樣式*{box-sizing:border-box}，讓寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度，所以我們可以巧妙的給em的父元素加padding，以此讓em移動到右邊。為了有移動的效果，我們需要用到transition屬性。

簡寫transition屬性，transition:padding-left 0.2s linear 0s; 意思是：規定應用過渡的 CSS 屬性是padding-left,定義過渡效果花費的時間為0.2秒,規定過渡效果的時間曲線為linear，linear表示以相同速度開始至結束的過渡效果，規定過渡效果從0s開始。

我們給em的父元素增加點擊事件，點擊後增加或去掉"tipOpen“樣式，.tipOpen{ background-color: #FF777B;padding-left: 19px;}

3 完整的代碼如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <!--讓viewport的寬度等於物理裝置上的真實解析度，初始縮放比例為1：1，不允許使用者縮放-->
    <title>css實現移動端訊息提醒按鈕</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box; /*通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。*/
        }
        body {
            width: 100%;
            height: 100%;
            background:linear-gradient(37deg, #FD465F 0%, #FF8080 100%);
        }
        li {
            list-style-type: none;
        }
        ::-moz-selection {
            text-shadow: none;
        }

        ::selection {
            text-shadow: none;
        }
        .setting_sort{
            padding-top: 20px;
            padding-bottom: 20px;
        }
        .setting_sort ul li{
            width: 290px; height: 65px;
            padding:15px 20px;
            margin: 0 auto 15px;
            border-radius: 15px;
            background-color: #fff;
        }
        .setting_sort ul li p:first-child{
            font-size: 14px;
            color: #F75B5B;
            margin-bottom: 5px;
        }
        .setting_sort ul li p:last-child{
            font-size: 12px;
            color: #F75B5B;
            filter:alpha(opacity=50);
            opacity:0.5;
        }
        .setting_sort_left{
            width: 180px;
            float: left;
        }
        .setting_sort_right{
            width: 50px;
            float: right;
        }
        .setting_btn{
            width: 50px; height: 30px;
            padding: 1px;
            border-radius: 60px;
            background-color: #999;
            transition:padding-left 0.2s linear;
            -webkit-transition:padding-left 0.2s linear;
        }
        .setting_circle{
            display: inline-block;
            width: 30px; height: 28px;
            border-radius: 40px;
            background: #fff;
        }
        .tipOpen{
            background-color: #FF777B;
            padding-left: 19px;
        }
    </style>
</head>
<body>
    <div class="setting_sort">
        <ul>
            <li>
                <div class="setting_sort_left">
                    <p>優惠活動提醒</p><p>最新優活動提醒</p>
                </div>
                <div class="setting_sort_right">
                    <div class="setting_btn">
                        <em class="setting_circle"></em>
                    </div>
                </div>
            </li>
            <li>
                <div class="setting_sort_left">
                    <p>系統訊息提醒</p><p>接受系統提示資訊</p>
                </div>
                <div class="setting_sort_right">
                    <div class="setting_btn">
                        <em class="setting_circle"></em>
                    </div>
                </div>
            </li>
            <li>
                <div class="setting_sort_left">
                    <p>物流訊息提醒</p><p>物流有變化時提醒</p>
                </div>
                <div class="setting_sort_right">
                    <div class="setting_btn tipOpen">
                        <em class="setting_circle"></em>
                    </div>
                </div>
            </li>
            <li>
                <div class="setting_sort_left">
                    <p>收藏商品降價提醒</p><p>當低於商品收藏時的價格立馬提醒</p>
                </div>
                <div class="setting_sort_right">
                    <div class="setting_btn tipOpen">
                        <em class="setting_circle"></em>
                    </div>
                </div>
            </li>
        </ul>
    </div>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
    $(‘.setting_btn‘).on(‘click‘,function(){
        var $this =$(this);
        $this.toggleClass(‘tipOpen‘);
    })
</script>
</body>
</html>


PS：到此第一篇部落格完成，如有錯誤的地方請指出，很願意一起學習、共同進步。

css實現移動端訊息提醒按鈕

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

css實現移動端訊息提醒按鈕

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support