CSS3实现超炫酷鼠标悬停遮罩动画特效.zip资源-CSDN文库

共12个文件

jpg：5个

css：2个

ttf：1个

需积分: 5 117 浏览量 2022-10-31 02:15:08 上传评论收藏 136KB ZIP 举报

在网页设计中，CSS3（层叠样式表第三版）为开发者提供了丰富的视觉效果和动态交互体验。"CSS3实现超炫酷鼠标悬停遮罩动画特效"是利用CSS3特性来创建的一种常见且吸引人的网页元素交互方式，通常用于图片、按钮或其他可交互元素上。当用户将鼠标指针悬停在这些元素上时，会触发一个半透明的遮罩层，带来动画效果，增强用户体验。下面将详细讲解如何实现这样的效果。我们需要理解基本的HTML结构。通常，我们会有一个包含图片的`<div>`元素，该元素将作为遮罩动画的目标。例如： ```html <div class="hover-mask"> <img src="your-image.jpg" alt="Your Image Description"> </div> ``` 接下来，我们使用CSS3来定义样式。设置图片的尺寸和位置，然后为`.hover-mask`添加一个相对定位，以便我们可以相对于此元素定位遮罩层： ```css .hover-mask { position: relative; width: 300px; /* 自定义宽度 */ height: 200px; /* 自定义高度 */ } .hover-mask img { width: 100%; height: auto; } ``` 接着，我们需要创建一个遮罩层，这通常是一个绝对定位的`::before`或`::after`伪元素。这里我们使用`::before`： ```css .hover-mask::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); /* 可调整透明度 */ opacity: 0; /* 初始状态为不可见 */ transition: opacity 0.5s; /* 添加过渡效果 */ } ``` 我们为`.hover-mask:hover::before`添加悬停时的样式，改变遮罩层的`opacity`值，实现动画效果： ```css .hover-mask:hover::before { opacity: 1; /* 鼠标悬停时变为可见 */ } ``` 至此，基本的鼠标悬停遮罩动画已经完成。但为了增加更多炫酷的效果，可以使用CSS3的其他属性，如`transform`进行旋转、缩放等动画，或者添加阴影、渐变等视觉效果。例如： ```css .hover-mask:hover::before { opacity: 1; transform: scale(1.2); /* 缩放动画 */ box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); /* 添加阴影 */ } ``` 通过以上步骤，你可以创建出一个具有悬停遮罩动画效果的元素。在实际应用中，可以根据需求调整颜色、透明度、动画速度以及动画类型，以适应不同的设计风格和品牌调性。这个压缩包中的"132689947314588003"文件可能是一个示例代码或者CSS样式文件，用于展示这种特效的具体实现，可以下载并参考其中的代码进行学习和实践。

资源推荐

资源详情

资源评论

收起资源包目录

CSS3实现超炫酷鼠标悬停遮罩动画特效.zip （12个子文件）

132689947314588003

CSS_transform_sbxt

css

htmleaf-demo.css 6KB

bootstrap-grid.min.css 28KB

2.jpg 38KB

1.jpg 36KB

images

2.jpg 12KB

1.jpg 18KB

3.jpg 21KB

fonts

icomoon.woff 1KB

icomoon.svg 2KB

icomoon.eot 2KB

icomoon.ttf 1KB

index.html 6KB

<!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 href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="css/bootstrap-grid.min.css" /> <link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css"> <style type="text/css"> .demo{padding: 2em 0;} .box{ font-family: 'Zilla Slab', serif; overflow: hidden; position: relative; } .box:before{ content: ''; height: 100%; width: 100%; background-image: radial-gradient(circle at 25% 25%, rgba(255,255,255,0.2) 10%, transparent 15%), radial-gradient(circle at 75% 75%, rgba(255,255,255,0.4) 10%, transparent 15%); background-size: 40px 40px; transform: translateX(-50%) scale(2); opacity: 0; position: absolute; left: 50%; top: 0; z-index: 1; transition: all 0.3s ease 0s; } .box:hover:before{ transform: translateX(-50%) scale(1); opacity: 1; } .box:after{ content: ''; height: 100%; width: 100%; background: radial-gradient(transparent,rgba(0,0,0,0.7)); transform: scale(2); opacity: 0; position: absolute; left: 0; top: 0; transition: all 0.3s ease 0.1s; } .box:hover:after{ transform: scale(1); opacity: 1; } .box img{ width: 100%; height: auto; transition: all 0.3s ease 0s; } .box .box-content{ color: #6F1E51; background-color: rgba(255,255,255,0.7); text-align: center; width: 80%; padding: 40px 20px; border-left: 4px solid #fff; border-right: 4px solid #fff; transform:translateX(-50%) translateY(-50%) scale(0.2) rotate(-90deg); opacity: 0; position: absolute; left: 50%; top: 50%; z-index: 2; transition: all 0.3s ease 0s; } .box:hover .box-content{ transform: translateX(-50%) translateY(-50%) scale(1) rotate(0); opacity: 1; } .box .title{ font-size: 25px; font-weight: 700; text-transform: uppercase; text-shadow: 0 0 2px #fff; margin-bottom: 5px; } .box .post{ color: #000; font-size:14px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 10px; display: block; } .box .icon{ list-style: none; text-align: center; padding: 0; margin: 0; } .box .icon li{ margin:0 4px; display: inline-block; } .box .icon li a{ color: #fff; background-color: #6F1E51; font-size: 17px; text-align: center; line-height: 30px; width: 30px; height: 30px; border-radius:10px; display: block; transition:all 0.3s ease 0s; } .box .icon li a:hover{ color: #6F1E51; background-color: #fff; box-shadow: 0 0 5px #6F1E51 ; } @media only screen and (max-width:990px){ .box{ margin-bottom: 30px; } } @media only screen and (max-width:479px){ .box .title{ font-size: 20px; } } </style> </head> <body> <div class="htmleaf-container"> <header class="htmleaf-header"> <h1>超炫酷CSS3鼠标悬停动画特效 <span>A CSS3 Hover Effect Style</span></h1> <div class="htmleaf-links"> <a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.jb51.net/" title="脚本之家" target="_blank"><span> 脚本之家</span></a> <a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.jb51.net/" title="返回下载页" target="_blank"><span> 返回下载页</span></a> </div> </header> <div class="demo"> <div class="container"> <div class="row"> <div class="col-md-4 col-sm-6"> <div class="box"> <img src="images/1.jpg" alt=""> <div class="box-content"> <h3 class="title">Williamson</h3> <span class="post">Web designer</span> <ul class="icon"> <li><a href="#"><i class="fa fa-search"></i></a></li> <li><a href="#"><i class="fa fa-link"></i></a></li> </ul> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="box"> <img src="images/2.jpg" alt=""> <div class="box-content"> <h3 class="title">Miranda Roy</h3> <span class="post">Web developer</span> <ul class="icon"> <li><a href="#"><i class="fa fa-search"></i></a></li> <li><a href="#"><i class="fa fa-link"></i></a></li> </ul> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="box"> <img src="images/3.jpg" alt=""> <div class="box-content"> <h3 class="title">Steve Thomas</h3> <span class="post">Web designer</span> <ul class="icon"> <li><a href="#"><i class="fa fa-search"></i></a></li> <li><a href="#"><i class="fa fa-link"></i></a></li> </ul> </div> </div> </div> </div> </div> </div> </div> </body> </html>

评论收藏

内容反馈