本篇文章给大家带来的内容是关于如何使用纯css实现按钮的悬停效果（附源码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
效果预览
源代码下载
https://github.com/comehope/front-end-daily-challenges
代码解读
定义 dom，容器是一个无序列表，包含 4 个元素，代表 4 个按钮：
- home
- products
- services
- contact
居中显示：
立即学习“前端免费学习笔记（深入）”；
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background: cornsilk;}
去掉列表项前面的符号：
ul { padding: 0; list-style-type: none;}
设置按钮的边框和背景的样式，背景采用渐变色，但渐变的方向依次交替：
ul li { box-sizing: border-box; width: 15em; height: 3em; font-size: 20px; border-radius: 0.5em; margin: 0.5em; box-shadow: 0 0 1em rgba(0,0,0,0.2);}ul li:nth-child(odd) { background: linear-gradient(to right, orange, tomato);}ul li:nth-child(even) { background: linear-gradient(to left, orange, tomato);}
设置按钮上文字的样式，依次交替居左或居右：
ul li { color: white; font-family: sans-serif; text-transform: capitalize; line-height: 3em;}ul li:nth-child(odd) { text-align: left; padding-left: 10%;}ul li:nth-child(even) { text-align: right; padding-right: 10%;}
设置按钮的透视效果，依次交替向左旋转和向右旋转，此时透视的距离是 500px，注意 perspective() 函数和 rotateY() 函数的顺序不能写反：
ul li:nth-child(odd) { transform: perspective(500px) rotateY(45deg);}ul li:nth-child(even) { transform: perspective(500px) rotateY(-45deg);}
为按钮增加悬停效果，使悬停时的透视距离变短为 200px，透视距离越短，旋转的幅度看起来就越大：
ul li:nth-child(odd):hover { transform: perspective(200px) rotateY(45deg); padding-left: 5%;}ul li:nth-child(even):hover { transform: perspective(200px) rotateY(-45deg); padding-right: 5%;}
最后，设置一个缓动时间，使效果转换变得平滑：
ul li { transition: 0.3s; cursor: pointer;}
大功告成！
以上就是如何使用纯CSS实现按钮的悬停效果（附源码）的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1612245.html
微信扫一扫 
支付宝扫一扫 
