亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

CSS揭秘之《偽隨機(jī)背景》

happen / 2752人閱讀

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

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

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后這個(gè)背景會(huì)再重復(fù)一遍，可是誰的屏幕會(huì)比這個(gè)數(shù)字大呢，所以實(shí)現(xiàn)的效果就是一個(gè)看起來隨機(jī)的背景條紋
如下所示：

具體效果見鏈接

同樣利用這個(gè)原理可做一個(gè)隨機(jī)效果的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;
            /* 主要關(guān)鍵點(diǎn)在這里  1 7 1.1 1.3都質(zhì)數(shù)，所以這個(gè)動(dòng)畫效果你看不出規(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é)：這個(gè)方法不僅適用于背景， 還可以用于其他涉及有規(guī)律重復(fù)的情況。

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

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

相關(guān)文章

  • CSS揭秘之《偽隨機(jī)背景》

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

    Cympros 評論0 收藏0

  • 《css揭秘》讀書筆記

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

    xiguadada 評論0 收藏0

  • css-secrets (css揭秘) 知識(shí)點(diǎn)目錄，值得深入學(xué)習(xí)！

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

    DevWiki 評論0 收藏0

  • 《css揭秘》下（偽元素，文字背景，垂直居中技巧，文字環(huán)繞）

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

    longmon 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<