放大镜旋转 css,css3中仿放大镜效果的几种方式原理解析

文章标题为啥是“仿放大镜”？

因为我今天要说的，并不是像一般说的，鼠标移入时旁边弹出一个局部的大图，那很好写，也没多少技巧(用相对定位定位父元素(或说：原图)，绝对定位定位局部大图(目的：让它处于原图旁边某位置)，在旁边用css控制样式并用鼠标事件监听，，，当然，你也可以直接用jquery中的接口——$(‘类名’).jqzoom({zoomwidth:xx; zoomheight: xx; zoomtype:‘reverse’;})最后的type定义了放大镜类型)

好了，言归正传，我今天要说的是鼠标移入时图片在原位置放大的动画！

没错，就是动画。(如下：从某网站抠图)

起初想到的是css3的 @keyframes属性，因为这个用的多一些嘛，

比如：你可以用 from…to 来指定样式——入场动画和出场动画

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

先知：css3属性transform——(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)

例如：

元素正常宽度是 100px，鼠标经过时宽度变为 200px。

如果只设置宽度值，效果如下图：

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

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

大家好呀！我是谁你猜？

#container {

margin: 200px;

position: relative;

width: 300px;

height: 300px;

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%;

height: 20px;

line-height: 20px;

font-size: 18px;

color: white;

text-align: center;

}

#container:hover {

transform: scale(1.3);

}

解析：

(1)添加容器的 hover 伪类，通过 transform 属性设置容器放大效果

(2)设置容器的 transition 属性，属性值为 transform 以及其动画时长

到此这篇关于css3中仿放大镜效果的几种方式原理解析的文章就介绍到这了,更多相关css3仿放大镜内容请搜索萬仟网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持萬仟网！

放大镜旋转 css,css3中仿放大镜效果的几种方式原理解析相关推荐

[css] CSS3中的transition是否可以过渡opacity和display？
[css] CSS3中的transition是否可以过渡opacity和display? transition过渡display是有一个前提条件: 浏览器渲染是在每一帧的最后,每一帧都会执行以下操作: ...
c语言中按照“|”字符串截取,shell中取字符串子串的几种方式截取substr
echo "123456789" | awk '{print substr($0,5,2)}' 截取 1)awk中函数substr substr(源字符串,开始索引,长度) 开 ...
html中获取modelandview中的json数据_从Bitmap中获取YUV数据的两种方式
从Bitmap中我们能获取到的是RGB颜色分量,当需要获取YUV数据的时候,则需要先提取R,G,B分量的值,然后将RGB转化为YUV(根据具体的YUV的排列格式做相应的Y,U,V分量的排列) 所以这篇 ...
【总结】实现点击累加效果的几种方式对比
//实现点击累加效果的几种方式对比Author:李金涛:Time:2018-1-1(新年新气象,更上一层楼.持续写博客.不断总结优化,博观约取,才能厚积薄发!)// 1,利用全局作用域不销毁的原理,把 ...
CSS清除浮动（float）的三种方式
标题CSS清除浮动(float)的三种方式为什么要清除浮动? 浮动的原理是让图片脱离文档流,直接浮在画面上.我们一般布局都是只设置宽度不设置高度,让内容来填充高度.但利用浮动后会让原本填充的高度消失 ...
JS-01-在HTML中嵌入JavaScript代码的三种方式
JS-01-在HTML中嵌入JavaScript代码的三种方式 1.JavaScript概述 Web的组成有HTML.CSS还有即将要学习的JavaScript(简称JS). CSS和JS主要是服务于 ...
在HTML 中嵌入 JS 代码的三种方式
一,在HTML中嵌入JS代码的第一种方式:行间事件行间事件是指将JavaScript函数写到HTML元素中的执行事件. 1.JavaScript 是一种事件驱动型的编程语言,通常都是在发生某个事件的 ...
JavaScript——关于JavaScript、在HTML中嵌入JS代码的三种方式、变量
文章目录 JavaScript 01 关于JavaScript 1.1 JS的发展历史 1.2 JS的特性 1.3 JS的组成 1.4 JSP和JS的区别 02 在HTML中嵌入JS代码的三种方式 2 ...
Android studio中TextView改变字体的两种方式（如仿宋、隶书）
在Android中系统默认的字体有三种,通过在TextView中加上android:typeface="sans"来改变,而sans就是三种当中的其中的一种,还有两种分别是&quo ...
把一个数组的值存入二叉树中，然后利用前序、中序、后序3种方式进行遍历（完整代码以及运行结果）（Java）
把一个数组的值存入二叉树中,然后利用前序.中序.后序3种方式进行遍历(完整代码以及运行结果) 在最近的面试过程中,听说有小伙伴被面试官要求创建二叉树,然后对该二叉树进行遍历,感觉这一直以来都是一个大家 ...

放大镜旋转 css,css3中仿放大镜效果的几种方式原理解析

放大镜旋转 css,css3中仿放大镜效果的几种方式原理解析相关推荐

最新文章

热门文章