成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS中的一下小技巧2之CSS3動畫勾選運用

gaara / 530人閱讀

使用CSS3實現(xiàn)動畫勾選

　　相信大家在項目中會經(jīng)常遇到這種需求：勾選框?，F(xiàn)在用CSS3來實現(xiàn)一個動畫勾選，只需要一個標(biāo)簽即可完成：

　　這次需要用到CSS中偽類?after，這個小技巧也是很容易忘記的，所以決定記錄起來~

　　首先給標(biāo)簽加寬高加背景色：

<style>
    .check{
        width: 40px;
        height: 40px;
        background: palevioletred;
        position: relative;
        margin: 50px auto;
        border-radius: 5px;
        cursor: pointer;
    }
style>
<div class="check">div>

　　

　　接下來利用偽類給標(biāo)簽添加元素，同時水平垂直居中：

　　

<style>
    .check{
        width: 40px;
        height: 40px;
        background: palevioletred;
        position: relative;
        margin: 50px auto;
        border-radius: 5px;
        cursor: pointer;
    }
    .check:after{
        content: ";
        display: block;
        width: 14px;
        height: 10px;
        border: 3px solid #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -5px;
        margin-left: -7px;
    }
style>
<div class="check">div>

?

?

?

　　變成這樣：

　　

　　接下來去掉上邊框跟右邊框，同時將剩下的旋轉(zhuǎn)45°稍微調(diào)整上下左右的距離即可~

　　

<style>
    .check{
        width: 40px;
        height: 40px;
        background: palevioletred;
        position: relative;
        margin: 50px auto;
        border-radius: 5px;
        cursor: pointer;
    }
    .check:after{
        content: ";
        display: block;
        width: 14px;
        height: 10px;
        border: 3px solid #fff;
        border-width: 0 0 3px 3px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -8px;
        margin-left: -8px;
        transform: rotate(-45deg);
    }
style>
<div class="check">div>

　　

　　最終效果就出來啦~

　　我們還可以添加點擊事件，一開始不設(shè)置顏色跟偽類，點擊后添加一個class，給這個class添加偽類以及動畫效果：

　　

<style>
    .check{
        width: 40px;
        height: 40px;
        position: relative;
        margin: 50px auto;
        border: 1px solid #ffffd;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.25s;
    }
    .checkActive{
        background: palevioletred;
        border-color: palevioletred;
    }
    .checkActive:after{
        content: ";
        display: block;
        width: 14px;
        height: 10px;
        border: 3px solid #fff;
        border-width: 0 0 3px 3px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -8px;
        margin-left: -8px;
        transform: rotate(-45deg);
    }
style>
<div class="check">div>

　　這樣就完成啦！

　　

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/1186.html

相關(guān)文章

  • CSS中的一下小技巧1之CSS3三角形運用

    摘要：后來知道原來可以用實現(xiàn)三角形，可是用過一次后很容易忘記，所以想把這個小技巧記錄起來是如何實現(xiàn)三角形的呢答案是通過邊框，也就是屬性。使用CSS3實現(xiàn)三角形： 　　在前端頁面中有很多時候會遇到需要三角形圖案的時候，以前不知道可以用CSS3實現(xiàn)三角形的時候，一般都是叫UI把三角形圖案切出來。 　　后來知道原來可以用CSS3實現(xiàn)三角形，可是用過一次后很容易忘記，所以想把這個小技巧記錄起來~ 　　C...

    番茄西紅柿 評論0 收藏0

  • CSS相關(guān)文章

    摘要：如何用獲取虛擬鍵盤高度前端早讀課月號早讀文章由湯谷投稿分享。大殺器和把動畫轉(zhuǎn)換成原生動畫初來乍到，本文搬運自我月份在知乎發(fā)的文章。 前端面試之 CSS3 新特性 除了 HTML5 的新特性，CSS3 的新特性也是面試中經(jīng)常被問到的。 如何用 js 獲取虛擬鍵盤高度？-前端早讀課 9月7號早讀文章由@湯谷投稿分享。正文從這開始～ 這是一個存在很久的歷史問題了，對于這樣一個具有普遍性的問題...

    FrozenMap 評論0 收藏0

  • css相關(guān) - 收藏集 - 掘金

    摘要：在正式前端一些小細(xì)節(jié)前端掘金英文原文，翻譯未來的太讓人興奮了一方面，是全新的頁面布局方式另一方面，是酷炫的濾鏡顏色等視覺效果。老司機(jī)教你更好的進(jìn)行編程個技巧前端掘金并不總是容易處理。 CSS3 實現(xiàn)文字流光漸變動畫 - 前端 - 掘金來自百度前端技術(shù)學(xué)院的實踐任務(wù)：有趣的鼠標(biāo)懸浮模糊效果，參考：http://ife.baidu.com/course/d...，用CSS3實現(xiàn)了一下，順便...

    molyzzx 評論0 收藏0

  • CSS開發(fā)

    摘要：譯十六進(jìn)制顏色揭秘原文地址原文作者譯文出自掘金翻譯計劃本文永久鏈接教程入門篇關(guān)于是一款進(jìn)行柵格布局的輔助工具，它讓開發(fā)者擺脫了冗雜的數(shù)學(xué)計算，同時降低了樣式與結(jié)構(gòu)的耦合程度。 【譯】CSS 十六進(jìn)制顏色揭秘 原文地址：CSS Hex Colors Demystified 原文作者：Dave Gash 譯文出自：掘金翻譯計劃 本文永久鏈接：https://github.com/xitu/...

    warkiz 評論0 收藏0

  • 2017文章總結(jié)

    摘要：歡迎來我的個人站點性能優(yōu)化其他優(yōu)化瀏覽器關(guān)鍵渲染路徑開啟性能優(yōu)化之旅高性能滾動及頁面渲染優(yōu)化理論寫法對壓縮率的影響唯快不破應(yīng)用的個優(yōu)化步驟進(jìn)階鵝廠大神用直出實現(xiàn)網(wǎng)頁瞬開緩存網(wǎng)頁性能管理詳解寫給后端程序員的緩存原理介紹年底補(bǔ)課緩存機(jī)制優(yōu)化動 歡迎來我的個人站點 性能優(yōu)化 其他 優(yōu)化瀏覽器關(guān)鍵渲染路徑 - 開啟性能優(yōu)化之旅 高性能滾動 scroll 及頁面渲染優(yōu)化 理論 | HTML寫法...

    dailybird 評論0 收藏0

發(fā)表評論

0條評論

gaara

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<