horizontal-tb：默认值，表示水平排版，从上到下。 vertical-lr：表示垂直排版，从左到右。 vertical-rl：表示垂直排版，从右到左。 至此，我们数字滚动效果已经初步实现了，在下一节中我们将会逐步完善此效果，以满足业务需求。

说到div的形状，基本上想到的都是圆形或者方形，这两种形状其实也已经符合了前端95%的应用场景(95%的数据从哪得来的 - - !)，但是作为一个不愿随波逐流的程序员，就是要搞事情。 (图片来源于网络)果然限制我们创造的不是想象力，而是兼容性。支持浏览器的版本偏高，如果你是做正…

最近，我从 Grover网站上发现以一个好玩儿的悬停动画，也有了些自己的灵感。这个动画是将鼠标移动到订阅按钮上移动光标会显示相应的彩色渐变。这个想法很简单，但是它能使这个按钮脱颖而出，人们一下子就注意到它了，增加了点击的概率。 怎样才能达到这个效果，使我们的网站脱颖而出呢？其实…

不久之前Firefox和Safari浏览器已经开始支持类似Photoshop的混合模式，但是在Chrome和Opera浏览器中需要添加前缀。举个栗子： 现在，你甚至可以在边框中使用渐变。 具体的例子可以看这里，或者看这里使用的是background-clip和backgroun…

大家都知道css有calc()，可否知道:root{}和var()？下面我就给大家介绍下他们：1、变量的声明 :root{}声明变量的时候，变量名前面要加两根连词线（--）。上面代码中，body选择器

两个子元素 div 实现半透明的圆形，设置绝对定位重叠在一起，然后设置相同的动画通过不同的延迟时间交替放大缩小。 在类名为 spinner 元素下有五个 div 实现的长方形元素，设置Y轴的缩放，通过不同的延迟时间来达到依次变化的效果。 两个子元素实现白色的方块，添加动画属性，…

有时候我们希望一段文字可以逐字符显现，模拟出打字的效果。我们尝试用 CSS 来说实现这种效果。 这个动画是连贯的，不是逐字出现的。 针对第一个问题，我们可以用 steps() 进行处理。 针对第二个问题，我们可以用 ch 这个css单位进行缓解。 ch 它表示的是 “0” 字形…

收集于平时常用但易忘的CSS实现方法，如有遗漏或补充，还请指正！解决inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移超出部分显示省略号css实现不换行、自动换

标题开个玩笑，实际上CSS3有许多亮眼的特性，比如阴影shadow、动画animation、形变transform、渐变gradient、滤镜filter等，合理运用这些特性，可以实现许多高大上的效果。如果觉得有用请点个赞或者收藏。 利用border-color支持transp…