CSS3鼠标悬停/经过图片炫酷动画特效

最新推荐文章于 2026-05-07 07:10:14 发布

原创

最新推荐文章于 2026-05-07 07:10:14 发布 · 1k 阅读

收录于

当前文章被以下社区和专栏收录：

本文介绍了一种使用纯CSS3实现的鼠标悬停图片动画特效，包括渐变遮罩、图片灰度化和图标动画等效果。适用于网页设计师和前端开发者，展示了如何通过CSS3增强网站交互体验。


<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯CSS3鼠标悬停图片炫酷动画特效</title>

<!--图标调用-->
<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">

<!--主要样式-->
<style>
.demo{padding:2em 0}
:root{--color_1:#fff;--main-color:#1dd1a1}
.box{text-align:center;position:relative;overflow:hidden}
.box:before,.box:after,.box-content:before,.box-content:after{content:'';background:linear-gradient(transparent,rgba(0,0,0,0.9));height:100%;width:25%;transform:translateY(-100%);position:absolute;left:0;top:0;z-index:1;transition:all 0.3s}
.box:hover:before,.box:hover:after,.box:hover .box-content:before,.box:hover .box-content:after{transform:translateY(0)}
.box:after{left:25%}
.box .box-content:before{left:50%}
.box .box-co

标签