In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-04-07 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/02 Report--
这篇"纯CSS怎么实现从按钮两侧滑入装饰元素的悬停特效"除了程序员外大部分人都不太理解,今天小编为了让大家更加理解"纯CSS怎么实现从按钮两侧滑入装饰元素的悬停特效",给大家总结了以下内容,具有一定借鉴价值,内容详细步骤清晰,细节处理妥当,希望大家通过这篇文章有所收获,下面让我们一起来看看具体内容吧。
代码解读
定义dom,容器是一个无序列表,列表项代表按钮:
home
居中显示:
body{
margin:0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(deepskyblue,navy);
}
去掉列表项前面的符号:
ul{
padding:0;
list-style-type:none;
}
设置按钮的文字样式:
ulli{
color:#ddd;
font-size:25px;
font-family:sans-serif;
text-transform:uppercase;
}
用伪元素在按钮的左侧增加一个方块:
ulli{
position:relative;
}
ulli::before{
content:'';
position:absolute;
width:100%;
height:100%;
background:tomato;
left:-100%;
}
用伪元素在按钮的右侧增加一条下划线:
ulli::after{
content:'';
position:absolute;
width:100%;
height:0.2em;
background:tomato;
bottom:0;
left:100%;
}
接下来设置鼠标悬停效果。
当鼠标悬停时,左侧的方块移到文字所在位置:
ulli::before{
transition:0.4sease-out;
}
ulli:hover::before{
left:100%;
}
右侧的下划线移到文字所在位置,它的动画时间延迟到方块的动画快结束时再开始:
ulli::after{
transition:0.3s0.3sease-out;
}
ulli:hover::after{
left:0%;
}
同时,提高文字的亮度:
ulli{
transition:0.3s;
cursor:pointer;
}
ulli:hover{
color:#fff;
}
隐藏掉按钮外的部分,使方块和下划线在默认状态下都不可见,只有鼠标悬停时它们才从两侧入场:
ulli{
overflow:hidden;
}
最后,在dom中再增加几个按钮:
home
products
services
contact
布局多个按钮:
ul{
display:flex;
flex-direction:column;
align-items:center;
}
ulli{
margin:0.5em;
}
css的基本语法是什么css的基本语法是:1、css规则由选择器和一条或多条声明两个部分构成;2、选择器通常是需要改变样式的HTML元素;3、每条声明由一个属性和一个值组成;4、属性和属性值被冒号分隔开。
感谢您的阅读,希望您对"纯CSS怎么实现从按钮两侧滑入装饰元素的悬停特效"这一关键问题有了一定的理解,具体使用情况还需要大家自己动手实验使用过才能领会,快去试试吧,如果想阅读更多相关知识点的文章,欢迎关注行业资讯频道!
Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.
Views: 0
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.