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 ...
随机推荐
- 20145234黄斐《Java程序设计》第二周学习总结
教材学习内容总结 类型 Java可区分为基本类型(Primitive Type)和类类型(Class Type),其中类类型也叫参考类型(Reference Type). 字节类型,也叫byte类型, ...
- 2017Noip普及组游记
Day0 一天都基本在休息,早上信心赛,大家都是400整. 下午一群人窝在教室里打三国杀. Day1:Before Contest 早上大约十点到了试场,在考提高组,不能进. 喝了一杯咖啡去除早起的身 ...
- CF 643 E. Bear and Destroying Subtrees
E. Bear and Destroying Subtrees http://codeforces.com/problemset/problem/643/E 题意: Q个操作. 加点,在原来的树上加一 ...
- PyYAML学习第一篇
1. YAML是一种交互式和可读性强的脚本语言.脚本语言都是解释性语言. PyYAML是YAML语言的编辑器和解释器.在python语言里面有PyYAML的安装包. 相关学习文档:http://pyy ...
- Windows Server 2008 R2 安装域
在Windows Server 2008 R2里面安装域. 1.首先在"服务"里面添加"角色": 2.选择对应的域角色 3.安装完成后要启动配置向导 4.选择新 ...
- 「日常训练」Girls and Boys（HDU-1068）
题意 有n个同学,给出同学之间的爱慕关系,选出一个集合使得集合中的人没有爱慕关系.问能选出的最大集合是多少. 分析 二分图的最大独立集. 最大独立集的意思是,在图中选出最多的点,使他们两两之间没有边, ...
- selenium--特殊元素定位
该篇博客总结特殊元素(select.radio\checkbox.时间控件.文件上传.图片验证码.模拟鼠标操作.Js 或 JQuery调用)操作. 1.select @Test public void ...
- jmeter的脚本增强之参数化
jmeter作为一款开源的测试工具,功能广泛,深受测试同胞们的喜爱,这次来讲讲关于如何参数化及其方式.那为什么要进行一个参数化呢,如做压测时,要有大量的数据来模拟用户的真实场景,像登录页面操作,系统是 ...
- 209. First Unique Character in a String
Description Find the first unique character in a given string. You can assume that there is at least ...
- Android开发-API指南-<receiver>
<receiver> 英文原文:http://developer.android.com/guide/topics/manifest/receiver-element.html 采集(更新 ...