【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。

相关文章

前端下载文件时如何后端返回的文件流一些常见方法

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》：本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子：使用 Blob
阅读更多...
Vuex Actions多参数传递的解决方案

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法（推荐）二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript
阅读更多...
Python通过模块化开发优化代码的技巧分享

Python通过模块化开发优化代码的技巧分享

《Python通过模块化开发优化代码的技巧分享》模块化开发就是把代码拆成一个个“零件”,该封装封装,该拆分拆分,下面小编就来和大家简单聊聊python如何用模块化开发进行代码优化吧... 目录什么是模块化开发如何拆分代码改进版：拆分成模块让模块更强大：使用 __init__.py你一定会遇到的问题模www.
阅读更多...
Vue3使用router,params传参为空问题

Vue3使用router,params传参为空问题

《Vue3使用router,params传参为空问题》：本文主要介绍Vue3使用router,params传参为空问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录vue3使用China编程router,params传参为空1.使用query方式传参2.使用 Histo
阅读更多...
CSS Padding 和 Margin 区别全解析

CSS Padding 和 Margin 区别全解析

《CSSPadding和Margin区别全解析》CSS中的padding和margin是两个非常基础且重要的属性，它们用于控制元素周围的空白区域，本文将详细介绍padding和... 目录css Padding 和 Margin 全解析1. Padding: 内边距2. Margin: 外边距3. Padd
阅读更多...
CSS will-change 属性示例详解

CSS will-change 属性示例详解

《CSSwill-change属性示例详解》will-change是一个CSS属性，用于告诉浏览器某个元素在未来可能会发生哪些变化，本文给大家介绍CSSwill-change属性详解，感... will-change 是一个 css 属性，用于告诉浏览器某个元素在未来可能会发生哪些变化。这可以帮助浏览器优化
阅读更多...
CSS去除a标签的下划线的几种方法

CSS去除a标签的下划线的几种方法

《CSS去除a标签的下划线的几种方法》本文给大家分享在CSS中，去除a标签（超链接）的下划线的几种方法，本文给大家介绍的非常详细，感兴趣的朋友一起看看吧... 在 css 中，去除a标签（超链接）的下划线主要有以下几种方法：使用text-decoration属性通用选择器设置：使用a标签选择器，将tex
阅读更多...
前端高级CSS用法示例详解

前端高级CSS用法示例详解

《前端高级CSS用法示例详解》在前端开发中，CSS（层叠样式表）不仅是用来控制网页的外观和布局，更是实现复杂交互和动态效果的关键技术之一,随着前端技术的不断发展，CSS的用法也日益丰富和高级,本文将深... 前端高级css用法在前端开发中，CSS（层叠样式表）不仅是用来控制网页的外观和布局，更是实现复杂交
阅读更多...
Python将博客内容html导出为Markdown格式

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞？二、准备如何搞？三、说搞咱就搞！抓取文章提取内容构建html转存markdown
阅读更多...
在React中引入Tailwind CSS的完整指南

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2