还是以上面的 DEMO 作为示例,我们将repeating-linear-gradient生成的重复条纹背景的颜色、粗细、角度随机化、采用的混合模式也是随机选取,然后利用 CSS-Doodle,快速随机的创建各种基于此规则的图案: 可以点进去尝试一下,点击鼠标即可随机生成不同的效果: CodePen Demo -- CSS Doodle - CSS MIX-BLEND-MODE Background ...
我们这里核心的就是借助了linear-gradient(-4deg, transparent, transparent 25%, #ffb6ff, #b344ff,transparent 75%, transparent)这个渐变背景,实现一个从透明到渐变色到透明的渐变背景,配合了background-clip: text。 再利用动画,控制背景的background-position,这样一个文字渐现再渐隐的文字动画就实现了: CodeP...
background: linear-gradient(-60deg, $colorMain, $colorSub); } 1. 2. 3. 4. 5. 6. 7. 我们的 mask 如下: { mask: repeating-linear-gradient(30deg, #000 0, #000 10px, transparent 10px, transparent 45px), repeating-linear-gradient(60deg, #000 0, #000 10px, transparent 10px, tr...
看看效果,通过background-clip: text的遮罩裁剪,我们将background: linear-gradient(90deg, #fc0, #fc0)背景色作用给了文字,同时利用color: transparent让文字展示出背景色的色值: CodePen Demo -- background-size 与 background-position 以及 background-clip 实现文字逐个渐现 当然,稍微对上述代码变形,我们就...
CodePen Demo - Repeating-linear-gradient background & mix-blend-mode 借助CSS-Doodle 随机生成图案 到这,就不得不引出一个写 CSS 的神器 --CSS-Doodle,我在其他非常多文章中也多次提到过 CSS-doodle,简单而言,它是一个基于 Web-Component 的库。允许我们快速的创建基于 CSS Grid 布局的页面,并且提供各种便...
Codepen - Explaining gradient angleshttps://codepen.io/thebabydino/full/qgoBL MDN - 渐变: https://developer.mozilla.org/en-US/docs/Web/CSS/gradient https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient() https://developer.mozilla.org/en-US/docs/Web/CSS/g...
&:hover { color: white; } &:hover::after { top: 0; left: 0; width: 100%; transition: width .5s, left .5s; } } .btn { background-color: deeppink; background-image: linear-gradient(white, white); background-repeat: no-repeat; background-size...
看看效果,通过background-clip: text的遮罩裁剪,我们将background: linear-gradient(90deg, #fc0, #fc0)背景色作用给了文字,同时利用color: transparent让文字展示出背景色的色值: CodePen Demo -- background-size 与 background-position 以及 background-clip 实现文字逐个渐现 ...
https://codepen.io/xgqfrms/full/JQeqXQ 1. linear-gradient https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient https://codepen.io/xgqfrms/pen/WqEBLB https://codepen.io/xgqfrms/pen/bPrymz ...
a{background:linear-gradient(90deg,#0cc 50%,transparent 50%,transparent 1px);background-size:10px 2px;background-repeat:repeat-x;background-position:100% 100%;} CodePen Demo -- 使用 background 模拟下划线与虚线下划线 当然这个是最基础的,巧妙的运用background的各种属性,我们实现各种有意思的效果...