摘要：效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。可交互視頻教程此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。

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

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

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

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

https://scrimba.com/c/crvq8hq

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

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

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

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

居中顯示：

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

定義容器尺寸：

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

隱藏超出容器的內容：

.wall {
    overflow: hidden;
}

把 4 個元素向四個方向旋轉，互相垂直：

.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 旋轉：

.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 中的斜線用 標簽包圍起來：

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

大功告成！

GPU云服務器 云服務器 網頁的前端和后端 視頻演示 前端實戰 前端能做什么

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113350.html

• 上一篇：如何優雅的使用vue+Dcloud（Hbuild）開發混合app
• 下一篇：前端基礎之CSS（1）

相關文章

• 前端每日實戰：29# 視頻演示如何不用 transition 和 animation 也能做網頁動畫

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

  soasme 2019-08-02 10:30 評論0 收藏0

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

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

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

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

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

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

發表評論

登陸后可評論

0條評論

MAX_zuo

男|高級講師

我要關注 我要私信

TA的文章

閱讀更多

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

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

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

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

• CSS實用技巧總結一

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

• 前端每日實戰：29# 視頻演示如何不用 transition 和 animation 也能做網頁動畫

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

• 移動端h5開發相關內容總結（四）

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

• CSS清除浮動float的三種方法總結，為什么清浮動？浮動會有那些影響？

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

• Webpack Loader 高手進階(一)

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

• 用Vue搭建一個應用盒子（一）：todo-list

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

最新活動

閱讀需要支付1元查看

支付并查看

<