正文

css3实现图片居中，hover缩放遮罩的效果

长安夜未央  2022-02-16  810

关键词：

在前端开发中经常会遇到项目展示，往往会采用图片方式来描述。众多网站中，普遍采用CSS3的scale()方法来实现交互。

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>CSS3实现图片居中，hover缩放遮罩的效果</title>
 6     <style type="text/css">
 7     /*遮罩层*/
 8     .wrap{
 9         height:200px;
10         width:200px;
11         margin: 300px auto;
12         justify-content:center;
13         align-items:center;
14         display:-webkit-flex;
15         overflow: hidden;
16     }
17     /*图片div*/
18     .tom{
19         height:200px;
20         width:200px;
21     }
22     /*图片初始效果*/
23     .tom img{
24         width: 100%;
25         height: 100%;
26         /*图片过渡效果*/
27         transition: all 0.8s ease;
28         /*图片初始添加黑白滤镜*/
29         filter:grayscale(100%); 
30     }
31     /*图片hover效果*/
32      .tom img:hover{
33         /*图片缩放*/
34          transform: scale(1.5);
35         /*图片回复全彩*/
36          filter:grayscale(0%); 
37      }
38     </style>
39 </head>
40 <body>
41     <!-- 外遮罩 -->
42     <div class="wrap">
43         <!-- 图片 -->
44         <div class="tom">
45             <img src="http://www.cdtu6129.cn/img/tom.jpg">
46         </div>
47     </div>
48 </body>
49 </html>

如有疑问，欢迎指出。

jquerymobile中如何实现遮罩效果

请问jquerymobile中怎么实现遮罩效果啊，我现在的情况是虽然实现了遮罩效果，但是添加进入的div没有Jquerymobile中的页面加强效果了？初学Jquerymobile求解答1背景半透明遮罩层样式　　需要一个黑色（当然也可以其他）背景，且须... 查看详情

纯css3实现transtion过渡效果

...lio-03.jpg"alt=""><bclass="block"></b></a> 最终实现效果：鼠标划入img上去,b标签以遮罩层的方式出现&nbs 查看详情

前端：两种实现带背景遮罩的弹窗写法(代码片段)

1. 第一种使用css+jquery实现效果直接上案例分析，下面一一列出样式文件和js文件以及html页面上的使用例子。css文件如下：.black_overlaydisplay:none;position:fixed;top:0%;left:0%;width:100%;height:100%;background-color:black;z-index:10 查看详情

css实现图片透明度渐变效果

参考技术A实现图片的透明度渐变效果，效果如下：先说下我的实现，并没有用什么黑科技，而是通过两层图层堆叠的方式来做的。下面一层就是单纯的svg图片，上面覆盖了一层遮罩，并设置遮罩的背景色为蓝色到透明色的从左... 查看详情

slider制作经验条／血条／遮罩

今天想实现一个经验条的制作，但是使用slider一直做起来都有些问题：1.在自己添加的slider组件上放置fullrect和handlerect这两个属性的时候，图片会被拉伸2.在改变slider的value时，图片缩放大小达不到指定幅度3.如何在图片上添加一... 查看详情

带遮罩的全宽图像

...题的底部有一个类似绘画的外观。问题是，我的图像没有缩放以适应宽度。我希望它是100%宽和700px高（或者像覆盖它的父级，就像你通常做的那样：背景大小：覆盖）。这就是我想要的：这就是我迄今为止所取得的成就查看详情

前端放大镜的实现效果

...移入移出以及ommousemove事件并且将图片放大。利用百分比实现放大效果。<!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"> <title>Document</title 查看详情

利用css3实现鼠标悬停在图片上图片缓慢缩放的两种方法

1.改变background-size属性将图片作为某个html元素的背景图片，用transition属性改变图片的大小。1.container{2background-size:100%100%;3transition:all2s;4}5.container:hover{6background-size:120%120%;7}这种方法有个问题是图片缩放的时候会出现抖动... 查看详情

css3图片缩放

鼠标指上去，图片放大，鼠标离开图片恢复原样，并且有放大、缩小效果 Css代码实现：查看详情

通过css3，实现元素覆盖效果

...有遮罩层上浮动画，如图：今天我们就用hover伪类加上css3实现，没有使用不论什么JS<!DOCTYPEhtml><html><headlang="zh-cmn-Hans"><metacharset="UTF-8"><title 查看详情

css3实现伪类hover离开时平滑过渡效果

...大多数人的想法都是使用js的onmouseover和onmouseleave事件来实现动画效果。其实不必这么麻烦，CSS3便可以帮你解决这些问题。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF- 查看详情

css3实现伪类hover离开时平滑过渡效果

js带有遮罩的弹窗

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>js制作带有遮罩弹出层实现登录小窗口</title><linktype="text/css"rel="stylesheet"href="./css/reset.css"/><scrip 查看详情

vegas黑白遮罩的使用。

...色区域的扩大逐渐出现，该怎么操作。以前用AE做过，能实现，但是用VEGAS不知道怎么弄。参考技术AVEGAS也可以做关键帧，在一段素材的右下角有几个小图标，其中一个点击后就会出现一个窗口，里面可以调节参考技术BVegas里面... 查看详情

zbrush中如何清除遮罩

...呢，很简单，像反转遮罩一样，只需要一个简单操作就能实现，一起看看吧。有关反转遮罩的详细内容，请点击：ZBrush中如何反选遮罩。清除遮罩当物体存在遮查看详情

如何使用 Accelerate Framework 将带有遮罩的图像组合成一个 UIImage？

...发布时间】：2014-02-1100:16:04【问题描述】：此代码将一张图片和一张灰度蒙版图片合并到一个UIImage中。它可以工作，但速度很慢。+(UIImage*)maskImage: 查看详情

请问鼠标滑过背景图片，图片围绕圆心旋转的效果怎么实现？css3也可以..

...转，鼠标移出图片就停止转动。用css3的transition，很容易实现hover时旋转效果的：<style>imgwidth:50px;height:50px;display:block;-webkit-transition:0.4s linear;transition:0.4s ease-in;img:hover-webkit-transform:rotate(360deg);transform:rotate(360deg);</styl... 查看详情

zbrush中遮罩的概念及使用

刚接触设计软件的小伙伴有可能不知道什么叫做遮罩，遮罩的概念是什么，顾名思义，遮罩就是可以将局部进行遮挡，使用它可以锁定和保护我们不想改变的模型位置，即被遮罩的部分将不参与任何编辑。ZBrush?软件中创建遮罩... 查看详情