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 ...
随机推荐
- html5新特性与用法大全了解一下
有好多小伙伴私聊我问我html5新特性 和用法,下面我给大家具体介绍一下html5都新加了哪些新特性,下面我给大家总结一下. 1)新的语义标签 footer header 等等2)增强型表单 表单2. ...
- 成都Uber优步司机奖励政策（4月8日）
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- spring源码-BeanPostProcessor-3.3
一.BeanPostProcessor这个是spring容器的拓展之一,是用于获取bean的时候处理对应的对象: 二.常用场景,在获取bean的时候,重新初始化bean的属性等. 三.实现方式(加入容 ...
- letsencrypt证书-使用certbot申请wildcard证书
目录 1. certbot安装 2. 认证方式 3. 运行命令 4. 更新 1:下载 2:配置 3:申请证书 4:续期证书 1. certbot安装 cd /usr/local/src wget ht ...
- eclipse导入jmeter3.1源码并运行
jmeter3.1源码地址:https://archive.apache.org/dist/jmeter/source/ 1.打开eclipse,新建一个java project的项目,并点击next ...
- Maxscript-获取选中文件
Maxscript - 获取选中文件 使用 .Net 的方法弹出窗口选择文件,并范围所有选中文件的路径“” Fn Fun_GetFilePaths strTitle strFilter = ( dia ...
- 用Python实现一个端口扫描，只需简单几步就好
一.常见端口扫描的原理 0.秘密扫描 秘密扫描是一种不被审计工具所检测的扫描技术. 它通常用于在通过普通的防火墙或路由器的筛选(filtering)时隐藏自己. 秘密扫描能躲避IDS.防火墙.包过滤器 ...
- js写的数码时钟，在“最小化”浏览器 或者 “切换网页”是动画效果好像不对
一.问题 在“最小化”浏览器 或者 “切换网页”是动画效果不对,不知道哪里出了问题???是不是”最小化“时网页定时器关掉了,还是其他什么原因啊 ???? 二.HTML代码如下 <div id=& ...
- 关于@media不生效的问题和meta总结
1:之前做的是两套页面.现在改成响应式布局.发现加上 @media only screen and (max-width: 500px) { .gridmenu { width:1 ...
- Java内存管理特点
Java内存管理特点 Java一个最大的优点就是取消了指针,由垃圾收集器来自动管理内存的回收.程序员不需要通过调用函数来释放内存. 1.Java的内存管理就是对象的分配和释放问题. 在 ...