菜单切换
FACESOHO知行者
心灵
记录
远方
赞赏工具
源代码：
点击运行
保存
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <style> .container {position:relative;width:50%;} .image {display:block;width:100%;height:auto;} .overlay {position:absolute;bottom:0;left:100%;right:0; background-color:#008CBA; overflow:hidden; width:0; height:100%; transition:.5s ease;} .container:hover .overlay { width:100%; left:0;} .text {white-space:nowrap;color:white;font-size:20px;position:absolute;overflow:hidden;top:50%;left:50%;transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);} </style> <h2>淡入效果</h2> <p>鼠标移动到图片上查看效果</p> <div class="container"> <img src="/public/uploads/person/img_avatar.png" alt="Avatar" class="image"> <div class="overlay"> <div class="text">Hello World</div> </div> </div> </body> </html>
运行结果