前端 - 那些你不知道的炫酷导航交互效果_个人文章 - SegmentFault 思否
基于上次发布的 那些你不知道的炫酷按钮交互效果 反馈比较好,后续将继续收集那些炫酷的交互效果,希望可以给你的项目添砖加瓦,更上一层楼。那些你不知道的炫酷交互效果系列:那些你不知道的炫酷按钮交互效果那些
顺晟科技
2022-09-14 10:41:41
166
简单技巧,不废话看效果
贴代码
HTML
<div class="main01 main011"><a href="#"><img src="test.png"/></a></div>
css
.main01{ position: absolute; width: 260px;height: 160px; top: 50%;margin-top: -120px; border-radius:5px ; text-align: center; -webkit-transition: all .1s ease; -moz-transition: all .1s ease; transition: all .1s ease;outline: none; } .main01 img{ border-radius: 5px; width: 100%; } .main01:hover img{ transform: scale(1.05); -ms-transform: scale(1.05); overflow: hidden; } .main011{ margin-left: 105px;background-color: #28B779; box-shadow: 0px 16px 0px rgba(31, 152, 98, 1), 0px 9px 25px rgba(0, 0, 0, .8); } .main011:hover{ background-color: #4D4D4D\0/;margin-top: -110px; box-shadow: 0px 2px 0px rgba(31, 152, 98, 1), 0px 3px 6px rgba(0, 0, 0, 1); }
31
2022-10
22
2022-10
19
2022-10
19
2022-10
19
2022-10
19
2022-10