鼠标悬浮三形菜单变叉号
分类:实例代码
鼠标悬浮三形菜单变叉号属于前端实例代码,有关更多实例代码大家可以查看。
分享一段代码实例,它实现了鼠标悬浮三形菜单,变叉号的效果。
代码如下:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>前端教程网</title> <style type="text/css"> .icon { width: 50px; height: 10px; padding: 10px 0; border-top: 10px solid #000; border-bottom: 10px solid #000; background: #000; background-clip: content-box; } .fa { cursor: pointer; width: 50px; height: 50px; transition: .3s ease; } .fa:hover>.icon { border: 0; background: none; } .icon:before, .icon:after { position: absolute; content: ""; width: 60px; height: 60px; transition: .3s ease; -webkit-transition: .3s ease; opacity: 0; } .icon:before { top: -5px; border-bottom: 10px solid #000; } .icon:after { top: 15px; border-top: 10px solid #000; } .fa:hover>.icon:before { opacity: 1; transform: rotate(135deg) translateX(5px) translateY(-25px); -webkit-transform: rotate(135deg) translateX(5px) translateY(-25px); } .fa:hover>.icon:after { opacity: 1; transform: rotate(-135deg) translateX(20px) translateY(39px); -webkit-transform: rotate(-135deg) translateX(20px) translateY(39px); } </style> </head> <body> <div class="fa"> <div class="icon"></div> </div> </body> </html>
鼠标悬浮三形菜单变叉号,这样的场景在实际项目中还是用的比较多的,关于鼠标悬浮三形菜单变叉号就介绍到这了。