css鼠标悬停放大,css3鼠标悬停图片特效

　　以下为一个纯钢性铸铁写的图片鼠标悬浮缩放效果，其实基本原理十分简单，我们访问一些网站可以发现他们都会对图片做一些交互效果的处理，当然实现图片过渡效果有很多方式，例如使用框架或者一些第三方射流研究…动画库，本例仅是展示基本的效果，不对所用知识进行归纳。代码如下：

　　！DOCTYPE html lang= en head meta charset= UTF-8 meta http-equiv= X-UA-Compatible content= IE=edge meta name= viewport content= width=device-width，initial-scale=1.0 标题文档/标题脚本/脚本样式* { box-sizing:border-box；} body {背景色：rgb(251，163，163)；} /* 长条图样式*/.容器列表{位置：相对；边距-顶部：100像素左边距：10%;高度：100像素宽度：80%;溢出：隐藏；边框半径：30pxbox-shadow: rgb(54，53，53)10px 10px 10px；} .列表{位置：绝对；宽度：100%;身高：100%;背景-位置：中心；背景-尺寸：封面；边框半径：30px过渡：0.5秒颜色：白色；字体粗细：粗体；文本对齐：居中；} .list:hover { transform:scale(1.2)；}/style/head body h1 style= text-align:center；颜色：白色；背景色：黑色；效果测试/h1！-长条图-div class= contain list div class= list style= background-image:URL(006。jpg)；和服少女/div/div div class= contain list div class= list style= background-image:URL(001。png)；天空鏡/div/div div class= contain list div class= list style= background-image:URL(002。png)；紫景色/div/div div class= contain list div class= list style= background-image:URL(003。png)；私一番可愛 /div /div /body/html实际效果:

　　git图

　　图片的样式可以自行进行更改，打造你自己的中二风格。

　　到此这篇关于CSS3鼠标悬浮过渡缩放效果的文章就介绍到这了，更多相关css3鼠标悬浮过渡缩放内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。