过渡transition讲解
1、速度变换类型
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片过渡有黑色遮盖层</title> <style> .box,.box>img,.hidden{ width: 350px; height: 500px; } .box{ position: relative; overflow: hidden; } .hidden{ background-color: rgba(0,0,0,.5); position: absolute; top: 0; left: 100%; transition: all 1s; } .box img{ transition: all 1s; } .box:hover .hidden{ left: 0; } .box:hover img{ transform: scale(1.1); } </style> </head> <body> <div class="box"> <img src="https://cs.m.xczhihui.com/xcview/images/physician.png" alt="" /> <div class="hidden"></div> </div> </body> </html>
