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

2024-01-16 11:38

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


在《【CSS3小技巧】产品列表之鼠标滑过效果01》中,我跟大家分享了一种存CSS3实现的鼠标效果,今天我将再分享一种比较实用炫酷的鼠标效果给大家,希望大家会喜欢。


先来看看最终鼠标实现的效果图:

640?wx_fmt=jpeg

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


CSS代码:


  .main *{

    padding:0;

    margin:0;

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

    box-sizing: border-box;

    -webkit-box-sizing: border-box;}.main {

    position: relative;

    width: 680px;

    margin: 0 auto;}.view {

   width: 300px;

   margin: 10px;

   float: left;

   border: 10px solid #fff;

   -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 figure {

    margin: 0;

    position: relative;}.view figure img {

    max-width: 100%;

    display: block;

    position: relative;}.view .thumb {

    overflow: hidden;}.view .mask {

    position: absolute;

    top: 0;

    left: 0;

    bottom:0;

    padding: 10px;

    background: rgb(233, 194, 236);

    background-color: rgba(233, 194, 236, 0.9);

    color: #ed4e6e;}.view .mask h2 {

    margin: 0 0 5px;

    padding: 0 0 5px;

    color: #fff;

    font-size: 18px;

    text-align: center;

    border-bottom:1px solid rgba(255,255,255,.2);}.view .mask p{

    font-size: 14px;}.view .link {

    position: absolute;

    bottom: 10px;

    right: 10px;

    text-align: center;

    padding: 5px 10px;

    border-radius: 2px;

    display: inline-block;

    background: #ed4e6e;

    color: #fff;

    text-decoration:none;}.view-tenth {

    -webkit-perspective: 1700px;

    -moz-perspective: 1700px;

    perspective: 1700px;

    -webkit-perspective-origin: 0 50%;

    -moz-perspective-origin: 0 50%;

    perspective-origin: 0 50%;}.view-tenth figure {

    -webkit-transform-style: preserve-3d;

    -moz-transform-style: preserve-3d;

    transform-style: preserve-3d;}

  .view-tenth .mask {

    width: 50%;

    opacity: 0;

    -webkit-backface-visibility: hidden;

    -moz-backface-visibility: hidden;

    backface-visibility: hidden;

    -webkit-transform-origin: 0 0;

    -moz-transform-origin: 0 0;

    transform-origin: 0 0;

    -webkit-transform: rotateY(-90deg);

    -moz-transform: rotateY(-90deg);

    transform: rotateY(-90deg);

    -webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;

    -moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;

    transition: transform 0.4s, opacity 0.1s 0.3s;}.view-tenth figure:hover .mask{

    opacity: 1;

    -webkit-transform: rotateY(0deg);

    -moz-transform: rotateY(0deg);

    transform: rotateY(0deg);

    -webkit-transition: -webkit-transform 0.4s, opacity 0.1s;

    -moz-transition: -moz-transform 0.4s, opacity 0.1s;

    transition: transform 0.4s, opacity 0.1s;}



HTML代码:

<div class="main"><div class="view view-tenth">

 <figure>

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

 <div class="mask">

 <h2>Wonder Girls</h2>

 <p>Wonder Girls一向以青春活力的形象展现在观众面前,先后在韩国和...</p>

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

 </div>

 </figure>

 </div>

 <div class="view view-tenth">

 <figure>

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

 <div class="mask">

 <h2>Wonder Girls</h2>

 <p>Wonder Girls一向以青春活力的形象展现在观众面前,先后在韩国和...</p>

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

 </div>

 </figure>

 </div>

 <div class="view view-tenth">

 <figure>

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

 <div class="mask">

 <h2>Wonder Girls</h2>

 <p>Wonder Girls一向以青春活力的形象展现在观众面前,先后在韩国和...</p>

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

 </div>

 </figure>

 </div>

 <div class="view view-tenth">

 <figure>

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

 <div class="mask">

 <h2>Wonder Girls</h2>

 <p>Wonder Girls一向以青春活力的形象展现在观众面前,先后在韩国和...</p>

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

 </div>

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


640?wx_fmt=jpeg

640?wx_fmt=jpeg

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


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/612464

相关文章

MySQL 多列 IN 查询之语法、性能与实战技巧(最新整理)

《MySQL多列IN查询之语法、性能与实战技巧(最新整理)》本文详解MySQL多列IN查询,对比传统OR写法,强调其简洁高效,适合批量匹配复合键,通过联合索引、分批次优化提升性能,兼容多种数据库... 目录一、基础语法:多列 IN 的两种写法1. 直接值列表2. 子查询二、对比传统 OR 的写法三、性能分析

Python中将嵌套列表扁平化的多种实现方法

《Python中将嵌套列表扁平化的多种实现方法》在Python编程中,我们常常会遇到需要将嵌套列表(即列表中包含列表)转换为一个一维的扁平列表的需求,本文将给大家介绍了多种实现这一目标的方法,需要的朋... 目录python中将嵌套列表扁平化的方法技术背景实现步骤1. 使用嵌套列表推导式2. 使用itert

Python使用vllm处理多模态数据的预处理技巧

《Python使用vllm处理多模态数据的预处理技巧》本文深入探讨了在Python环境下使用vLLM处理多模态数据的预处理技巧,我们将从基础概念出发,详细讲解文本、图像、音频等多模态数据的预处理方法,... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核

Java中的雪花算法Snowflake解析与实践技巧

《Java中的雪花算法Snowflake解析与实践技巧》本文解析了雪花算法的原理、Java实现及生产实践,涵盖ID结构、位运算技巧、时钟回拨处理、WorkerId分配等关键点,并探讨了百度UidGen... 目录一、雪花算法核心原理1.1 算法起源1.2 ID结构详解1.3 核心特性二、Java实现解析2.

深度解析Python装饰器常见用法与进阶技巧

《深度解析Python装饰器常见用法与进阶技巧》Python装饰器(Decorator)是提升代码可读性与复用性的强大工具,本文将深入解析Python装饰器的原理,常见用法,进阶技巧与最佳实践,希望可... 目录装饰器的基本原理函数装饰器的常见用法带参数的装饰器类装饰器与方法装饰器装饰器的嵌套与组合进阶技巧

Go语言代码格式化的技巧分享

《Go语言代码格式化的技巧分享》在Go语言的开发过程中,代码格式化是一个看似细微却至关重要的环节,良好的代码格式化不仅能提升代码的可读性,还能促进团队协作,减少因代码风格差异引发的问题,Go在代码格式... 目录一、Go 语言代码格式化的重要性二、Go 语言代码格式化工具:gofmt 与 go fmt(一)

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入,随type属性值的不同,变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签,感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》:本文主要介绍了HTML中img标签的使用,包括src属性(指定图片路径)、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等,详细内容请阅读本文,希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h