CSS揭秘之《偽隨機背景》

Cympros 發布于2019-08-20 19:08 / 773人閱讀

摘要：之前說的條紋全部都是有規律的條紋，如果實現隨機寬度的垂直條紋呢其實原理寬度盡量選擇質數，因為質數跟任何其它數字都是相對質數因為最頂層貼片的重復規律最容易被察覺它沒有被任何東西遮擋，我們應該把平鋪間距最大的貼片安排在最頂層這里的都是

之前說的條紋全部都是有規律的條紋，如果實現隨機寬度的垂直條紋呢
其實原理
a)寬度盡量選擇質數，因為質數跟任何其它數字都是相對質數
b)因為最頂層貼片的重復規律最容易被察覺（它沒有被任何東西遮擋），我們應該把平鋪間距最大的貼片安排在最頂層

background: hsl(20, 40%, 90%);
background-image:
linear-gradient(90deg, #fb3 11px, transparent 0),
linear-gradient(90deg, #ab4 23px, transparent 0),
linear-gradient(90deg, #655 41px, transparent 0);
background-size: 41px 100%, 61px 100%, 83px 100%;

這里的11 23 41都是質數，所以按照原理也就是說112341=207 583 超出207 583后這個背景會再重復一遍，可是誰的屏幕會比這個數字大呢，所以實現的效果就是一個看起來隨機的背景條紋
如下所示：

具體效果見鏈接

同樣利用這個原理可做一個隨機效果的loading

@keyframes spin {
            to {
                transform: rotate(1turn);
            }
        }

        @keyframes radius {
            50% {
                border-radius: 50%;
            }
        }

        @keyframes color {
            33% {
                color: orange;
            }
            66% {
                color: deeppink
            }
        }

        @keyframes width {
            50% {
                border-width: .3em;
            }
        }

        .loading:before {
            content: "";
            display: block;
            width: 4em;
            height: 4em;
            margin: 0 auto 1em;
            border: 1.5em solid;
            color: yellowgreen;
            box-sizing: border-box;
            /* 主要關鍵點在這里  1 7 1.1 1.3都質數，所以這個動畫效果你看不出規律 */
            animation: 1s spin, .7s radius, 1.1s color, 1.3s width;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
        }

        .loading {
            margin: auto;
        }

        body {
            margin: 0;
            display: flex;
            min-height: 100vh;
            text-align: center;
            background: #655;
            color: white;
        }

Loading…

具體效果見鏈接

總結：這個方法不僅適用于背景，還可以用于其他涉及有規律重復的情況。

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

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

CSS揭秘之《偽隨機背景》

摘要：之前說的條紋全部都是有規律的條紋，如果實現隨機寬度的垂直條紋呢其實原理寬度盡量選擇質數，因為質數跟任何其它數字都是相對質數因為最頂層貼片的重復規律最容易被察覺它沒有被任何東西遮擋，我們應該把平鋪間距最大的貼片安排在最頂層這里的都是之前說的條紋全部都是有規律的條紋，如果實現隨機寬度的垂直條紋呢其實原理a)寬度盡量選擇質數，因為質數跟任何其它數字都是相對質數b)因為最頂層貼片的重復規律最...

happen 2019-08-29 13:20 評論0 收藏0
《css揭秘》讀書筆記

摘要：但是根據本司機兩年的開發經驗來看，在實際開發中很少來使用這個單位。由于基本都是一些實用性的技巧，我就不一一列舉了，建議自讀。很好很實用的一本書。第一章引言 css編碼技巧在引言中，作者提到使用em與inherit來實現css代碼的簡潔與可維護性。但是根據本司機兩年的開發經驗來看，在實際開發中很少來使用em這個單位。如何用以及何時去使用，還是要根據實際開發需求來定吧，畢竟這兩個屬性...

xiguadada 2019-08-29 16:28 評論0 收藏0
css-secrets (css揭秘) 知識點目錄，值得深入學習！

摘要：通過模糊來弱化背景和滾動提示使用兩層背景，控制交互式的圖片對比控件范圍輸入控件方式書中有很詳細的解答提醒自己要回顧。 1. 第一章 css編碼技巧第二章邊框與背景半透明邊框 hsla 多重邊框 box-shadow outline 靈活的背景定位 background-position css3該屬性可以指定偏移量，////bac...

DevWiki 2019-08-30 15:56 評論0 收藏0
《css揭秘》下（偽元素，文字背景，垂直居中技巧，文字環繞）

摘要：本篇主要記錄揭秘一書中后面幾章的常用技巧。文字環繞的重點在于即文字圍繞著路徑來顯示。本篇主要記錄《CSS3揭秘》一書中后面幾章的常用技巧。 1、偽元素換行先看下HTML代碼，如下當愛的故事剩聽說我找不到你單純的面孔默認顯示效果：一般情況下，我們喜歡直接在第一個span元素后面加個換行符，但是它對于語義來說并不友好,或者將第一...

longmon 2019-04-23 13:14 評論0 收藏0