多行文本展开收起是一个很常见的交互， 如下图演示 实现这一类布局和交互难点主要有以下几点 位于多行文本右下角的“展开收起”按钮 “展开”和“收起”两种状态的切换 当文本不超过指定行数时，不显示“展开收

本文阿宝哥将给大家介绍十个 「“酷炫屌"」 的图像悬停效果，希望阿宝哥精心录制的十个 Gif 动画能让大家眼前一亮，当然更希望这些特效能给大家设计图片悬停效果带来一些 「”灵感“」。 在日常工作中，如果小伙伴们也想实现图片悬停特效，阿宝哥推荐一个 Github 上的一个可扩展的…

其中，radar类DIV是200px的宽高，fan类DIV是100px的宽高。 请用CSS完成下面的效果。 转动的扇形，实现的效果可以通过关键帧来处理。 DIV从距离顶部0的位置更改到距离顶部100px的位置，整个过程需要3秒。 扇形的颜色效果是一个线性渐变的过程，我们可以通过…

觉得它的风格很独特，尤其是其中一些边框。 嘿嘿，所以来一篇边框特辑，看看运用 CSS，可以在边框上整些什么花样。 谈到边框，首先会想到 border，我们最常用的莫过于 solid，dashed，上图中便出现了 dashed。 除了最常见的 solid，dashed，CSS b…

巧用伪元素:before、:after等，让你的页面按钮眼前一亮。更多内容：https://github.com/reng99/blogs

因为 button 元素可以使用 before/after 伪元素，所以借助伪元素，可以实现动态图中的遮盖层。 为了避免回流重绘，滑箱的运动方向是垂直方向，所以使用scaleY属性。对于动画的方向，需要借助transform-origin改变动画原点。 果冻特效可以分割成 5 …

最近我在CodePen上发现了一个纯CSS实现，具有渐变倒影和3D旋转效果的栅栏动画，他的实现方式是：利用10个<div>元素创建10个栅条，接着再复制整份<div>元素，并创建一个渐变遮罩形成渐变效果，以此作为栅栏的倒影。 这听起来有点像用左脚的脚趾去抓你的右耳背部（译者理解…

前言： “伪元素”在我们创建样式的时候用处很多，它可以大大简化我们的代码量，还可以做一些出乎意料的动作。 用于创建一些不在文档树中的元素，并为其添加样式。 其中 content 是必不可少的。 | rotateZ(angle) | 定义绕着 Z 轴的 3D 旋转。 | 后记： …