background-color background-image background-attachment background-repeat background-position 文本常用属性:color text-align text-decoration text-indent verticla-align line-height 字体常用属性:font font-family font-size font-style font-weight
text文本属性 1.颜色color color:red 2.文本缩进 text-indent 属性值 数字+px:text-indent:10px; 3.文本修饰 text-decoration 属性值underline下划线 none默认值去下划线 overline上划线 4.文本的对齐方式 text-align 属性值left right center justify(两端对齐) width宽 height高 属性值都是像素 任何一个标签默认...
hover 状态下和非 hover 状态下的transition-duration是不一样的,是因为取消 hover 过程中,动画消失过程的时间通常是要求更短的; 借助了 SASS 的循环@for $i from 1 to 21 {}递增给每个span和它的伪元素添加了递增的transition-delay; 最终,我们可以得到如下的结果: 完整的代码,你可以猛戳 --CSS 灵感 - 利...
本文的主角是 background-clip: text; ,当然现在只有 chrome 支持,所以通常想使用它,需要 -webkit-background-clip:text;。 何为-webkit-background-clip:text 使用了这个属性的意思是,以区块内的文字作为裁剪区域向外裁剪,文字的背景即为区块的背景,文字之外的区域都将被裁剪掉。 看个最简单的 Demo ,没有使用...
这个文字的 hover 出现效果,看似简单,其实想要完全实现它,仅仅依靠 CSS 是非常复杂的,其中一个比较难的地方在于 --如何让一个效果,逐渐作用给整段文字中的部分,而不是一次将整个效果赋予整段文本。 利用background 实现文字的下划线效果 到这里,我想起了之前在这篇文章中 -- CSS 文字装饰 text-decoration & text...
这个文字的 hover 出现效果,看似简单,其实想要完全实现它,仅仅依靠CSS是非常复杂的,其中一个比较难的地方在于 --如何让一个效果,逐渐作用给整段文字中的部分,而不是一次将整个效果赋予整段文本。 利用background 实现文字的下划线效果 到这里,我想起了之前在这篇文章中 --CSS 文字装饰 text-decoration & text-emp...
再演示其中一个用法,利用两个 div 层一起使用,设置相同的背景图片,父 div 层设置图片模糊,其中子 div 设置 -webkit-background-clip:text,然后利用 animation 移动子 div ,去窥探图片。 效果如下(请在 Chrome 内核浏览器下观看): CodePen Demo 其实还有很多有趣的用法,只要敢想并动手实践,会发现 CSS 真的乐...
-- shine Text && background-clip:https://codepen.io/Chokcoco/pen/OJbEOmb[9]CodePen Demo -- background-clip:text && 按钮填充效果:https://codepen.io/Chokcoco/pen/MmoNoq[10]CodePen Demo -- background-clip: text 遮罩图片:https://codepen.io/Chokcoco/pen/LyNmQv[11]Github -- iCSS:...
background-clip: border-box || padding-box || context-box || no-clip || text (1)border-box:此值为默认值,背景从border区域向外裁剪,也就是超出部分将被裁剪掉; (2)padding-box:背景从padding区域向外裁剪,超过padding区域的背景将被裁剪掉; ...
本文的主角是 background-clip: text; ,当然现在只有 chrome 支持,所以通常想使用它,需要 -webkit-background-clip:text;。 何为-webkit-background-clip:text 使用了这个属性的意思是,以区块内的文字作为裁剪区域向外裁剪,文字的背景即为区块的背景,文字之外的区域都将被裁剪掉。 看个最简单的 Demo ,没有使用...