新浪博客

css实现鼠标滑过图片，图片以中心为原点进行放大

2018-04-10 15:06阅读：

http://blog.sina.cn/dpool/blog/u/5360476651

原文链接：https://blog.csdn.net/u014175572/article/details/51535768




CSS3的transform:scale()可以实现按比例放大或者缩小功能。
CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。
效果如下图所示：
1、当未鼠标未放到图片上的效果：


2、当鼠标放到图片上后(放大的过程是有动画过渡的，这个过渡的时间可以自定义)：


代码如下：
[html] view plain copy

  1. >
  2. <</span>html>
  3. <</span>head>
  4. <</span>meta charset='UTF-8'>
  5. <</span>title></</span>title>
  6. <</span>style type='text/css'>
  7. div{
  8. width: 300px;
  9. height: 300px;
  10. border: #000 solid 1px;
  11. margin: 50px auto;
  12. overflow: hidden;
  13. }
  14. div img{
  15. cursor: pointer;
  16. transition: all 0.6s;
  17. }
  18. div img:hover{
  19. transform: scale(1.4);
  20. }
  21. </</span>style>
  22. </</span>head>
  23. <</span>body>
  24. <</span>div>
  25. <</span>img src='img/focus.png' />
  26. </</span>div>
  27. </</span>body>
  28. </</span>html>


其中：

transition: all 0.6s;表示所有的属性变化在0.6s的时间段内完成。

transform: scale(1.4);表示在鼠标放到图片上的时候图片按比例放大1.4倍。




代码下载地址：http://download.csdn.net/detail/u014175572/9535023

我的更多文章

下载客户端阅读体验更佳

APP专享