CCS3 动画－鼠标放上去放大背景图片
－－－〉
效果如上，一个简单的过渡放大效果，
<!DOCTYPE HTML>
<html>
<body>
<style>
#test{
width:300px;
height:300px;
background:#ccc;
border:5px solid #ccc;
overflow:hidden;
}
#con{
width:300px;
height:300px;
background:url("2.jpg") -20px -20px;
transition:all ease-in-out 0.5s; }
#con:hover{
transform:scale(1.1);
}
</style>
<div id="test">
<div id="con"></div>
</div>
</body>
</html>
这里transition:all ease-in-out 0.5s;设定变形参数， transform:scale(1.1);是原图放大1.1倍
CCS3 动画－鼠标放上去放大背景图片的更多相关文章
- jquery实现鼠标移入移除背景图片切换
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- WPF 渐隐渐现切换背景图片
最近学习WPF,尝试着自己做一些小玩意,也遇到了一些问题,于是整理记录以便日后查阅. 我们都知道WPF可以实现一些很炫的效果,然而有时候为达到这个目的却并不是一件很容易的事情.比如:在软件中我希望能够 ...
- j-query应用---鼠标悬停不同文字显示不同背景图片banner动画
源代码部分:注意事项:样式表的引用的路径要一致. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
- JS实现 鼠标放上去 图片自动放大的效果
前段时间做项目,要实现,一张图片,鼠标放上去图片自动变大的效果,虽然难度不大,但当时也想了一段时间,当时没时间记录一下,现在有时间了,写篇博客把代码给记录一下: 效果如下: 代码如下: <!DO ...
- 代码： CSS3动画，简单示例（鼠标移上去后，背景图片旋转）
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.mi ...
- app引导页(背景图片切换加各个页面动画效果)
前言:不知不觉中又加班到了10点半,整个启动页面做了一天多的时间,一共有三个页面,每个页面都有动画效果,动画效果调试起来麻烦,既要跟ios统一,又要匹配各种不同的手机,然后产品经理还有可能在中途改需求 ...
- 使用javascript编写根据用户鼠标控制背景图片的移动
在一家VR公司做前端. 起初进入前端就是一种内心的直觉,创造更好的用户体验,让页面更加友好,当然最起初接手web项目还是为了完成毕业设计. 一个网上图书商城,虽然不大,但五脏都有毕竟开刀所以避免不了很 ...
- 点击图片或者鼠标放上hover .图片变大. 1)可以使用css中的transition, transform 2) 预先设置一个 弹出div. 3)弹出层 alert ; 4) 浏览器的宽度document.documentElement.clientWidth || document.body.clientWidth
变大: 方法一: 利用css属性. 鼠标放上 hover放大几倍. .kecheng_02_cell_content img { /*width: 100px; height: 133px;*/ wi ...
- 基于html5页面滚动背景图片动画效果
基于html5页面滚动背景图片动画效果是一款带索引按钮的页面滚动动画特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="fullpage&q ...
随机推荐
- (转)service apache2 restart失败
https://askubuntu.com/questions/431925/how-to-restart-apache2-when-i-get-a-pid-conflict sudo kill -9 ...
- #!/System/Library/Frameworks/Ruby.framework/Versions/Current/usr/bin/ruby
#!/System/Library/Frameworks/Ruby.framework/Versions/Current/usr/bin/ruby # This script installs to ...
- 【LG1527】[国家集训队]矩阵乘法
[LG1527][国家集训队]矩阵乘法 题面 洛谷 题解 我也不知道为什么取个这样的名字... 其实就是区间\(kth\)扩展到二维 还是用整体二分搞啦,把树状数组换成二维的 其他的基本没有什么差别 ...
- 无偏方差为什么除以n-1
设样本均值为,样本方差为,总体均值为,总体方差为,那么样本方差有如下公式:. 很多人可能都会有疑问,为什么要除以n-1,而不是n,但是翻阅资料,发现很多都是交代到,如果除以n,对样本方差的估计不是无偏 ...
- (转) 如何从 0 开始学 ruby on rails （漫步版）
原文:http://readful.com/post/12322300571/0-ruby-on-rails ruby 是一门编程语言,ruby on rails 是 ruby 的一个 web 框架, ...
- wamp报错SCREAM:Error suppression ignored for
问题:SCREAM:Error suppression ignored for 解决: 在php.ini最下面加入scream.enabled = Off http://stackoverflow.c ...
- MyBatis-SELECT基本查询
1.返回一个LIST <!-- public List<Employee> getEmpsByLastNameLike(String lastName); --> <!- ...
- linux-flock文件锁之实际运用
vi test.sh #! /bin/bash echo "Hello World" touch test.lock #随便命名 [root@localhost ~]# flock ...
- 「知识学习」二分图的最大匹配、完美匹配和匈牙利算法（HDU-2063）
定义 如果一个图\((E,V)\)的顶点集\(E\)能够被能够被分成两个不相交的集合\(X,Y\),且每一条边都恰连接\(X,Y\)中的各一个顶点,那么这个图就是一个二分图. 容易得知,它就是不含有奇 ...
- Linux命令应用大词典-第11章 Shell编程
11.1 declare:显示或设置Shell变量 11.2 export:显示或设置环境变量 11.3 set:显示和设置Shell变量 11.4 unset:删除变量或函数 11.5 env:查看 ...