CSS揭秘之《偽隨機背景》

happen 發(fā)布于2019-08-29 13:20 / 2686人閱讀

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

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

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都是質(zhì)數(shù)，所以按照原理也就是說112341=207 583 超出207 583后這個背景會再重復一遍，可是誰的屏幕會比這個數(shù)字大呢，所以實現(xiàn)的效果就是一個看起來隨機的背景條紋
如下所示：

具體效果見鏈接

同樣利用這個原理可做一個隨機效果的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都質(zhì)數(shù)，所以這個動畫效果你看不出規(guī)律 */
            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…

具體效果見鏈接

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

GPU云服務器云服務器 java 偽隨機算法隨機背景顏色偽隨機數(shù)生成器c語言實現(xiàn)隨機背景色js

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/112527.html

CSS揭秘之《偽隨機背景》

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

Cympros 2019-08-20 19:08 評論0 收藏0
《css揭秘》讀書筆記

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

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揭秘》下（偽元素，文字背景，垂直居中技巧，文字環(huán)繞）

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

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