css3放大效果的代码（css实现放大缩小的动画效果）

今天给各位分享css3放大效果的代码的知识，其中也会对css实现放大缩小的动画效果进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、用css的 a:hover img 放大图片时怎么让放大后的图片 从原图片的中心放大
• 2、如何利用CSS3制作3D效果文字具体实现样式
• 3、html+css3实现放大镜效果 （2021-08-25）

用css的 a:hover img 放大图片时怎么让放大后的图片 从原图片的中心放大

用CSS3中的transfrom:scale{x,y}来放大，如下：

style

*{margin:0;padding:0;}

div{border:solid 1px #333;width:40px;height:40px;}

div img{width:40px;height:40px;transition:all 0.3s;}

div img:hover{transfrom:scale{2,2};}//从中心放大两部

/style

divimg src="图片地址" alt=""//div

扩展资料：

注意事项

transfrom是利用线性代数来存放一个控件(或许是图片)的具体信息.(由于可以通过transfrom直接操作控件.所以肯定直接或者间接的存储着点的信息和控件的大小等信息)

1、移动.左移右移或者上移下移:

CGAffineTransformMakeTranslation(X偏移量, Y偏移量);

CGAffineTransformTranslate(在某个transform的基础上-一般为自身, X偏移量, Y偏移量);

2、改变大小(形变):

CGAffineTransformMakeScale(宽缩放的倍数, 高缩放的倍数);

CGAffineTransformScale(在某个transform的基础上-一般为自身, 宽缩放的倍数, 高缩放的倍数);

如何利用CSS3制作3D效果文字具体实现样式

复制代码代码如下: .example-class{text-shadow: [X offset] [Y offset] [Blur size] [Colour];}译者注：X表示x轴上的位移，可为负值；Y表示y轴上的位移，可为负值；Blur表示投影的宽度，不能为负值；Color为投影的颜色。 堆叠多层CSS投影 虽然我们没有必要堆叠多层投影，但通过堆叠多层投影会有更好的3D效果 开始创建3D文字 你可能会选择比文字更深的颜色来作为投影的颜色，所以这个例子中我就用白色的文字，用深一点的灰色作为投影颜色，这个例子中我将H2的文字渲染3D效果，css代码如下： 复制代码代码如下:h2{text-shadow: 1px 1px 0 #CCC, 2px 2px 0 #CCC, /* end of 2 level deep grey shadow */ 3px 3px 0 #444, 4px 4px 0 #444, 5px 5px 0 #444, 6px 6px 0 #444; /* end of 4 level deep dark shadow */}效果如下：好了，到这里你已经创建了基本的3D文字，然而，让我们进一步来实现鼠标滑过的文字放大效果，并用css的transision属性实现圆滑的淡入淡出效果。 首先用transform属性实现滑过字体放大 复制代码代码如下:h2:hover{/* CSS3 Transform Effect */ -webkit-transform: scale(1.2); /* Safari Chrome */ -moz-transform: scale(1.2); /* Firefox */ -o-transform: scale(1.2); /* Opera */}效果如下：然后利用transition属性实现淡入淡出效果 复制代码代码如下:h2{/* CSS3 Transition Effect */ -webkit-transition: all 0.12s ease-out; /* Safari Chrome */ -moz-transition: all 0.12s ease-out; /* Firefox */ -o-transition: all 0.12s ease-out; /* Opera */}到此，我们就用CSS3实现了3D效果的文字，并且在鼠标滑过是让字体放大，且有淡入淡出的效果，这一切是用纯CSS实现的哦。

html+css3实现放大镜效果 （2021-08-25）

    1、给body添加背景图，在body中添加一个父盒子（父盒子开启绝对定位），父盒子中再添加一个子盒子。

    2、给window添加鼠标移动事件，根据鼠标在浏览器中的坐标（clientX和clientY）修改父盒子的top和left，以达到移动镜面的效果。

    3、给子盒子添加背景图（和body背景图一致），在window的鼠标移动事件中修改子盒子的样式——background-position，改变子盒子中的背景图在盒子中的显示位置，使背景图的显示与body一致。

    4、再给子盒子添加缩放（transform:scale(2)），即可实现放大功能。

    1、由于背景图无法设置透明度，所以使用body的伪元素，给伪元素添加背景图和opacity属性。

    2、这时虽然给背景设置上了透明的，但却是发白的那种透明，要想变成暗沉的透明，只需要给body添加背景颜色就行。

    3、background-position的使用，由于是要将背景的选中位置移动到盒子的中心，所以使用的是负值。

!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"

  titleDocument/title

  style

    body {

      padding: 0;

      background-color: #000;

      margin: 0;

    }

    body::after{

      display: block;

      position: absolute;

      top: 0;

      left: 0;

      content: '';

      width: 100%;

      height: 100%;

      background-image: url('伊芙琳.jpg');

      background-position: 0px 0px;

      background-size: 100% auto;

      opacity: 0.1;

    }

    .magnifier {

      width: 300px;

      height: 300px;

      background-image: url('伊芙琳.jpg');

      background-size: 1730px auto;

      background-position: 0px 0px;

      transform: scale(2);

      margin: 0;

      position: relative;

      z-index: 100;

    }

    .main {

      width: 300px;

      height: 300px;

      border-radius: 50%;

      overflow: hidden;

      position: absolute;

    }

  /style

/head

body

  div class="main"

    div class="magnifier"/div

  /div

  script

    let flag = true

    let magnifier = document.getElementsByClassName('magnifier')[0]

    let main = document.getElementsByClassName('main')[0]

    let boxLeft = 0

    let boxTop = 0

    window.onmousemove = (event) = {

      if(!flag) return

      setTimeout( ()={

          flag = true

      },50)

      console.log(event.clientX, event.clientY);

      if(event.clientX  1590) {

        event.clientX = 1590 

      }

      boxLeft =  event.clientX  1590 ? '1440px' : event.clientX  150 ? event.clientX - 150 + 'px':'0px'

      boxTop = event.clientY  720 ? '575px' : event.clientY  150 ? event.clientY - 150 + 'px':'0px'

      main.style.left = boxLeft

      main.style.top = boxTop

      // magnifier.style.backgroundPosition = '830px 570px'

      magnifier.style.backgroundPosition = '-' + boxLeft + ' ' + '-' + boxTop

      flag = false

    }

  /script

/body

/html

关于css3放大效果的代码和css实现放大缩小的动画效果的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。