css
纯 CSS 实现十个还不错的 Loading 效果
4个好用的 CSS 伪类 not()、has()、 is()、where()
CSS 中的 Clamp 函数：掌握动态布局的秘籍
css特效：图片倒影
本文档使用 MrDoc 发布
-
+
首页
css特效：图片倒影
图片倒影是一种常见的CSS特效，它通过CSS样式创建一个图像的镜像反射效果，使图像看起来像是倒影在水面上的效果。  ~~~html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图片倒影</title> </head> <style> body { padding-top: 100px; width: 100%; height: 100vh; overflow: hidden; } .img-wrapper { width: 100%; height: 100%; display: flex; justify-content: center; background-color: #000; } .img-wrapper > img{ width: 260px; height: 400px; -webkit-box-reflect: below 15px linear-gradient(transparent,transparent,#000); } </style> <body> <div class="img-wrapper"> <img src="./1.jpeg" alt=""> </div> </body> </html> ~~~
admin
2024年7月2日 11:40
转发文档
收藏文档
上一篇
下一篇
手机扫码
复制链接
手机扫一扫转发分享
复制链接
Markdown文件
分享
链接
类型
密码
更新密码