CSS3 实现鼠标滑过图片,block以中心为原点进行放大

html-css044

CSS3 实现鼠标滑过图片,block以中心为原点进行放大,第1张

要实现鼠标放在block上以中心为原点进行放大,可以利用CSS3的transform和transition来实现

CSS3的transform: scale()可以按比例放大或缩小block的功能。

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

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

web前端超出两行用省略号表示

效果图:

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

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

这个简单,先讲一下原理

先设置图片垂直水平居中(position:absolute与translate3d 相结合)    class为img

2.可以编写自定义animation    0的时候width为0,100%的时候width为你想要的宽度,高一样,其他的改设置的都设置一下  class为img active(这里是两个class) 来使用这个animation

3.在window.onload的事件下执行   只需给  img再加一个active的class就ok了

注意:我之前有在写自定义动画的时候在微信端执行不了动画,之后找到原因,给animation加一个延迟  100ms就行了   如果你遇到这种问题可以试试。