【30天30个小项目】菜单悬停动画

简介: 【30天30个小项目】菜单悬停动画

实现效果:



css代码


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Times New Roman', Times, serif;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100px;
    background-color: purple;
}
ul{
    position:relative;
    display: flex;
    flex-direction: column;
    gap: 30px;
}
ul li {
    position: relative;
    list-style: none;
}
ul li a{
    font-size: 50px;
    position: relative;
    text-decoration: none;     
    line-height: 1em;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255,255, 0.6);
}
ul li a::before{
    content: attr(data-text);
    position: absolute;
    color:var(--clr);
    width: 0;
    overflow: hidden;
    transition: 1s;
    border-right: 5px solid var(--clr);
}
ul li a:hover::before{
    width: 100%;
    /* -webkit-text-stroke: 1px rgb(11, 11, 167); */
    filter: drop-shadow(0 0 50px var(--clr));
}


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>Document</title>
    <link rel="stylesheet" href="menu.css">
</head>
<body>
    <div id="box">
        <ul>
            <li style="--clr:blue"><a href="#" data-text="&nbsp;Home">&nbsp;Home</a></li>
            <li style="--clr:yellow"><a href="#" data-text="&nbsp;About">&nbsp;About</a></li>
            <li style="--clr:lightgreen"><a href="#" data-text="&nbsp;Services">&nbsp;Services</a></li>
            <li style="--clr:pink"><a href="#" data-text="&nbsp;Team ">&nbsp;Team</a></li>
        </ul>
    </div>
</body>
</html>
目录
相关文章
|
6月前
|
前端开发
CSS动画效果(鼠标滑过按钮动画)
CSS动画效果(鼠标滑过按钮动画)
|
7月前
|
前端开发
css样式实现一个滑动按钮
css样式实现一个滑动按钮
58 0
|
7月前
|
前端开发
Flutter笔记:光影动画按钮、滚动图标卡片组等
Flutter笔记:光影动画按钮、滚动图标卡片组等
84 0
|
小程序 JavaScript
小程序底部动画弹框
小程序底部动画弹框
78 0
|
前端开发
css动画效果代码淡入淡出折叠展开点击悬浮
css动画效果代码淡入淡出折叠展开点击悬浮
|
前端开发 JavaScript
CSS实现背景跟随滑动的按钮菜单效果
通过transition过渡属性,可以将相关css属性的变化,改为一个持续一段时间的连续过程,而不是使css样式的改变立即生效,其过程按照指定的曲线速率变化......
542 0
CSS实现背景跟随滑动的按钮菜单效果
|
前端开发 JavaScript
【前端】侧边栏显示隐藏的实现和动画效果
【前端】侧边栏显示隐藏的实现和动画效果
592 0
【前端】侧边栏显示隐藏的实现和动画效果
|
JavaScript
在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果
在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果
592 0
在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果
UGUI系列-鼠标移动到按钮上显示信息(Unity3D)
有时候图标不能很好的说明这个功能的解释,就需要一些说明性文字显示。就比如可以在鼠标移动到UI上面的时候显示文字。 那么如何在UGUI上,鼠标移动上去显示文字说明呢。 大家都知道,当鼠标移动到button按钮上面的时候会出现变化,主要是button这个组件在控制