探索我们精心制作的前端组件和页面示例,包括响应式设计、动画效果、表单交互等多个领域的实现。
交错动画:通过设置不同的延迟时间,达到动画交错播放的效果。
伪类
overflow障眼法。
遮罩-如果给box-shadow的扩张半径设定足够大的值,可以用它来遮住背景,而无需额外的div元素。
伪3D文本。
conic-gradient。
-webkit-box-reflect:投影效果,不怎么常用,适合立体感强的作品。
实现了一个动态的机器人效果,包含行走、眨眼和嘴巴动作。
用JS分割文本
绝对定位实现多重边框。
兄弟选择符定制表单元素。
内发光。
background-clip:text:能将背景裁剪成文字的前景色,常用来和color: transparent配合生成渐变文本。
backdrop-filter:对背景应用滤镜,产生毛玻璃的效果。
web animations。
伪元素。
border-radius
发光文本。
linear-gradient:线性渐变。
mix-blend-mode。
CSS Houdini是CSS的底层API,它使我们能够通过这套接口来扩展CSS的功能。
随机粒子动画
attr()生成文本内容
box-shadow-为盒子添加阴影,增加盒子的立体感,可以多层叠加,并且会使阴影更加丝滑
霓虹文本。
radial-gradient。
clip-path:PS里的裁切,可以制作各种不规则形状。
将交错动画和伪类伪元素结合起来写出来的慎重勇者风格的菜单。