ul li{
list-style: none;
}
ul li a{
position: relative;
font-size: 4em;
text-decoration: none;
line-height: 1em;
letter-spacing: 2px;
text-transform: uppercase;/* 定义文字内容都是大写字母 */
color: transparent;/*将字体设置透明 background-color:transparent的作用，它是将背景色设置为透明 */
-webkit-text-stroke:1px rgba(255, 255, 255, 0.5);/* 开始设置了文字透明，现在设置文字描边显示，后面是颜色，不然全透明是看不见的 */
}
ul li a::before{
content: attr(data-text);
position: absolute;
color: var(--clr);
width: 0px;
overflow: hidden;
transition: 1s;
border-right: 8px solid var(--clr);
-webkit-text-stroke:1px var(--clr);
}
ul li a:hover::before
{
width: 100%;
filter: drop-shadow(0 0 25px var(--clr)); /* 实现线条光影效果 */
}
</style>
</head>
<body>
<ul>
<li style="--clr:#00ade1"> <a href="#" data-text=" Home"> Home</a> </li>
<li style="--clr:#ff6493"><a href="#" data-text=" About"> About</a></li>
<li style="--clr:#ffdd1c"><a href="#" data-text=" Services"> Services</a></li>
<li style="--clr:#dc00d4"><a href="#" data-text=" Contact"> Contact</a></li>
</ul>
</body>
2382
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
