国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

前端每日實(shí)戰(zhàn):147# 視頻演示如何用純 CSS 創(chuàng)作透視按鈕的懸停特效

cppprimer / 1704人閱讀

摘要:效果預(yù)覽按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁(yè)面預(yù)覽,點(diǎn)擊鏈接可以全屏預(yù)覽。可交互視頻此視頻是可以交互的,你可以隨時(shí)暫停視頻,編輯視頻中的代碼。

效果預(yù)覽

按下右側(cè)的“點(diǎn)擊預(yù)覽”按鈕可以在當(dāng)前頁(yè)面預(yù)覽,點(diǎn)擊鏈接可以全屏預(yù)覽。

https://codepen.io/comehope/pen/qJEdKb

可交互視頻

此視頻是可以交互的,你可以隨時(shí)暫停視頻,編輯視頻中的代碼。

請(qǐng)用 chrome, safari, edge 打開(kāi)觀看。

https://scrimba.com/p/pEgDAM/cEJRKud

源代碼下載

每日前端實(shí)戰(zhàn)系列的全部源代碼請(qǐng)從 github 下載:

https://github.com/comehope/front-end-daily-challenges

代碼解讀

定義 dom,容器是一個(gè)無(wú)序列表,包含 4 個(gè)元素,代表 4 個(gè)按鈕:

  • home
  • products
  • services
  • contact

居中顯示:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: cornsilk;
}

去掉列表項(xiàng)前面的符號(hào):

ul {
    padding: 0;
    list-style-type: none;
}

設(shè)置按鈕的邊框和背景的樣式,背景采用漸變色,但漸變的方向依次交替:

ul li {
    box-sizing: border-box;
    width: 15em;
    height: 3em;
    font-size: 20px;
    border-radius: 0.5em;
    margin: 0.5em;
    box-shadow: 0 0 1em rgba(0,0,0,0.2);
}

ul li:nth-child(odd) {
    background: linear-gradient(to right, orange, tomato);
}

ul li:nth-child(even) {
    background: linear-gradient(to left, orange, tomato);
}

設(shè)置按鈕上文字的樣式,依次交替居左或居右:

ul li {
    color: white;
    font-family: sans-serif;
    text-transform: capitalize;
    line-height: 3em;
}

ul li:nth-child(odd) {
    text-align: left;
    padding-left: 10%;
}

ul li:nth-child(even) {
    text-align: right;
    padding-right: 10%;
}

設(shè)置按鈕的透視效果,依次交替向左旋轉(zhuǎn)和向右旋轉(zhuǎn),此時(shí)透視的距離是 500px,注意 perspective() 函數(shù)和 rotateY() 函數(shù)的順序不能寫(xiě)反:

ul li:nth-child(odd) {
    transform: perspective(500px) rotateY(45deg);
}

ul li:nth-child(even) {
    transform: perspective(500px) rotateY(-45deg);
}

為按鈕增加懸停效果,使懸停時(shí)的透視距離變短為 200px,透視距離越短,旋轉(zhuǎn)的幅度看起來(lái)就越大:

ul li:nth-child(odd):hover {
    transform: perspective(200px) rotateY(45deg);
    padding-left: 5%;
}

ul li:nth-child(even):hover {
    transform: perspective(200px) rotateY(-45deg);
    padding-right: 5%;
}

最后,設(shè)置一個(gè)緩動(dòng)時(shí)間,使效果轉(zhuǎn)換變得平滑:

ul li {
    transition: 0.3s;
    cursor: pointer;
}

大功告成!

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

轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/53009.html

相關(guān)文章

  • 前端每日實(shí)戰(zhàn)147# 視頻演示何用 CSS 創(chuàng)作透視按鈕懸停特效

    摘要:效果預(yù)覽按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁(yè)面預(yù)覽,點(diǎn)擊鏈接可以全屏預(yù)覽。可交互視頻此視頻是可以交互的,你可以隨時(shí)暫停視頻,編輯視頻中的代碼。 showImg(https://segmentfault.com/img/bVbhDnp?w=400&h=302); 效果預(yù)覽 按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁(yè)面預(yù)覽,點(diǎn)擊鏈接可以全屏預(yù)覽。 https://codepen.io/comehop...

    hikui 評(píng)論0 收藏0
  • 前端每日實(shí)戰(zhàn) 2018 年 9 月份項(xiàng)目匯總(共 26 個(gè)項(xiàng)目)

    摘要:過(guò)往項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份發(fā)布的項(xiàng)目前端每日實(shí)戰(zhàn)專欄每天分解一個(gè)前端項(xiàng)目,用視頻記錄編碼過(guò)程,再配合詳細(xì)的代碼解讀,是學(xué)習(xí)前端開(kāi)發(fā)的活的參考書(shū) 過(guò)往項(xiàng)目 2018 年 8 月份項(xiàng)目匯總(共 29 個(gè)項(xiàng)目) 2018 年 7 月份項(xiàng)目匯總(共 29 個(gè)項(xiàng)目) 2018 年 6 月份項(xiàng)目匯總(...

    lavnFan 評(píng)論0 收藏0
  • 前端每日實(shí)戰(zhàn) 2018 年 9 月份項(xiàng)目匯總(共 26 個(gè)項(xiàng)目)

    摘要:過(guò)往項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份發(fā)布的項(xiàng)目前端每日實(shí)戰(zhàn)專欄每天分解一個(gè)前端項(xiàng)目,用視頻記錄編碼過(guò)程,再配合詳細(xì)的代碼解讀,是學(xué)習(xí)前端開(kāi)發(fā)的活的參考書(shū) 過(guò)往項(xiàng)目 2018 年 8 月份項(xiàng)目匯總(共 29 個(gè)項(xiàng)目) 2018 年 7 月份項(xiàng)目匯總(共 29 個(gè)項(xiàng)目) 2018 年 6 月份項(xiàng)目匯總(...

    whatsns 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<