21-04-16 16:23:51
写CSS的常用套路(兄弟选择符定制表单元素 )
提示：这里最好将input作为label的子元素，这样用户点击label时就能传到input上默认的input太丑怎么办？那就把它先抹掉，用appearance: none或opacity: 0都可以然后，利用兄弟选... [阅读更多]
21-04-16 16:18:38
写CSS的常用套路(overflow障眼法)
之前有做过闪光按钮的效果：鼠标悬浮按钮上时一道光从左到右划过去。笔者就用渐变来模拟那道光，通过transform: translateX()将其平移至右边。但这样明显不对啊，这光为啥能被看见呢？不应该把它给“挡”起来... [阅读更多]
21-04-16 16:10:29
写CSS的常用套路(attr()生成文本内容)
元素可以有自定义的属性值，它的命名格式通常为data-*attr()用于获取元素的这种自定义属性值，并赋值给其伪元素的content作为其生成的内容利用这个函数，我们可以用伪元素在原先文本的基础上“复制”出另一个文... [阅读更多]
21-04-14 16:06:26
写CSS的常用套路(伪元素)
简而言之，伪元素就是在原先的元素基础上插入额外的元素，而且这个元素不充当HTML的标签，这样就能保持HTML结构的整洁。我们知道每个元素都有::before和::after这两个伪元素，也就是说每个元素都提供了3个矩... [阅读更多]
21-04-14 15:58:50
写CSS的常用套路(绝对定位实现多重边框)
谁规定按钮只能有一套边框的？利用绝对定位和padding，我们可以给按钮做出3套大小不一的边框来，这样效果更炫了。HTML:<button class="btn btn-prima... [阅读更多]
21-04-14 15:51:52
写CSS的常用套路(伪类和伪元素)
伪类HTML元素的状态是可以动态变化的。举个栗子，当你的鼠标悬浮到一个按钮上时，按钮就会变成“悬浮”状态，这时我们就可以利用伪类:hover来选中这一状态的按钮，并对其样式进行改变。:hover是笔者最最常用的一个伪... [阅读更多]
21-04-12 21:29:34
写CSS的常用套路(随机粒子动画)
随机粒子动画说到随机性，我们可以实现一种更疯狂的效果：给几百个粒子添加交错动画，并且交错时间随机，位置大小也都是随机。如此一来我们就能用纯CSS模拟出下雪的效果。又到了白色相簿的季节呢~为什么你写CSS这么熟练啊？H... [阅读更多]
21-04-12 20:50:29
写CSS的常用套路(用JS分割文本)
用JS分割文本还有一种经常用到的玩法：用JS将句子或单词分割成字母，并给每个字母加上不同延时的动画，同样也很华丽。HTML:<p class="landIn">Ano&nbs... [阅读更多]
21-04-12 20:38:49
写CSS的常用套路(交错动画效果实现与源码）
前言本文是笔者写CSS时常用的套路。不论效果再怎么华丽，万变不离其宗。1、交错动画有时候，我们需要给多个元素添加同一个动画，播放后，不难发现它们会一起运动，一起结束，这样就会显得很平淡无奇。那么如何将动画变得稍微有趣... [阅读更多]