【CSS3小技巧】产品列表之鼠标滑过效果01

2024-01-16 11:38
文章标签 技巧 效果 产品 01 列表 鼠标 frontend css3 滑过

本文主要是介绍【CSS3小技巧】产品列表之鼠标滑过效果01，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

640?wx_fmt=jpeg

我们在开发项目的时候，会经常看到很多炫酷的鼠标效果，之前基本都是采用JS或者JQ来实现，但是只从CSS3出现后，很多效果，我们都可以通过纯CSS3来实现了，而且效果一点都不输给JS他们哦。

先来看看效果图：

640?wx_fmt=jpeg

以下是实现此效果的源码，你可以直接复制到你的文档里，存成HTML，即可查看效果了。

HTML代码：

<div class="main">

<div class="view view-tenth">

<img src="http://img95.699pic.com/photo/50108/2307.jpg_wh860.jpg" />

<div class="mask">

<h2>Wonder Girls</h2>

<p>Wonder Girls一向以青春活力的形象展现在观众面前，

先后在韩国和美国乐坛都取得了不错的成绩...</p>

<a href="#" class="link">查看全文</a>

</div>

</div>

<div class="view view-tenth">

<img src="http://img95.699pic.com/photo/50108/2307.jpg_wh860.jpg" />

<div class="mask">

<h2>Wonder Girls</h2>

<p>Wonder Girls一向以青春活力的形象展现在观众面前，

先后在韩国和美国乐坛都取得了不错的成绩...</p>

<a href="#" class="link">查看全文</a>

</div>

</div>

<div class="view view-tenth">

<img src="http://img95.699pic.com/photo/50108/2307.jpg_wh860.jpg" />

<div class="mask">

<h2>Wonder Girls</h2>

<p>Wonder Girls一向以青春活力的形象展现在观众面前，

先后在韩国和美国乐坛都取得了不错的成绩...</p>

<a href="#" class="link">查看全文</a>

</div>

</div>

<div class="view view-tenth">

<img src="http://img95.699pic.com/photo/50108/2307.jpg_wh860.jpg" />

<div class="mask">

<h2>Wonder Girls</h2>

<p>Wonder Girls一向以青春活力的形象展现在观众面前，

先后在韩国和美国乐坛都取得了不错的成绩...</p>

<a href="#" class="link">查看全文</a>

</div>

</div>

</div>


CSS代码：

.main *{

padding:0;

margin:0;

font-family:'Source Code Pro', Menlo, Consolas, Monaco, monospace;

box-sizing: content-box;

-webkit-box-sizing: content-box;

}

.main {

position: relative;

width: 680px;

margin: 0 auto;

}

.view {

width: 300px;

margin: 10px;

float: left;

border: 10px solid #fff;

overflow: hidden;

position: relative;

text-align: center;

-webkit-box-shadow: 1px 1px 2px #e6e6e6,-1px -1px 2px #e6e6e6;

-moz-box-shadow: 1px 1px 2px #e6e6e6,-1px -1px 2px #e6e6e6;

box-shadow: 1px 1px 2px #e6e6e6,-1px -1px 2px #e6e6e6;

cursor: default;

}

.view .mask{

width: 300px;

height: 200px;

position: absolute;

overflow: hidden;

top: 0;

left: 0;

}

.view img {

display: block;

position: relative;

max-width:100%;

}

.view h2 {

text-transform: uppercase;

color: #fff;

text-align: center;

position: relative;

font-size: 17px;

padding: 10px;

background: rgba(0, 0, 0, 0.8);

margin: 20px 0 0 0;

}

.view p {

font-size: 12px;

position: relative;

color: #fff;

padding: 10px 20px 20px;

text-align: left;

}

.view .link {

display: inline-block;

text-decoration: none;

padding: 7px 14px;

background: #000;

color: #fff;

text-transform: uppercase;

-webkit-box-shadow: 0 0 1px #000;

-moz-box-shadow: 0 0 1px #000;

box-shadow: 0 0 1px #000;

font-size: 14px;

}

