- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- <style>
- *{ margin: 0; padding: 0; } body{ background-color: #9fe1d2; } .wrapper{
- overflow: hidden; position: relative; width: 264px; height: 333px; margin:
- 30px auto; border: 10px solid rgba(255,255,255,0); background-color: #fff;
- } .wrapper:hover{ border: 10px solid #ebebeb; transition: 0.5s ease-in-out;
- } .first,.second{ position: absolute; top: 0; } .first{ z-index: 2; } .zhezhao{
- position: absolute; z-index: 1; width: 0px; height: 0px; border-radius:
- 100%; border: 400px solid #fff; top:-265px; left: -270px; } .wrapper:hover
- .zhezhao{ width: 600px; height: 600px; transition: 0.5s ease-in-out; top:-560px;
- left: -520px; }
- </style>
- </head>
- <body>
- <div class="wrapper">
- <div class="first">
- <img src="https://p1.lefile.cn/product/adminweb/2018/04/03/22090b19-4302-47a4-9a4a-8f5d438d8135.png">
- ;
- </div>
- <div class="zhezhao">
- </div>
- <div class="second">
- <img src="https://p1.lefile.cn/product/adminweb/2018/04/03/dacba6e1-f5cf-4db2-8dfa-da6b16b98bac.jpg"
- />
- </div>
- </div>
- </body>
- </HTML>
来源: http://www.qdfuns.com/note/50738/480319cf2db5ddd47aafc3af196b6007.html