前端开发

background-clip背景裁剪实现嵌套渐变背景

2019-09-06171次阅读css3
背景嵌套有很多方法可以实现这种效果,比如使用border边框、outline和box-shadow或它们的任意组合实现。但嵌套的渐变背景估计很难实现,你妨试试background-clip背景裁剪
前端开发

css3显示器故障形式的文本

2019-09-06161次阅读css3
原文字和它的两个伪元素是相互堆叠在一起的。每一帧都使用transform: translate属性来移动元素或者clip裁切实现。
前端开发

提示滚动进度的指示器例如阅读进度

2019-09-05157次阅读css3
给滚动的盒子添加一个从左下到到右上角的线性渐变,同时添加一个伪元素,把多出来的部分遮住。伪元素使用calc进行运算,减去了100vh,也就是减去一个屏幕的高度,这样渐变刚好在滑动到底部的时候与右上角贴合。而+5px则是滚动进度条的高度,预留出5px的高度。
前端开发

使用animation-delay保留动画起始帧

2019-09-05139次阅读css3
CSS3 Animation中的animation-delay属性定义动画什么时候开始。值单位可以是秒(s)或毫秒(ms)。 允许负值,-2s 使动画马上开始,但跳过 2 秒进入动画。
前端开发

CSS3 Animation属性大全

2019-09-04148次阅读css3
目前animation有下面9种属性,其中第一个是后面属性的简写形式。
前端开发

使用pointer-events禁用事件触发

2019-09-0391次阅读css3
pointer-events:none使元素永远不会成为鼠标事件的target。但是,当其后代元素的pointer-events属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。
前端开发

使用attr()抓取data-*

2019-09-0387次阅读css3
在标签上自定义属性data-*,通过attr()获取其内容赋值到content上
前端开发

使用transform描绘1px边框

2019-09-03103次阅读css3
分辨率比较低的屏幕下显示1px的边框会显得模糊,通过::before或::after和transform模拟细腻的1px边框
前端开发

使用text-align-last对齐两端文本

2019-09-0388次阅读css3
CSS属性text-align-last描述的是一段文本中最后一行在被强制换行之前的对齐规则。text-align-last:justify轻松实现文本两端对齐
前端开发

使用vw定制rem自适应布局

2019-09-03117次阅读css3
移动端使用rem布局需要通过JS设置不同屏幕宽高比的font-size,结合vw单位和calc()可脱离JS的控制。