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

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

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

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

請用 chrome, safari, edge 打開觀看。

https://scrimba.com/c/crvq8hq

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

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

定義 dom，一個容器中包含 4 個子元素，每個子元素的內(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 個元素向四個方向旋轉(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);
}

定位它們，形成一個正方形：

.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;
}

對 4 個元素進行 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 中的斜線用 標簽包圍起來：

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

大功告成！

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

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

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

• 上一篇：每個 JavaScript 工程師都應(yīng)當知道的 10 個面試題
• 下一篇：HTML5 Canvas（實戰(zhàn)：繪制餅圖2 Tooltip）

相關(guān)文章

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

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

  MAX_zuo 2019-08-29 15:29 評論0 收藏0

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

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

  array_huang 2019-08-22 18:25 評論0 收藏0

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

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

  liaoyg8023 2019-08-30 15:54 評論0 收藏0

發(fā)表評論

登陸后可評論

0條評論

soasme

男|高級講師

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

TA的文章

閱讀更多

• tensorflow

  閱讀 3577·2023-04-26 02:05

• GDI繪制Winform工作流組件、具有獨立圖層的增刪處理、防PPT效果

  閱讀 2021·2021-11-19 11:30

• 外貿(mào)網(wǎng)站如何選擇服務(wù)器?外貿(mào)網(wǎng)站服務(wù)器價格多少錢?

  閱讀 4231·2021-09-30 09:59

• 新型硅陽極電池走向市場，有望改變電子設(shè)備和電動汽車市場

  閱讀 3184·2021-09-10 10:51

• 安科視頻監(jiān)控產(chǎn)品中的遠程代碼執(zhí)行漏洞允許黑客入侵設(shè)備

  閱讀 2614·2021-09-01 10:30

• raksmart：韓國獨立服務(wù)器測評（大陸優(yōu)化線路）

  閱讀 1496·2021-08-11 11:20

• css3 動畫（二）貝塞爾曲線

  閱讀 2626·2019-08-30 15:54

• CSS雙飛翼布局

  閱讀 572·2019-08-30 10:49

最新活動

閱讀需要支付1元查看

支付并查看

<ul id="ccqee"></ul>

<