css3-12 transform:scale(1.2,1.2)实现移入元素变大特效

一、总结

一句话总结：transform:scale(1.2,1.2)鼠标移入的时候变大一点点，超出边框的部分隐藏掉。

1、如何设计出好看的动态效果？

去别人网站参考

记得把功能写成函数

2、一般放大特效中多余的部分被怎么样了？

一般都是被影藏了，尤其是有边框的时候，多余部分隐藏才好看

15 overflow:hidden;

3、transform:scale(,)的两个参数是什么？

横向和纵向的放大倍数

26 $('img').mouseenter(function(){

27 $(this).css({'transform':'scale(1.2,1.2)'});

28 });

4、如何用transform实现自动的动画效果？

setInterval()+css()

animate()方法不行

还要设置一个数做参数，比如下面的选择，一定要有参数，不然样式没有 改变是没有动画效果的

3 setInterval(function(){

4 s+=30;

5 $('div').css({'transform':'rotate('+s+'deg)'});

二、transform:scale(1.2,1.2)实现移入元素变大特效

1、相关知识

2、代码

body{

padding:200px;

}

div{

width:256px;

height:256px;

border:2px solid #999;

overflow:hidden;

}

$('img').mouseenter(function(){

$(this).css({'transform':'scale(1.2,1.2)'});

});

$('img').mouseleave(function(){

$(this).css({'transform':'scale(1,1)'});

});

$('div').click(function(){

s=0;

setInterval(function(){

s+=30;

$('div').css({'transform':'rotate('+s+'deg)'});

m=s/30;

if(parseInt(m%4)==0){

$('div').css({'transform':'translate('+200+'px,'+200+'px)'});

}else if(parseInt(m%4)==1){

$('div').css({'transform':'translate('+0+'px,'+0+'px)'});

}

else if(parseInt(m%4)==2){

$('div').css({'transform':'translate('+0+'px,'+200+'px)'});

}

else{

$('div').css({'transform':'translate('+200+'px,'+0+'px)'});

}

},100);

});

CSS3中transform属性的用法

有时候网站也要愚弄一下访客,比如愚人节.下面我给大家推荐个效果,就是整个页面左右颠倒了.css3 很强大,简单的几行代码就可以帮我们实现这个效果. view source   print? 01 &l ...

小tips: zoom和transform:scale的区别

小tips: zoom和transform:scale的区别 转自 张鑫旭 前端大神 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://w ...

CSS3实现鼠标移动到图片上图片变大(缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义)

转载自:http://blog.csdn.net/u014175572/article/details/51535768 CSS3的transform:scale()可以实现按比例放大或者缩小功能. ...

CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)

CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)   在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...

css3 transform:scale(x)实现字体的缩放：

css3 transform:scale(x)字体的缩放: transform:scale(x),针对于整体的缩放,缩放的整体包括宽,高,背景.这自然对于内联元素就无法使用此属性,最好使用无属性的sp ...

zoom和transform:scale的区别

小tips: zoom和transform:scale的区别 这篇文章发布于 2015年11月3日,星期二,00:52,归类于 css相关. 阅读 7876 次, 今日 8 次 by zhangxin ...

css中zoom和transform:scale的区别

css中zoom和transform:scale的区别 关于zoom: 以前只是看到别人的代码中用过zoom,自己从未使用过,今天在探究ie7兼容inline-block时,发现里面提到了zoom.下 ...

随机推荐

学习ASP.NET MVC(六)——我的第一个ASP.NET MVC 编辑页面

在上一文章中由Entity Framework(实体框架)去实现了对数据库的CURD操作.在本篇文章中,主要是调试修改自动生成的动作方法和视图,以及调试编辑功能与编辑功能的Book控制器. 首先,在V ...

What every programmer should know about memory 笔记

What every programmer should know about memory, Part 1(笔记) 每个程序员都应该了解的内存知识[第一部分] 2.商用硬件现状      现在硬件的 ...

php-fpm

install php-fpm # Ubuntu sudo apt-get install python-software-properties; sudo add-apt-repository pp ...

Javascript中的Bind 、Call和Apply

看以下代码: var bind = Function.prototype.call.bind(Function.prototype.bind); 第一眼看上去,我能猜出它究竟是用来做什么的.它把x.y ...

WebIM(3)----性能测试

WebIM系列文章 在一步一步打造WebIM(1)和(2)中,已经讨论了如何开发一个WebIM,并且使用缓存来提高WebIM的性能,本文将编写一个程序模拟大量用户登录来对WebIM进行性能测试. 1. ...

压缩感知中的lp球：p范数最优化为什么总会导致一个稀疏的解的原因

转自:彬彬有礼. 压缩感知中的lp球:p范数最优化为什么总会导致一个稀疏的解的原因 http://blog.csdn.net/jbb0523/article/details/40268943 题目: ...

VBS 备份文件

http://www.cnblogs.com/top5/archive/2009/11/17/1604767.html 参考上面的博客 ' =============== 局域网文件自动备份 VBS ...

简单网络搭建与测试 mininet

简介 本实验是基于pox搭建简单的网络并测试网络的连通性,利用mininet代码创建一个交换机四个主机的拓扑,测试各主机之间的连通性以及h1.h4之间的带宽. 代码 实验代码如下所示,SingleSw ...

UML-6.3-用例-详述示例

用例标示:摘要(主成功场景).非正式(几乎所有场景).详述. 下边主要说下详述.其模板: 例子: 用例UC1:处理销售 范围 NextGen POS应用 级别 用户目标 主要参与者 收银员 涉众及关注 ...

CodeForces - 1059D(二分+误差)

链接:CodeForces - 1059D 题意:给出笛卡尔坐标系上 n 个点,求与 x 轴相切且覆盖了所有给出点的圆的最小半径. 题解:二分半径即可.判断:假设当前二分到的半径是 R ,因为要和 x ...