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

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

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

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

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

https://scrimba.com/c/crvq8hq

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

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

定義 dom，一個(gè)容器中包含 4 個(gè)子元素，每個(gè)子元素的內(nèi)容就是一堆斜線：

    
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

居中顯示：

body {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

定義容器尺寸：

.frame {
    width: 100vmin;
    height: 100vmin;
    background-color: whitesmoke;
}

隱藏超出容器的內(nèi)容：

.wall {
    overflow: hidden;
}

把 4 個(gè)元素向四個(gè)方向旋轉(zhuǎn)，互相垂直：

.wall {
    transform-origin: 0 0;
}

.wall.top {
    transform: rotate(0deg);
}

.wall.right {
    transform: rotate(90deg);
}

.wall.bottom {
    transform: rotate(180deg);
}

.wall.left {
    transform: rotate(270deg);
}

定位它們，形成一個(gè)正方形：

.frame {
    position: relative;
}

.wall {
    position: absolute;
    width: 100%;
}

.wall.top {
    top: 0;
    left: 0;
}

.wall.right {
    top: 0;
    left: 100%;
}

.wall.bottom {
    top: 100%;
    left: 100%;
}

.wall.left {
    top: 100%;
    left: 0;
}

對(duì) 4 個(gè)元素進(jìn)行 3d 旋轉(zhuǎn)：

.frame {
    perspective: 40vmin;
}

.wall.top {
    transform: rotate(0deg) rotateX(-90deg);
}

.wall.right {
    transform: rotate(90deg) rotateX(-90deg);
}

.wall.bottom {
    transform: rotate(180deg) rotateX(-90deg);
}

.wall.left {
    transform: rotate(270deg) rotateX(-90deg);
}

把斜線加粗、放大：

.wall {
    font-size: 75vmin;
    font-weight: bold;
}

最后，把 dom 中的斜線用 標(biāo)簽包圍起來(lái)：

    
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

大功告成！

云服務(wù)器 GPU云服務(wù)器 網(wǎng)頁(yè)的前端和后端 視頻演示 前端實(shí)戰(zhàn) 前端能做什么

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/113350.html

• 上一篇：如何優(yōu)雅的使用vue+Dcloud（Hbuild）開發(fā)混合app
• 下一篇：前端基礎(chǔ)之CSS（1）

相關(guān)文章

• 前端每日實(shí)戰(zhàn)：29# 視頻演示如何不用 transition 和 animation 也能做網(wǎng)頁(yè)動(dòng)畫

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

  soasme 2019-08-02 10:30 評(píng)論0 收藏0

• 前端每日實(shí)戰(zhàn) 2018 年 5 月份項(xiàng)目匯總（共 30 個(gè)項(xiàng)目）

  摘要：過往項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份發(fā)布的項(xiàng)目前端每日實(shí)戰(zhàn)專欄每天分解一個(gè)前端項(xiàng)目，用視頻記錄編碼過程，再配合詳細(xì)的代碼解讀，是學(xué)習(xí)前端開發(fā)的活的參考書頻演示如何用純創(chuàng)作一種按鈕被瞄準(zhǔn)的交互特效視頻演示如何用純創(chuàng)作一個(gè)同心圓弧旋轉(zhuǎn)特效視頻演 過往項(xiàng)目 2018 年 4 月份項(xiàng)目匯總（共 8 個(gè)項(xiàng)目） 2018 年 5 月份發(fā)布的項(xiàng)目 《前端每日實(shí)戰(zhàn)》專欄每天分解一個(gè)前端項(xiàng)目，用視頻記錄...

  array_huang 2019-08-22 18:25 評(píng)論0 收藏0

• 前端每日實(shí)戰(zhàn) 2018 年 5 月份項(xiàng)目匯總（共 30 個(gè)項(xiàng)目）

  摘要：過往項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份發(fā)布的項(xiàng)目前端每日實(shí)戰(zhàn)專欄每天分解一個(gè)前端項(xiàng)目，用視頻記錄編碼過程，再配合詳細(xì)的代碼解讀，是學(xué)習(xí)前端開發(fā)的活的參考書頻演示如何用純創(chuàng)作一種按鈕被瞄準(zhǔn)的交互特效視頻演示如何用純創(chuàng)作一個(gè)同心圓弧旋轉(zhuǎn)特效視頻演 過往項(xiàng)目 2018 年 4 月份項(xiàng)目匯總（共 8 個(gè)項(xiàng)目） 2018 年 5 月份發(fā)布的項(xiàng)目 《前端每日實(shí)戰(zhàn)》專欄每天分解一個(gè)前端項(xiàng)目，用視頻記錄...

  liaoyg8023 2019-08-30 15:54 評(píng)論0 收藏0

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

登陸后可評(píng)論

0條評(píng)論

MAX_zuo

男|高級(jí)講師

我要關(guān)注 我要私信

TA的文章

閱讀更多

• 易探云：棗莊高防云服務(wù)器促銷,4核4G內(nèi)存/30M帶寬/100G防御,130元/月

  閱讀 3640·2021-11-23 10:10

• 你可能不了解的動(dòng)畫神器之requestAnimationFrame及其兼容寫法

  閱讀 3403·2019-08-30 14:03

• CSS實(shí)用技巧總結(jié)一

  閱讀 2141·2019-08-30 13:09

• 前端每日實(shí)戰(zhàn)：29# 視頻演示如何不用 transition 和 animation 也能做網(wǎng)頁(yè)動(dòng)畫

  閱讀 3464·2019-08-29 15:29

• 移動(dòng)端h5開發(fā)相關(guān)內(nèi)容總結(jié)（四）

  閱讀 1606·2019-08-29 11:23

• CSS清除浮動(dòng)float的三種方法總結(jié)，為什么清浮動(dòng)？浮動(dòng)會(huì)有那些影響？

  閱讀 2071·2019-08-28 18:28

• Webpack Loader 高手進(jìn)階(一)

  閱讀 2915·2019-08-26 13:34

• 用Vue搭建一個(gè)應(yīng)用盒子（一）：todo-list

  閱讀 2218·2019-08-26 11:32

最新活動(dòng)

閱讀需要支付1元查看

支付并查看

<form id="9v8fn"></form>

<pre id="9v8fn"><sup id="9v8fn"><nobr id="9v8fn"></nobr></sup></pre>

<abbr id="9v8fn"></abbr>

<