这是一个圆形边框做的效果 HTML <div class="circle-wrapper"> <img src="" > </div> CSS .circle-wrapper, .circle-wrapper img { display: inline-block; width: 50px; height: 50px; border-radius: %; -webkit-transition: .3s; transition: .…
transform:scale()可以实现按比例放大或者缩小功能. transition可以设置动画执行的时间,实现缓慢或者快速的执行动画,效果图如下: 源码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css实现鼠标移入时的放大效果</title> <style type="text/css"> div{…
FF(firefox)/chrom/ie稳定暂无bug...注意:请自己建立一个images文件,放入几张900*238的图片(注意图片格式和名字与程序中一致). 1. [图片] 1.JPG 2. [图片] 2.JPG 3. [文件] style.css ~ 443B #contain{    float:left;    width: 900px;    height: 240px;    border: 1px dotted red;}.imageShow{    width: 900px;…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-…
转载自:http://blog.csdn.net/u014175572/article/details/51535768 CSS3的transform:scale()可以实现按比例放大或者缩小功能. CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值. 效果如下图所示: 1.当未鼠标未放到图片上的效果: 2.当鼠标放到图片上后(放大的过程是有动画过渡的,这个过渡的时间可…
转载:http://www.cnblogs.com/jack86514/archive/2009/04/01/1427584.html 当我们在写一个网页程序的时候,很多方法可以提供页面的动态显示,从而提高页面的视觉效果. 本例就是通过一个简单的Javascript代码动态显示图片的信息的,其实这样的例子很多,所以这里只做简单的说明了. 现在就创建一个页面,代码如下所示: <html> <head> <meta http-equiv="Content-Type&qu…
前段时间做项目,要实现,一张图片,鼠标放上去图片自动变大的效果,虽然难度不大,但当时也想了一段时间,当时没时间记录一下,现在有时间了,写篇博客把代码给记录一下: 效果如下: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns…
css中cursor属性详解-鼠标移到图片变换鼠标形状   语法: cursor : auto | all-scroll | col-resize| crosshair | default | hand | move | help | no-drop | not-allowed | pointer | progress | row-resize | text | vertical-text | wait | *-resize | url ( url )  取值: auto  :   默认值.浏览…
效果图: 无意间看到过去流行的一个效果:[能感知鼠标方向的图片遮罩效果]近来不忙,就仔细的看了一看看到后来发现,网上有好多版本,谁是原著者似乎已经无法考证.读码就要读比较全面的,读像是原著的代码.代码随然不难,不过要能想到这个创意,并成功应用却很难! 另外,对于初学者,这也是不错的学习例子.含Jquery插件写法,css3等 英文教程:http://tympanus.net/TipsTricks/DirectionAwareHoverEffect/源码下载:http://tympanus.net…
CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义 <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 300px; height: 300px; border: #00…