自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(4)
  • 收藏
  • 关注

原创 纯CSS,利用before、after伪元素实现的几种链接hover效果四:小太阳闪现效果

before:border设置为dotted,border-radius为50%,利用transform的scale属性设置放大2倍。以下是代码,可分别复制到网页的css部分和HTML部分测试效果。after:同上,只是初始大小与before不同即可。

2022-11-30 12:11:01 382 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 1044 1

原创 纯CSS,利用before、after伪元素实现的几种链接hover效果二:半透明幕布打开效果

hover后,before和after分别向两侧打开,即width为0。before:初始为白色背景,透明度为0.5,覆盖在链接文字左半边。after:初始为白色背景,透明度为0.5,覆盖在链接文字右半边。

2022-11-30 11:07:12 306 1

原创 纯CSS,利用before、after伪元素实现的几种链接hover效果一:旋转下划线加链接文字上闪效果

初始下划线为短线,垂直在链接左侧-20px位置,hover后旋转并伸长至链接文字下方,形成下划线效果。这里主要用到transform的rotate属性。说明:利用before和after伪元素实现链接文字hover双重效果,也可以单独使用一种。初始为读取文字覆盖在链接文字上,hover后向上闪出。

2022-11-30 10:52:37 1607 2

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除