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 ...
随机推荐
- Go语言中的变量
1 概述 变量(Variable)是程序运行过程中,内容可以变化(修改)的量,变量的功能是存储用户的数据,是计算机语言中能储存计算结果或能表示值抽象概念.变量,是通过变量的标识符定位值的过程.变量的内 ...
- 关于verilog中的signed类型
在数字电路中,出于应用的需要,我们可以使用无符号数,即包括0及整数的集合:也可以使用有符号数,即包括0和正负数的集合.在更加复杂的系统中,也许这两种类型的数,我们都会用到. 有符号数通常以2的补码形式 ...
- 北京Uber优步司机奖励政策（2月20日~2月21日）
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- sqlite helper
//-------------------------------------------------------------------------- // // Copyright (c) BUS ...
- Java开发工程师(Web方向) - 03.数据库开发 - 第3章.SQL注入与防范
第3章--SQL注入与防范 SQL注入与防范 经常遇到的问题:数据安全问题,尤其是sql注入导致的数据库的安全漏洞 国内著名漏洞曝光平台:WooYun.org 数据库泄露的风险:用户信息.交易信息的泄 ...
- 【input】输入框组件说明
input输入框组件 原型: <input value="[String]" type="[text | number | idcard | digit]" ...
- leetcode-第k个排列(Java和c++版）
第k个排列 给出集合 [1,2,3,…,n],其所有元素共有 n! 种排列. 按大小顺序列出所有排列情况,并一一标记,当 n = 3 时, 所有排列如下: "123" " ...
- 平衡的括号 （Parentheses Balance UVA - 673）
题目描述: 原题:https://vjudge.net/problem/UVA-673 题目思路: 1.水题 2.栈+模拟 3.坑在有空串 AC代码 #include <iostream> ...
- Python基础 之 文件操作
文件操作 一.路径 文件绝对路径:d:\python.txt 文件相对路径:在IDEA左边的文件夹中 二.编码方式 utf-8 gbk... 三.操作方式 1.只读 r 和 rb 绝对路径的打开操作 ...
- nodejs在linux环境下安装更新方式
#检查是否已经安装 rpm -qa | grep python #查版本 python #最好是重新安装 Python推荐版本( >= v2.5.0 & < 3.0.0 ),否则影 ...