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

原创

于 2022-11-30 12:11:01 发布 · 502 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#动态规划 #css #算法

这篇博客介绍了如何利用CSS的before和after伪元素，为链接文字创建hover时出现的小太阳闪现效果。通过设置border、border-radius、transform和transition属性，分别实现了before和after在鼠标悬停时的放大和透明度变化，从而达到动态的视觉效果。此技巧可以用于提升网页交互体验。

四：小太阳闪现效果

说明：利用before和after伪元素实现链接文字hover出现小太阳闪现效果，也可以单独使用一种。

before：border设置为dotted，border-radius为50%，利用transform的scale属性设置放大2倍。

after：同上，只是初始大小与before不同即可。

以下是代码，可分别复制到网页的css部分和HTML部分测试效果。

css部分：

.dp {
	    margin:60px auto;
	    width:500px;
	}
.dp a {
	    text-decoration:none;
        color:#a5a5a5;
	}
.dp a span {
	    position:relative;
	    background:#fff;
	}
.dp a span:hover {
	    color:#333;
	}
/*====before部分======*/
.dp a span::before {
	    content:"";
		height:23px;
		width:23px;
	    border:1px dotted #555;
	    border-radius:50%;
		position:absolute;
		left:50%;
		top:50%;
		transition:.2s;
	    z-index:-1;
        transform: translateX(-50%) translateY(-50%) ;
        opacity: 0;
	}
.dp a span:hover::before {
		opacity: .5;
        transform: translateX(-50%) translateY(-50%) scale(2);
	}
/*====after部分======*/
.dp a span::after