DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>创意菜单悬停文本动画效果title>
<style>
/* 引入字体包 */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #252839;
}
ul {
position: relative;
display: flex;
flex-direction: column;
gap: 30px; /* 设置网格行与列的距离-即 li 之间的距离 */
}
ul li {
position: relative;
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;
-webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);
}
ul li a::before {
/* 利用attr来使得htlm/js与css能共享数据 */
content: attr(data-text);
position: absolute;
/* 使用css变量 */
color: var(--clr);
/* 开始宽度设为0+overflow:hidden=不显示content */
width: 0%;
overflow: hidden;
/* 过渡：在::before或者:hover::berfore加都可以 */
transition: 1s;
border-right: 8px solid var(--clr);
/* 描边 */
-webkit-text-stroke: 1px var(--clr);
}
ul li a:hover::before {
width: 100%;
/* 阴影：和box-shadow的区别在于会连伪元素的阴影也加上 */
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:#00dc82">
<a href="#" data-text=" Team"> Team a>
li>
<li style="--clr:#dc00d4">
<a href="#" data-text=" Contact"> Contact a>
li>
ul>
body>
html>
本文参考微信公众号：web前端开发
如有侵权必删
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）