<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link href="https://cdn.bootcss.com/meyer-reset/2.0/reset.css" rel="stylesheet"> <title>CSS3图片倒影技术实现及原理</title> <style> img{-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent) , to(rgba(250, 250, 250, 0.1)));} </style> </head> <body> <a href="https://www.html5tricks.com/css3-image-reflection.html" target="_blank" rel="noopener noreferrer">原文</a> <img src="http://www.gzui.net/wp-content/uploads/2017/01/zwt.jpg" alt=""> </body> <!-- <script src="http://static.xcabc.com/js/jquery3.0.0.min.js"></script> --> <script> </script> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » CSS3图片倒影技术实现及原理 喜欢 (0)or分享 (0)
