<!doctype html> <html> <head> <meta charset="utf-8"> <title>鼠标滑过文字的波纹效果</title> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> .set { position: relative; font-weight: 400; text-align: center; width: 200px; height: 200px; line-height: 200px; overflow: hidden; position: relative; z-index: 0; color: #000000; background: #fafafa; cursor: pointer; } .anim { -moz-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); position: absolute; top: 50%; left: 50%; z-index: -1; } .anim:before { position: relative; content: ''; display: block; margin-top: 100%; background: #6CB1FF; } .anim:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-radius: 50%; } .hoverable:hover>.anim:after { -webkit-animation: anim-out-pseudo 0.75s; animation: anim-out-pseudo 0.75s; } .set:hover>.anim { -webkit-animation: anim-out 0.75s; animation: anim-out 0.75s; } @-webkit-keyframes anim-out-pseudo { 0% { background: rgba(255, 203, 0, 50); } 100% { background: transparent; } } @-webkit-keyframes anim-out { 0% { width: 0%; } 100% { width: 100%; } } </style> </head> <body> <div class="set hoverable"> <div class="anim"></div> <p>放我上面有惊喜哦</p> </div> <div style="width: 100%;text-align: center;">记得考虑兼容性哦</div> </body> </html>
