CSS特效（9）——圖片倒影效果
阿新 • • 發佈：2018-09-07
device code index tran round linear set image head
圖片倒影效果
<!DOCTYPE html> <html lang="en"> <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"> <title>Document</title> <style> div { margin: 50px auto; width: 200px; height: 200px; background-image: url(‘http://images2015.cnblogs.com/blog/608782/201609/608782-20160926101029078-1479229145.jpg‘); position: relative; } div:before { content: ""; background-image: inherit; position: absolute; top: 100%; left: 0; right: 0; bottom: -100%; transform: rotateX(180deg); } div:after { content: ""; position: absolute; width: 200px; height: 200px; bottom: -200px; background: linear-gradient(0deg, rgba(255, 255, 255, 1)0%, rgba(255, 255, 255, 0)100%); z-index: 2; } </style> </head> <body> <div></div> </body> </html>
CSS特效（9）——圖片倒影效果