.view .link: hover {

-webkit-box-shadow: 0 0 5px #000;

-moz-box-shadow: 0 0 5px #000;

box-shadow: 0 0 5px #000;

}

.view-tenth img {

-webkit-transform: scaleY(1);

-moz-transform: scaleY(1);

-o-transform: scaleY(1);

-ms-transform: scaleY(1);

transform: scaleY(1);

-webkit-transition: all 0.7s ease-in-out;

-moz-transition: all 0.7s ease-in-out;

-o-transition: all 0.7s ease-in-out;

-ms-transition: all 0.7s ease-in-out;

transition: all 0.7s ease-in-out;

}

.view-tenth .mask {

background-color: rgba(249, 179, 255, 0.3);

-webkit-transition: all 0.5s linear;

-moz-transition: all 0.5s linear;

-o-transition: all 0.5s linear;

-ms-transition: all 0.5s linear;

transition: all 0.5s linear;

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

filter: alpha(opacity=0);

opacity: 0;

}

.view-tenth h2 {

border-bottom: 1px solid rgba(0, 0, 0, 0.3);

background: transparent;

margin: 20px 40px 0px 40px;

-webkit-transform: scale(0);

-moz-transform: scale(0);

-o-transform: scale(0);

-ms-transform: scale(0);

transform: scale(0);

color: #333;

-webkit-transition: all 0.5s linear;

-moz-transition: all 0.5s linear;

-o-transition: all 0.5s linear;

-ms-transition: all 0.5s linear;

transition: all 0.5s linear;

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

filter: alpha(opacity=0);

opacity: 0;

}

.view-tenth p {

color: #333;

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

filter: alpha(opacity=0);

opacity: 0;

-webkit-transform: scale(0);

-moz-transform: scale(0);

-o-transform: scale(0);

-ms-transform: scale(0);

transform: scale(0);

-webkit-transition: all 0.5s linear;

-moz-transition: all 0.5s linear;

-o-transition: all 0.5s linear;

-ms-transition: all 0.5s linear;

transition: all 0.5s linear;

}

.view-tenth .link {

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

filter: alpha(opacity=0);

opacity: 0;

-webkit-transform: scale(0);

-moz-transform: scale(0);

-o-transform: scale(0);

-ms-transform: scale(0);

transform: scale(0);

-webkit-transition: all 0.5s linear;

-moz-transition: all 0.5s linear;

-o-transition: all 0.5s linear;

-ms-transition: all 0.5s linear;

transition: all 0.5s linear;

}

.view-tenth:hover img {

-webkit-transform: scale(10);

-moz-transform: scale(10);

-o-transform: scale(10);

-ms-transform: scale(10);

transform: scale(10);

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

filter: alpha(opacity=0);

opacity: 0;

}

.view-tenth:hover .mask {

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";

filter: alpha(opacity=100);

opacity: 1;

}

.view-tenth:hover h2,

.view-tenth:hover p,

.view-tenth:hover .link {

-webkit-transform: scale(1);

-moz-transform: scale(1);

-o-transform: scale(1);

-ms-transform: scale(1);

transform: scale(1);

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";

filter: alpha(opacity=100);

opacity: 1;

}


如果你还有更好的实现方案，请留言区交流，我们一起学习进步。


640?wx_fmt=jpeg

640?wx_fmt=jpeg

这篇关于【CSS3小技巧】产品列表之鼠标滑过效果01的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/612460。

相关文章

基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

《基于HTML5Canvas实现图片旋转与下载功能(完整代码展示)》本文将深入剖析一段基于HTML5Canvas的代码，该代码实现了图片的旋转（90度和180度）以及旋转后图片的下载... 目录一、引言二、html 结构分析三、css 样式分析四、JavaScript 功能实现一、引言在 Web 开发中，
阅读更多...
CSS place-items: center解析与用法详解

CSS place-items: center解析与用法详解

