Home > Article > Web Front-end > 基于css3的鼠标经过动画显示详情特效_html/css_WEB-ITnose
之前为大家分享过一款基于jquery的手风琴显示详情,今天给大家分享基于css3的鼠标经过动画显示详情特效。这款实例鼠标经过的时候基于中间动画放大,效果非常不错,效果图如下:
在线预览 源码下载
实现的代码。
html代码:
css3代码:
html { font-family: 'Noto Sans' , serif; } .blocks { margin: auto; max-width: 1070px; padding: 0; } .blocks li { color: #fff; background-color: #2196F3; cursor: default; float: left; list-style: none; margin: 1%; padding: 60px 0; position: relative; text-align: center; -webkit-transition: .3s cubic-bezier(.3,0,0,1.3); transition: .3s cubic-bezier(.3,0,0,1.3); width: 31%; border-radius: 4px; font-weight: bold; } .blocks li:hover { -webkit-transform: scale(.7); -ms-transform: scale(.7); transform: scale(.7); z-index: 3000; } .popup { background-color: inherit; color: #fff; height: 100%; width: 100%; left: 0; opacity: 0; position: absolute; top: 0; padding: 15px; border-radius: 4px; -webkit-transition: .3s cubic-bezier(.3,0,0,1.37); transition: .3s cubic-bezier(.3,0,0,1.37); } .popup span { font-size: 12px; font-weight: normal; left: 0; padding: 15px 25px; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .popup h3 { font-size: 13px; margin: 0 0 5px; padding: 0; } .blocks li:hover .popup { opacity: 1; -webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2); box-shadow: 0 0 10px 2px rgba(0,0,0,.4); }