给平淡的站点带来活力hover效果能给网页增加一些动态效果并且使得站点更具有活力。原来的做法是使用javascript来实现这些动态效果但是随着CSS3的引入和现代浏览器的支持我们可以用纯粹的CSS代码来实现这些有趣的效果。所谓的现代浏览器更多的是指以Mozilla和Webkit为核心的浏览器IE的表现稍微差强人意所以请使用FireFoxSafari或者Chrome查看一下的效果。如下就是要介绍的5个非常酷的纯CSS hover 效果。向上跳跃这种效果非常适合于当页面上有一横排图片的场景当鼠标hover时就产生波浪一样的效果。这个效果实现是非常简单的并且有多种方法实现如下的核心实现方法是初始给所有图片设置margin当hover时给相应的图片减少margin的值这样就实现了向上跳跃的效果。这种效果不光可以应用于图片一般的横向排列的导航栏也可以应用这样的效果。效果中的透明效果是并不是必须的不设置透明属性并不影响hover时的跳跃效果加上透明只是为了让效果更平滑。CSS代码123456789101112.ex1img{border:5pxsolid#ccc;float:left;margin:15px;-webkit-transition: margin0.5s ease-out;-moz-transition: margin0.5s ease-out;-o-transition: margin0.5s ease-out;}.ex1img:hover {margin-top:2px;}查看Demo层叠与放大这种效果类似于熔岩灯效果当鼠标从上至下移动时每个图片都是慢慢地放大然后恢复到原始的状态。为了实现这样的效果首先把原始图片显示的时候缩小一点当鼠标hover时放大图片的尺寸。因为图片是居中显示的所以当鼠标hover时也增加了图片的margin这样使得当图片放大时也是居中的效果。CSS代码1234567891011121314151617181920/*Example 2*/#container {width:300px;margin:0auto;}#ex2img{height:100px;width:300px;margin:15px0;-webkit-transition:all1s ease;-moz-transition:all1s ease;-o-transition:all1s ease;}#ex2img:hover {height:133px;width:400px;margin-left:-50px;}查看Demo文字淡入类似的这种效果一般是用JavaScript来实现的当hover其中某个元素时另一个元素发生一些变化。本例为了实现这一效果首先把图片和文字放在一个div里然后设置div的colortransparent和line-height:0px。当hover时更改color和line-height属性使得文字显示。CSS代码1234567891011121314151617181920212223#ex3{width:730px;height:133px;line-height:0px;color:transparent;font-size:50px;font-family:HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:300;text-transform:uppercase;-webkit-transition:all0.5s ease;-moz-transition:all0.5s ease;-o-transition:all0.5s ease;}#ex3:hover {line-height:133px;color:#575858;}#ex3img{float:left;margin:015px;}查看Demo旋转的图片实现这个效果是非常容易的但是因为这是一个非常重要的效果尤其对于画廊中的缩略图。这个效果中我们使用了一些较新的CSS样式。这个例子使用了box-shadows,transitions和transforms。transform是实现旋转部分transition是为了让效果更平滑。CSS代码123456789101112131415161718192021#ex4{width:800px;margin:0auto;}#ex4img {margin:20px;border:5pxsolid#eee;-webkit-box-shadow:4px4px4pxrgba(0,0,0,0.2);-moz-box-shadow:4px4px4pxrgba(0,0,0,0.2);box-shadow:4px4px4pxrgba(0,0,0,0.2);-webkit-transition:all0.5s ease-out;-moz-transition:all0.5s ease;-o-transition:all0.5s ease;}#ex4img:hover {-webkit-transform: rotate(-7deg);-moz-transform: rotate(-7deg);-o-transform: rotate(-7deg);}查看Demo淡入和倒影这个效果是相对复杂的效果首先设置减少图片的初始的透明度当hover时把透明度设置回默认值另外会有一个图片边缘发光的效果和倒影效果只在以Webkit为内核的浏览器中起作用。如果你对倒影效果不太懂的话可以参考这篇文章Image Reflections with CSSCSS代码1234567891011121314151617181920212223242526272829303132#ex5{width:700px;margin:0auto;min-height:300px;}#ex5img {margin:25px;opacity:0.8;border:10pxsolid#eee;/*Transition*/-webkit-transition:all0.5s ease;-moz-transition:all0.5s ease;-o-transition:all0.5s ease;/*Reflection*/-webkit-box-reflect:below0px-webkit-gradient(linear,lefttop,leftbottom, from(transparent), color-stop(.7,transparent), to(rgba(0,0,0,0.1)));}#ex5img:hover {opacity:1;/*Reflection*/-webkit-box-reflect:below0px-webkit-gradient(linear,lefttop,leftbottom, from(transparent), color-stop(.7,transparent), to(rgba(0,0,0,0.4)));/*Glow*/-webkit-box-shadow:0px0px20pxrgba(255,255,255,0.8);-moz-box-shadow:0px0px20pxrgba(255,255,255,0.8);box-shadow:0px0px20pxrgba(255,255,255,0.8);}查看Demo总结经过测试这些效果在以Webkit为核心的浏览器上表现最出色Mozilla次之IE最差如果要使得在IE9中的效果更好则需要其它的第三方JS库。以上的这五个纯CSS实现的hover效果应该会给你带来一些设计上的灵感你可以综合运用这些CSS样式并加入一些其他的CSS来产生一些有意思的效果。如果你也有一些非常酷的CSS效果欢迎参与讨论。编注以上的五种CSS Hover效果都应用了最新的CSS3效果在现代的浏览器中应用这些CSS能展现出非常漂亮的效果。值得一提的是IE9IE9不支持transition和transform这两种效果使得这五种效果在IE9下表现的不佳寄希望于IE10吧。文章编译来源5 Cool CSS Hover Effects You Can Copy and Paste
企业数字化 ERP 产品动态
相关推荐
如何用ESP32打造你的专属无线热敏打印机：从零到一的完整指南 如何用ESP32打造你的专属无线热敏打印机：从零到一的完整指南 【免费下载链接】ESP32-Paperang-Emulator Make a Paperang printer with ESP32 Arduino 项目地址: https://gitcode.com/gh_mirrors/es/ESP32-Paperang-Emulator
还在为市面上的便携打印机价格昂… · 2026/9/19 20:20:42
黑马点评-Redis Set-实现关注、取关和共同关注 Redis Set 实现关注、取关和共同关注：黑马点评第 9 章前半部分学习笔记 本文整理自黑马点评 Redis 实战篇第 9 章前半部分。第 9 章的主题是「好友关注」，前半部分主要解决两个问题：用户如何关注/取关另一个用户，以及如何用 Redis… · 2026/9/23 16:44:14
2026年7月亲测：深圳封箱机定制哪家强？ 2026年7月亲测：深圳封箱机定制哪家强？行业痛点分析当前，深圳工字封箱机定制厂家面临着三大核心挑战：多规格切换效率低下、复杂场景适配性不足以及综合成本居高不下。传统设备在换型时需停机调整模具，耗时15-30分钟&… · 2026/9/12 2:03:27
面试必问vlan交换机底层原理，3步吃透802.1Q 面试必问vlan交换机底层原理，3步吃透802.1Q 版本升级后 API 全变了？别慌，这往往是底层逻辑没吃透的信号。很多转岗做网络运维或后端开发的同行，在准备 面试必问 的底层题时，最头疼的就是 VLAN… · 2026/9/23 16:44:24
ThinkSystem DE系列XCC管理口与固件升级实战指南 简介：本资源是联想ThinkSystem DE系列存储设备（DE2000H/DE4000H等）的官方硬件维护手册PDF，专为IT运维工程师、存储系统管理员及硬件支持人员设计，解决设备级安装、更换、故障定位与预防性维护等核心问题。手册覆盖电池… · 2026/9/23 16:44:24
企业信用建设与数据安全管理的关键实践 1. 企业信用建设的时代价值与行业意义在数字经济高速发展的当下，企业信用已成为衡量商业主体综合实力的重要维度。北京市信用承诺企业评选作为区域信用体系建设的重要抓手，其评选结果直接反映了企业在合规经营、契约精神和社会责任方面的综合表现。建投数… · 2026/9/23 16:44:11
AI助手安全机制解析：从开放式生态到官方工具商店 1. 为什么我们需要更可信的AI助手？在人工智能技术快速发展的今天，AI助手已经成为我们日常生活和工作中的重要伙伴。从简单的日程提醒到复杂的业务流程自动化，AI正在承担越来越多的责任。但随之而来的安全问题也日益凸显——当AI助手能够自主执… · 2026/9/23 16:44:11
全同态加密从原理到实践：噪声、自举与密文计算入门 最近在整理隐私计算这块的笔记，正好把全同态加密（Fully Homomorphic Encryption，简称FHE）这条线从概念到落地实践系统地过了一遍。写这篇东西的初衷很简单：我发现网上讲FHE的资料要么是纯学术论文风格的数学推导&#… · 2026/9/23 16:44:11
SAP Fiori后端授权模型解析与最佳实践 1. SAP Fiori 后端授权模型概述在 SAP Fiori 应用开发与部署过程中，后端授权模型往往是最容易被忽视却又最为关键的一环。很多开发团队花费大量时间在前端界面设计和用户体验优化上，却在授权配置环节草草了事，导致应用上线后出现各种权限问题… · 2026/9/23 16:44:04
3招搞定手机怎么下载微信面试难题实战项目解析 3招搞定手机怎么下载微信面试难题实战项目解析 面试被问“手机怎么下载微信”背后的原理，90%的人答不上来。别笑，这看似弱智的问题，实则是考察你对移动应用分发机制、安全校验及网络协议理解的试金石。我带过不少校招新人，他们背了八股文，却连一个A… · 2026/9/23 0:00:03
你有新短消息请注意查收：3个新手避坑指南搞定消息系统选型 你有新短消息请注意查收：3个新手避坑指南搞定消息系统选型 面试被问“高并发下如何保证消息不丢失”，你张口就是“用Redis”，结果面试官追问“如果Redis宕机了怎么办”，你瞬间卡壳。这种场景太常见了，很多新手在背八股文时，只记住了技术名词… · 2026/9/23 0:00:29
