怎么使用纯CSS代码实现切换按钮时背景的悬停动画效果
这篇文章主要介绍了怎么使用纯CSS代码实现切换按钮时背景的悬停动画效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
网站建设哪家好,找创新互联!专注于网页设计、网站建设、微信开发、重庆小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了桥西免费建站欢迎大家使用!
代码解读
定义dom,导航中包含一个无序列表,列表中有一个列表项:
- home
居中显示:
body{
margin:0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background-color:teal;
}
隐藏列表项前端的引导符号:
navul{
padding:0;
list-style-type:none;
}
定义按钮容器尺寸:
:root{
font-size:10px;
}
navli{
width:20rem;
height:7rem;
}
设置文字样式:
navli{
font-size:20px;
text-align:center;
line-height:7rem;
font-family:sans-serif;
text-transform:uppercase;
letter-spacing:1px;
}
用伪元素制作2个背景色块:
navli{
position:relative;
}
navli::before,
navli::after{
content:'';
position:absolute;
width:inherit;
height:inherit;
top:0;
left:0;
}
navli::before{
background-color:white;
z-index:-1;
}
navli::after{
background-color:goldenrod;
z-index:-2;
}
让后面的背景块向右下偏移,并且让前面的背景块投放阴影,增加立体效果:
navli::before{
box-shadow:0.2rem0.2rem0.5remrgba(0,0,0,0.2);
}
navli::after{
transform:translate(1.5rem,1.5rem);
}
接下来增加悬停效果。
设置缓动时间,主元素和伪元素都将有缓动效果:
navli{
transition:0.3s;
}
navli::before,
navli::after{
transition:0.3s;
}
当悬停时,2个背景色块的颜色互换:
navli:hover::before{
background-color:goldenrod;
}
navli:hover::after{
background-color:white;
}
同时,后面的背景色块的向左上方移动,按钮整体则向右下方移动:
navli:hover{
transform:translate(1.5rem,1.5rem);
}
navli:hover::after{
transform:translate(-1.5rem,-1.5rem);
}
同时,再让文本在悬停时变色:
navli:hover{
color:white;
}
再增加几个按钮:
- home
- products
- services
- contact
最后,增加按钮之间的间距:
navli{
margin:3rem;
}
感谢你能够认真阅读完这篇文章,希望小编分享的“怎么使用纯CSS代码实现切换按钮时背景的悬停动画效果”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!
标题名称:怎么使用纯CSS代码实现切换按钮时背景的悬停动画效果
文章分享:http://myzitong.com/article/igsgei.html