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 ...
随机推荐
- HyperLedger Fabric 1.4 多机多节点部署（10.3）
多机多节点指在多台电脑上部署多个组织和节点,本案例部署一个排序(orderer)服务,两个组织(org1,org2)和四个节点(peer),每个组织包括两个节点,需要五台计算机,计算机配置如下: 多机 ...
- AS 3.1 多library合并打包成aar的正确方式（fat-aar）
前言 主要参考fat-aar来合并打包. 但是这个fat-aar很久没维护了,如果直接使用它会有很多问题.由于对gradle脚本也不是太熟,就只能顺着它的意思,将gradle降级成2.2.3的版本. ...
- day 2 飞机大战原理
1. 程序的图片的坐标 (左上角为顶点) 2.图片变成动态的 3.集成显卡 和独立显卡
- Java：内存泄露和内存溢出
1. 内存溢出 (Memory Overflow) 是指程序在申请内存时,没有足够的内存空间供其使用,出现out of memory:比如申请了一个integer,但给它存了long才能存下的数,那就 ...
- jQuery wordexport导出 word
同事给我说了简单的导出word的插件,亲测了下,做个随笔. 这个导出插件是jQuery自带的的插件,通过调用wordexport.js来实现导出功能. 1.引入的js <script type= ...
- mysql源码
从代码的角度来说,没有丝毫设计感,尤其是优化器部分.不过那些是常年累积的原因,一些新加较独立的部分,设计的就很舒服,真正的面向对象做法.
- 2019年猪年海报PSD模板-第六部分
14套精美猪年海报,免费猪年海报,下载地址:百度网盘,https://pan.baidu.com/s/1WdlIiIdj1VVWxI4je0ebKw
- 2019年猪年海报PSD模板-第一部分
14套精美猪年海报,免费猪年海报,下载地址:百度网盘,https://pan.baidu.com/s/1i7bIzPRTX0OMbHFWnqURWQ
- 解析Java中final关键字的各种用法
首先,我们可以从字面上理解一下final这个英文单词的中文含义:“最后的,最终的; 决定性的; 不可更改的:”.显然,final关键词如果用中文来解释,“不可更改的”更为合适.当你在编写程序,可能会遇 ...
- 加密SecurityHelper
接下来给大家分享一下我用的加密helper,现在只用的md5加密的方法,网上很多方法找到的时候加密完了会变成乱码,这样对于密码这种字段保存的时候就会出错.其实只需要把加密完的byte字节转化成16位就 ...