网页制作中鼠标点击时文字下沉效果是怎么实现的

html-css042

网页制作中鼠标点击时文字下沉效果是怎么实现的,第1张

当鼠标移动到链接上时，链接文本（或图片）会出现下沉的效果，好像链接的小手图标将它按下去一样。这个小效果被很多网页制作者使用，的确很实用，并能为页面增添不少生气。

最早看到这个效果的时候感到很神奇，想不到是什么这个下沉效果是利用什么原理和代码制作的，经过对别人网页源代码的“借鉴”，我终于恍然大悟——原来它是使用了“相对定位+hover伪类”让其产生位移这个简单的方法制作的！

它的效果简单，原理简单，代码更简单，如果需要将网站或某个页面的链接全部制成下沉效果，只需要在CSS加上一句即可：

a:hover

{

position:relative

top:1px

left:1px

}

只要将这段CSS加入到应用的CSS文件中，链接就可以在鼠标悬浮时出现下沉效果了，现在你就可以试试了。

段落首字下沉 单纯从前端角度，可以实现的方法

1、before伪元素实现

2、使用标签控制

段落首字下沉 方法分析

第一种方法果断舍弃，原因在于，数据明显是从后台传递的，那么此时我们不可能确定后台会传递什么数据。

具体内容请详见：CSS样式 | 段落首字下沉