用CSS实现图片的3D凹凸感(凸出镜框外或凹陷镜框里)
程序员文章站
2022-03-30 16:41:14
ⅰ、问题描述:使用css实现图片的3d凹凸感;ⅱ实现过程如下:1、展示结果为:a、正常的图片(图一、图二都正常):b、图一凸出镜框外,图二正常;触发过程:将鼠标放在图一的红色边框内,就会显示出该结果;...
ⅰ、问题描述:
使用css实现图片的3d凹凸感;
ⅱ实现过程如下:
1、展示结果为:
a、正常的图片(图一、图二都正常):
b、图一凸出镜框外,图二正常;
触发过程:将鼠标放在图一的红色边框内,就会显示出该结果;
c、图一正常,图二凹陷镜框里;
触发过程:将鼠标放在图二的红色边框内,就会显示出该结果;
2、运行软件vscode,亲测可实现;
3、运行代码:
<!doctype html> <html> <head lang="en"> <meta charset="utf-8"> <title></title> <style> .wrap { float: left; width: 200px; height: 300px; border: 1px solid red; margin: 100px 0 0 100px; perspective:500px; /* "perspective:500px;"指: 透视距离(远小近大的效果); 但只是感觉变了而已,而实际大小并没有变化; */ } .wrap img { transition: 0.5s; } .wrap:nth-child(1):hover img { transform: translatez(100px); /* "translatez(100px);"指: 往z轴正方向平移100px(垂直屏幕往外为正); */ } .wrap:nth-child(2):hover img { transform: translatez(-100px); /* "translatez(-100px);"指:往z轴负方向平移100px(垂直屏幕往里为负); */ } </style> </head> <body> <div class="wrap"> <img src="pic02.jpg"/> </div> <!-- 此时的img中的src地址:指你加载的图片的地址 而当图片的地址与代码文档在同一个目录下,像上述代码就可以简单的来引入地址; --> <div class="wrap"> <img src="pic02.jpg"/> </div> </body> </html>
ⅲ、总结
到此这篇关于用css实现图片的3d凹凸感(凸出镜框外或凹陷镜框里)的文章就介绍到这了,更多相关css实现3d凹凸感内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
上一篇: oppoa95对比opporeno6哪个值得入手?
下一篇: CSS3 实现的动态星空背景