- 博客(4)
- 收藏
- 关注
RSS订阅原创 纯CSS，利用before、after伪元素实现的几种链接hover效果四：小太阳闪现效果
before：border设置为dotted，border-radius为50%，利用transform的scale属性设置放大2倍。以下是代码，可分别复制到网页的css部分和HTML部分测试效果。after：同上，只是初始大小与before不同即可。
2022-11-30 12:11:01
452
1
原创 纯CSS，利用before、after伪元素实现的几种链接hover效果三：上划线下划线滑出效果
after：初始下划线width为0，在文字下方30px位置，居右，hover后伸长至width为100%。before：初始上划线width为0，在文字上方-5px位置，hover后伸长至width为100%。以下是代码，可分别复制到网页的css部分和HTML部分测试效果。
2022-11-30 11:21:14
1161
1
原创 纯CSS，利用before、after伪元素实现的几种链接hover效果二：半透明幕布打开效果
hover后，before和after分别向两侧打开，即width为0。before：初始为白色背景，透明度为0.5，覆盖在链接文字左半边。after：初始为白色背景，透明度为0.5，覆盖在链接文字右半边。
2022-11-30 11:07:12
357
1
原创 纯CSS，利用before、after伪元素实现的几种链接hover效果一：旋转下划线加链接文字上闪效果
初始下划线为短线，垂直在链接左侧-20px位置，hover后旋转并伸长至链接文字下方，形成下划线效果。这里主要用到transform的rotate属性。说明：利用before和after伪元素实现链接文字hover双重效果，也可以单独使用一种。初始为读取文字覆盖在链接文字上，hover后向上闪出。
2022-11-30 10:52:37
1704
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人