`
zhengdl126
  • 浏览: 2538041 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类

css3图片鼠标滑过放大效果

 
阅读更多
<!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-Type" content="text/html; charset=UTF-8">
<title>css3图片鼠标滑过放大效果</title>
<style type="text/css">
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}
ul,ol,li{list-style:none;}
input,button{margin:0;font-size:12px;vertical-align:middle;}
body{font-size:12px;font-family:Arial, Helvetica, sans-serif; color:#333; margin:0 auto; }
table{border-collapse:collapse;border-spacing:0;}
a{ color:#333; text-decoration:none;}
a:hover{ text-decoration:none;}
.scale{ width:420px; margin:20px auto; height:70px; }
.scale li img{border:2px solid #E2E2E2;float: left;height:80px;margin-right:25px;opacity: 0.8;overflow: hidden; padding: 2px;width:90px;}
.scale li:hover img{-webkit-transform:scale(1.23);-moz-transform: scale(1.23);-o-transform:scale(1.23);}
</style></head>

<body>
<ul class="scale">
    <li><a href="#"><img src="11.png"></a></li>
    <li><a href="#"><img src="11.png"></a></li>
    <li><a href="#"><img src="11.png"></a></li>
</ul>


</body></html>

 

 

分享到:
评论

相关推荐

    CSS3鼠标滑过放大图片

    在网页设计中,CSS3(层叠样式表第三版)为开发者提供了许多强大的新特性,其中之一就是能够实现鼠标滑过时图片放大的效果。这种效果可以增强用户体验,使用户在不离开当前页面的情况下预览图片的细节。接下来,我们...

    JS+CSS鼠标经过放大图片(很酷).

    "JS+CSS鼠标经过放大图片(很酷)"这个主题就是一种常见的交互设计技术,它可以在用户将鼠标悬停在图片上时,使图片自动放大,给用户带来更直观、更生动的视觉体验。这种效果常常用于产品展示、相册浏览等场景,让...

    CSS3鼠标经过图片旋转放大代码

    总结来说,"CSS3鼠标经过图片旋转放大代码"是利用CSS3的`transform`和`:hover`选择器来创建的一种交互式图片特效,它使得网页元素在鼠标悬停时呈现出动态旋转和放大的效果,从而提升用户体验。这种技术在现代网页...

    css3炫酷圆形图片鼠标滑过特效

    本项目聚焦于CSS3的一个特定应用——创建炫酷的圆形图片鼠标滑过特效,这为网页设计带来了丰富的交互性和动态美感。以下是关于这个主题的详细知识点: 1. **CSS3选择器和属性**: - `:hover`伪类:在鼠标指针悬停...

    CSS3鼠标经过图片旋转放大特效.zip

    这个“CSS3鼠标经过图片旋转放大特效”就是一个利用CSS3的:hover伪类、transform属性以及transition属性来创建交互式用户体验的实例。 首先,我们来详细解释一下CSS3中的:hover伪类。这个伪类是当用户将鼠标指针...

    css鼠标滑过图片放大

    "css鼠标滑过图片放大"是一个常见的需求,它可以增加用户对网页内容的互动感,提高用户体验。 首先,我们需要理解:hover伪类的工作原理。`:hover`是CSS3中的一个伪类选择器,它会在用户将鼠标指针悬停在某个元素上...

    CSS+jQuery模拟CSS3鼠标滑过图片放大动感效果.zip

    这个“CSS+jQuery模拟CSS3鼠标滑过图片放大动感效果”的压缩包文件,显然旨在教你如何利用这两种技术来实现一种常见的交互式图片展示功能。以下是关于这个主题的详细知识点: 1. CSS3:CSS3是CSS(层叠样式表)的...

    CSS鼠标经过放大图片+Lightbox图片展示

    在网页设计中,CSS(Cascading Style Sheets)是一种用于控制网页元素呈现样式的语言,而"CSS鼠标经过放大图片+Lightbox图片展示"是一种常见的交互设计技术,它提升了用户体验,使得用户能够更加直观地查看网页上的...

    8款CSS3鼠标滑过图片动画效果.zip

    【描述】中提到的8组效果,每组都有三种不同的鼠标滑过图片效果,这意味着用户可以有多种选择来适应不同项目的需求。这些效果可能包括但不限于以下几种: 1. 遮罩层淡入:当鼠标悬停在图片上时,一个半透明的遮罩层...

    css3动效 鼠标滑过出现光影效果

    在本教程中,我们将探讨如何使用CSS3实现鼠标滑过时的光影效果。 首先,我们需要创建HTML结构,包含一个或多个可以响应鼠标悬停的元素。例如,我们可以创建一个简单的列表: ```html 项目1 项目2 项目3 ``` ...

    CSS3鼠标滑过图片放大特效

    今天我们要来分享一款简单实用的CSS3鼠标滑过图片放大特效,我们可以将它应用在相册中,我们可以将鼠标移到图片上进行快速预览相片,你也可以扩展它,比如给图片加投影和边框等。整一个图片放大特效还是比较酷的。

    CSS3鼠标滑过图标放大旋转动画

    这次我们要分享一款纯CSS3实现的图片动画,当鼠标滑过小图标时,图标会放大,同时图标会出现旋转的动画效果。我们在很多个性化个人博客中经常看到鼠标滑过人物头像后头像图片旋转就是利用这种方法实现的。由于只用到...

    纯css特效*鼠标经过放大效果、魔豆

    【纯CSS特效:鼠标经过放大效果与魔豆】 在网页设计中,动态效果往往能吸引用户的注意力并提升用户体验。"纯css特效*鼠标经过放大效果、魔豆"就是这样一个例子,它利用CSS(Cascading Style Sheets)的力量,无需...

    css3鼠标滑过图片放大动画展示

    在网页设计中,CSS3(层叠样式表第三版)为开发者提供了许多强大的新特性,其中之一就是能够实现鼠标滑过图片时的动态效果,比如图片的放大动画。这个功能不仅提升了用户体验,还能使网站看起来更加生动有趣。接下来...

    CSS3鼠标滑过图片滤镜动画效果.rar_CSS3鼠标滑过图片滤镜动画效果

    在本文中,我们将深入探讨如何使用CSS3来创建一个鼠标滑过时的图片滤镜动画效果,这将基于提供的资源“CSS3鼠标滑过图片滤镜动画效果.rar”。这个资源包含了一个实例,展示了如何通过HTML5和CSS3的结合,为图片添加...

    CSS3实现鼠标滑过图片放大特效源码.zip

    在本资源中,"CSS3实现鼠标滑过图片放大特效源码.zip" 是一个包含CSS3技术实现的图片鼠标悬停放大效果的代码示例。这个压缩包可能包含了一个HTML文件、一个或多个CSS文件以及可能的图片资源,用于演示如何使用CSS3的...

    div+css制作的鼠标经过放大字体样式的特效

    ### div+css实现鼠标经过时字体放大的特效详解 在网页设计中,为了提升用户体验以及增强页面的互动性,开发者经常需要实现各种各样的动态效果。本文将详细介绍如何使用div和CSS来制作一个简单的鼠标经过时字体放大...

    常用的5种纯css3鼠标滑过图片动画效果

    在网页设计中,CSS3(层叠样式表第三版)为开发者提供了丰富的视觉效果和交互体验,其中之一就是鼠标滑过图片时的动画效果。本文将详细介绍五种常用的纯CSS3实现的鼠标滑过图片动画效果,并通过代码示例进行解析。 ...

    jquery+css3实现的鼠标滑过图片向上弹出放大效果.zip

    在本项目中,“jquery+css3实现的鼠标滑过图片向上弹出放大效果.zip”是一个包含使用jQuery和CSS3技术创建的交互式图片放大功能的压缩包文件。这个功能允许用户在鼠标滑过图片时,图片会以某种动画效果放大显示,...

    8款CSS3鼠标滑过图片动画效果

    在网页设计中,CSS3(层叠样式表第三版)为开发者提供了丰富的视觉效果和交互体验,其中之一就是鼠标滑过时的图片动画效果。本文将深入探讨如何利用CSS3实现8款不同的鼠标滑过图片动画效果,以提升用户体验并增加...

Global site tag (gtag.js) - Google Analytics