《CSSplace-items:center解析与用法详解》place-items:center;是一个强大的CSS简写属性，用于同时控制网格(Grid)和弹性盒(Flexbox)... place-items: center; 是一个强大的 css 简写属性，用于同时控制 网格(Grid) 和 弹性盒(F
阅读更多...
CSS实现元素撑满剩余空间的五种方法

CSS实现元素撑满剩余空间的五种方法

《CSS实现元素撑满剩余空间的五种方法》在日常开发中，我们经常需要让某个元素占据容器的剩余空间，本文将介绍5种不同的方法来实现这个需求，并分析各种方法的优缺点，感兴趣的朋友一起看看吧... css实现元素撑满剩余空间的5种方法 在日常开发中，我们经常需要让某个元素占据容器的剩余空间。这是一个常见的布局需求
阅读更多...
CSS Anchor Positioning重新定义锚点定位的时代来临(最新推荐)

CSS Anchor Positioning重新定义锚点定位的时代来临(最新推荐)

《CSSAnchorPositioning重新定义锚点定位的时代来临(最新推荐)》CSSAnchorPositioning是一项仍在草案中的新特性，由Chrome125开始提供原生支持需... 目录 css Anchor Positioning：重新定义「锚定定位」的时代来了！ 什么是 Anchor Pos
阅读更多...
CSS中的Static、Relative、Absolute、Fixed、Sticky的应用与详细对比

CSS中的Static、Relative、Absolute、Fixed、Sticky的应用与详细对比

《CSS中的Static、Relative、Absolute、Fixed、Sticky的应用与详细对比》CSS中的position属性用于控制元素的定位方式，不同的定位方式会影响元素在页面中的布... css 中的 position 属性用于控制元素的定位方式，不同的定位方式会影响元素在页面中的布局和层叠关
阅读更多...
HTML5 getUserMedia API网页录音实现指南示例小结

HTML5 getUserMedia API网页录音实现指南示例小结

《HTML5getUserMediaAPI网页录音实现指南示例小结》本教程将指导你如何利用这一API，结合WebAudioAPI，实现网页录音功能,从获取音频流到处理和保存录音，整个过程将逐步... 目录1. html5 getUserMedia API简介1.1 API概念与历史1.2 功能与优势1.3
阅读更多...
qt5cored.dll报错怎么解决? 电脑qt5cored.dll文件丢失修复技巧

qt5cored.dll报错怎么解决? 电脑qt5cored.dll文件丢失修复技巧

《qt5cored.dll报错怎么解决?电脑qt5cored.dll文件丢失修复技巧》在进行软件安装或运行程序时，有时会遇到由于找不到qt5core.dll,无法继续执行代码，这个问题可能是由于该文... 遇到qt5cored.dll文件错误时，可能会导致基于 Qt 开发的应用程序无法正常运行或启动。这种错
阅读更多...
mtu设置多少网速最快? 路由器MTU设置最佳网速的技巧

mtu设置多少网速最快? 路由器MTU设置最佳网速的技巧

《mtu设置多少网速最快?路由器MTU设置最佳网速的技巧》mtu设置多少网速最快？想要通过设置路由器mtu获得最佳网速，该怎么设置呢？下面我们就来看看路由器MTU设置最佳网速的技巧... 答：1500 MTU值指的是在网络传输中数据包的最大值，合理的设置MTU 值可以让网络更快！mtu设置可以优化不同的网
阅读更多...
全面解析HTML5中Checkbox标签

全面解析HTML5中Checkbox标签

《全面解析HTML5中Checkbox标签》Checkbox是HTML5中非常重要的表单元素之一，通过合理使用其属性和样式自定义方法，可以为用户提供丰富多样的交互体验，这篇文章给大家介绍HTML5中C... 在html5中，Checkbox（复选框）是一种常用的表单元素，允许用户在一组选项中选择多个项目。本
阅读更多...
HTML5 搜索框Search Box详解

HTML5 搜索框Search Box详解

《HTML5搜索框SearchBox详解》HTML5的搜索框是一个强大的工具，能够有效提升用户体验,通过结合自动补全功能和适当的样式，可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5... html5 搜索框（Search Box）详解搜索框是一个用于输入查询内容的控件，通常用于网站或应用程
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2