CSS揭秘之《伪随机背景》

happen 发布于2019-08-29 13:20 / 2659人阅读

摘要：之前说的条纹全部都是有规律的条纹，如果实现随机宽度的垂直条纹呢其实原理宽度尽量选择质数，因为质数跟任何其它数字都是相对质数因为最顶层贴片的重复规律最容易被察觉它没有被任何东西遮挡，我们应该把平铺间距最大的贴片安排在最顶层这里的都是

之前说的条纹全部都是有规律的条纹，如果实现随机宽度的垂直条纹呢
其实原理
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…

具体效果见链接

总结：这个方法不仅适用于背景，还可以用于其他涉及有规律重复的情况。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112527.html

CSS揭秘之《伪随机背景》

摘要：之前说的条纹全部都是有规律的条纹，如果实现随机宽度的垂直条纹呢其实原理宽度尽量选择质数，因为质数跟任何其它数字都是相对质数因为最顶层贴片的重复规律最容易被察觉它没有被任何东西遮挡，我们应该把平铺间距最大的贴片安排在最顶层这里的都是之前说的条纹全部都是有规律的条纹，如果实现随机宽度的垂直条纹呢其实原理a)宽度尽量选择质数，因为质数跟任何其它数字都是相对质数b)因为最顶层贴片的重复规律最...

Cympros 2019-08-20 19:08 评论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