hover导航效果案例
前端案例练习
htmlheadmetacharset="utf-8"titlehover效果/titlestylebody{margin:0;height:%;background-image:linear-gradient(totop,#d9afd90%,#97d9e1%);background-repeat:no-repeat;background-size:cover;background-attachment:fixed;}.btn_container{position:absolute;left:0;right:0;top:30%;}.btn{border:none;display:block;text-align:center;cursor:pointer;outline:none;overflow:hidden;position:relative;color:#fff;font-weight:;font-size:15px;background-color:#;padding:17px60px;margin:0auto;box-shadow:05px15pxrgba(0,0,0,0.2);margin-bottom:20px;}.btnspan{position:relative;z-index:1;}.btn::after{content:;position:absolute;left:0;top:0;height:%;width:%;background:#78c7d2;-webkit-transition:all.5sease-in-out;transition:all.5sease-in-out;-webkit-transform:translateX(-98%)translateY(-25%)rotate(45deg);transform:translateX(-98%)translateY(-25%)rotate(45deg);}.btn:hover::after{-webkit-transform:translateX(-9%)translateY(-25%)rotate(45deg);transform:translateX(-9%)translateY(-25%)rotate(45deg);}/style/headbodydivclass="btn_container"buttonclass="btn"spanHOME/span/button/div/body/html
坚持每天花20分钟来学习与思考
不要等到找工作时才狂刷题
提倡每日学习
—END—扫码