css3中仿放大镜效果的几种方式原理介绍

时间：2022-10-26 编辑：坚强来源：一聚教程网

本文为小伙伴们带来了关于css3中仿放大镜效果的几种方式原理介绍，感兴趣的小伙伴一起来看看吧。

起初想到的是css3的 @keyframes属性 ，因为这个用的多一些嘛，
比如：你可以用 from…to 来指定样式——入场动画和出场动画

还比如：你可以通过transition实现（ 今天重点 ）

先知：CSS3属性transform——（旋转:rotate,缩放:scale,倾斜:skew,移动:translate）

例如：
元素正常宽度是 100px，鼠标经过时宽度变为 200px。
如果只设置宽度值，效果如下图：

看起来是不是很生硬。我们再看一下加上 transition 的效果：

看了两个效果的差别，就大概明白 transition 属性的作用了吧。本例目标和宽度变化类似，只不过是换了一个最终效果。请继续往下看详细代码：


  
  大家好呀！我是谁你猜？

#container {
  margin: 200px;
  position: relative;
  
  
  background-color: greenyellow;
  transition: transform .5s ease-out;
}

#container img {
  width: 100%;
  height: 100%;
}

#container span {
  position: absolute;
  top: 0;
  left: 0;
  margin: 6px;
  width: 100%;
  
  line-
  font-size: 18px;
  color: white;
  text-align: center;
}

#container:hover {
  transform: scale(1.3);
}

解析：
（1）添加容器的 hover 伪类，通过 transform 属性设置容器放大效果
（2）设置容器的 transition 属性，属性值为 transform 以及其动画时长

上一个： CSS3切割轮播图的代码展示
下一个： CSS使用SVG实现动态分布的圆环发散路径动画教程

推荐专题

最新下载

热门教程

css3中仿放大镜效果的几种方式原理介绍

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程