web前端鼠标经过图片凸起底下有影印怎样做

Posted 2023-04-23

用css就可以制作出来这种效果。

当鼠标移入的时候用:hover ,给图片一个相对定位，例如偏移top:2px ;left:2px;，然后给右边和下面加阴影，这样就做出了图片凸起的效果了 参考技术A <img class="testimg" src="../images/testimg.png">
写在css中：
.testimg:hoverbox-shadow:0px 0px 1px 2px #a4a4a4;

写在js中:
$(".testimg").hover(function()
$(this).css("box-shadow", "0px 0px 1px 2px #a4a4a4 ");
,function()
$(this).css("box-shadow", " ");
);
（纯手打，求采纳 梦魂清风 @author：dream breeze）！ 参考技术B 给元素加个box-shadow的样式就好了 参考技术C .img-aoqi
 -webkit-transition: all ease-out .5s;
    -o-transition: all ease-out .5s;
    transition: all ease-out .5s; 
    -ms-transition: all ease-out .5s;

.img-aoqi:hover
 -webkit-transform: scale(1.08);
    -o-transform: scale(1.08);
    transform: scale(1.08);
    -ms-transform: scale(1.08)

在需要这种特效的img标签上加class="img-aoqi"

css3 实现鼠标放上去图片外框不变大，里面中心放大

参考技术A 在前端开发过程中，要求实现背景色透明度0.8，但是文字颜色要求按给定颜色设置。

如果直接设置背景opacity值为0.8，会使文字的颜色发生改变。解决方法就是在设置背景色时使用rgba(red,green,blue,opacity)来对背景色进行设置,这样就可以单独的改变背景的透明度，而不会影响到里面的内容(包括文字和图片)。
web前端超出两行用省略号表示

效果图：

layui/js/jquery图片切换.html文件

layui/js/jquery图片切换.js文件