扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > html >CSS怎么实现响应式堆叠卡片悬停效果
  • 877

0
分享到

CSS怎么实现响应式堆叠卡片悬停效果

2024-04-02 19:04:59 877人浏览 泡泡鱼
摘要

本篇内容介绍了“CSS怎么实现响应式堆叠卡片悬停效果”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！在开始之

本篇内容介绍了“CSS怎么实现响应式堆叠卡片悬停效果”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

在开始之前，我先介绍一下实现的整体大致思路：首先我们将在 HTM 中设计一个简单的卡片结构；然后将定义::before 和::after伪元素并将它们相对于父卡片绝对定位；接着使用transfORM属性将类“card-inner”的div从其原始位置移开；最后通过使用可以在悬停效果前后translate卡片的变换，在一堆卡片上添加悬停效果。

下面就直接上代码了！

示例代码一：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            color: #FDFAF6;
            background: #50CB93;
        }

        .card {
            position: relative;
            width: 400px;
            margin: 60px auto;
        }

        .card::before,
        .card::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .card::before,
        .card::after,
        .card .card-inner {
            background-color: #423F3E;
            border: 1px solid #01937C;
            transition: transform 0.5s;
        }

        .card::before,
        .card-inner {
            z-index: 1;
        }

        .card-inner {
            position: relative;
            padding: 4rem;
        }

        
        .cards:hover {
            transform: translate(5px, 5px);
        }

        .cards:hover::before {
            transform: translate(-5px, -5px);
        }

        .cards:hover::after {
            transform: translate(-10px, -10px);
        }
    </style>
</head>

<body>
<center>
    <h2>欢迎来到编程网</h2>
    <div class="card-container">
        <div class="card cards">
            <div class="card-inner">
                <h2>将鼠标移至方框内</h2>
                <h4 class="card-title">
                    编程网
                </h4>
                <div class="card-body">
                    编程学习平台
                </div>
            </div>
        </div>
    </div>
</center>
</body>

</html>

效果如下：

CSS怎么实现响应式堆叠卡片悬停效果

示例代码二：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            color: #FDFAF6;
            background: #50CB93;
        }

        :root {
            --offset-before: 8px;
            --offset-after: 16px;
        }

        .card {
            position: relative;
            width: 400px;
            margin: 60px auto;
        }

        .card::before,
        .card::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .card::before,
        .card::after,
        .card .card-inner {
            background-color: #423F3E;
            border: 1px solid #01937C;
            transition: transform 0.5s;
        }

        .card::before,
        .card-inner {
            z-index: 1;
        }

        .card-inner {
            position: relative;
            padding: 4rem;
        }

    
        .cards-diaGonal::before {
            transform: translate(calc(-1 * 8px),
            calc(-1 * 8px));
        }

        .cards-diagonal::after {
            transform: translate(calc(-1 * 16px),
            calc(-1 * 16px));
        }

        .cards-diagonal:hover::before {
            transform: translate(8px, 8px);
        }

        .cards-diagonal:hover::after {
            transform: translate(16px, 16px);
        }


        .cards-rotate::before,
        .cards-rotate::after {
            transform-origin: 50% 100%;
        }

        .cards-rotate:hover {
            transform: translate(2.5px, 0) rotate(2.5deg);
        }

        .cards-rotate:hover::before {
            transform: translate(2.5px, 0) rotate(2.5deg);
        }

        .cards-rotate:hover::after {
            transform: translate(5px, 0) rotate(5deg);
        }
        }
    </style>
</head>

<body>
<center>
    <h2>欢迎来到编程网</h2>
    <div class="card-container">
        <div class="card cards-diagonal">
            <div class="card-inner">
                <h2>将鼠标移至框内</h2>
                <h4 class="card-title">编程网</h4>
                <div class="card-body">
                    编程学习平台
                </div>
            </div>
        </div>
    </div>
    <div class="card-container">
        <div class="card cards-rotate">
            <div class="card-inner">
                <h2>将鼠标移至框内</h2>
                <h4 class="card-title">编程网</h4>
                <div class="card-body">
                    编程学习平台
                </div>
            </div>
        </div>
    </div>
</center>
</body>

</html>

效果如下：

CSS怎么实现响应式堆叠卡片悬停效果

示例代码三：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            color: #FDFAF6;
            background: #50CB93;
        }

        :root {
            --offset-before: 8px;
            --offset-after: 16px;
        }

        .card {
            position: relative;
            width: 400px;
            margin: 60px auto;
        }

        .card::before,
        .card::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .card::before,
        .card::after,
        .card .card-inner {
            background-color: #423F3E;
            border: 1px solid #01937C;
            transition: transform 0.5s;
        }

        .card::before,
        .card-inner {
            z-index: 1;
        }

        .card-inner {
            position: relative;
            padding: 4rem;
        }

        
        .cards-up::before,
        .cards-up::after {
            transform-origin: center bottom;
        }

        .cards-up:hover {
            transform: translate(0, -5px);
        }

        .cards-up:hover::before {
            transform: translate(0, 5px) scale(0.95);
        }

        .cards-up:hover::after {
            transform: translate(0, 10px) scale(0.90);
        }

        
        .cards-right::before,
        .cards-right::after {
            transform-origin: left center;
        }

        .cards-right:hover {
            transform: translate(5px, 0);
        }

        .cards-right:hover::before {
            transform: translate(-10px, 0) scale(0.95);
        }
        }

        .cards-right:hover::after {
            transform: translate(-10px, 0) scale(0.90);
        }
        }
    </style>
</head>

<body>
<center>
    <h2>欢迎来到编程网</h2>
    <div class="card-container">
        <div class="card cards-up">
            <div class="card-inner">
                <h2>将鼠标移至框内</h2>
                <h4 class="card-title">编程网</h4>
                <div class="card-body">
                    编程学习平台
                </div>
            </div>
        </div>
    </div>
    <div class="card-container">
        <div class="card cards-right">
            <div class="card-inner">
                <h2>将鼠标移至框内</h2>
                <h4 class="card-title">编程网</h4>
                <div class="card-body">
                    编程学习平台
                </div>
            </div>
        </div>
    </div>
</center>
</body>

</html>

效果如下：

CSS怎么实现响应式堆叠卡片悬停效果

“CSS怎么实现响应式堆叠卡片悬停效果”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！

--结束END--

本文标题: CSS怎么实现响应式堆叠卡片悬停效果

本文链接: https://lsjlt.com/news/79848.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • CSS怎么实现响应式堆叠卡片悬停效果
    本篇内容介绍了“CSS怎么实现响应式堆叠卡片悬停效果”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！在开始之...
    99+
    2024-04-02
  • iOS实现卡片堆叠效果
    本文实例为大家分享了iOS实现卡片堆叠效果的具体代码，供大家参考，具体内容如下 如图，这就是最终效果。 去年安卓5.0发布的时候，当我看到安卓全新的Material Design设...
    99+
    2022-05-16
    iOS 卡片堆叠
  • CSS如何实现图片鼠标悬停折叠效果
    这篇文章给大家分享的是有关CSS如何实现图片鼠标悬停折叠效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。CSS 实现 图片鼠标悬停折叠效果1. 实现要点 折叠是由多个块级元素来完成的;图片是以背景图片...
    99+
    2023-06-08
  • CSS如何实现照片堆叠效果
    这篇文章主要介绍了CSS如何实现照片堆叠效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。 　　步骤 　　1.初始index.html ...
    99+
    2024-04-02
  • CSS布局技巧：实现堆叠卡片效果的最佳实践
    CSS布局技巧：实现堆叠卡片效果的最佳实践在现代网页设计中，卡片式布局成为了一种非常流行的设计趋势。卡片布局能够有效地展示信息，提供良好的用户体验，并且方便响应式设计。在这篇文章中，我们将分享一些实现堆叠卡片效果的最佳CSS布局技巧，同时提...
    99+
    2023-10-22
    堆叠卡片 最佳实践 CSS布局
  • Android 实现卡片堆叠钱包管理动画效果
    目录实现原理：思路：重写adView 方法确保每个子View的测量属性宽度填满父组件重写onLayout 方法是关键源码先上效果图 源码 github.com/woshiwzy/C...
    99+
    2024-04-02
  • 纯CSS怎么实现鼠标悬停显示图片效果
    这篇文章给大家分享的是有关纯CSS怎么实现鼠标悬停显示图片效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。最近在做一个网盘的项目，用到了鼠标移上去效果，这个效果可以用js来实现...
    99+
    2024-04-02
  • 怎么用CSS实现图片列表悬停放大效果
    这篇文章主要讲解了“怎么用CSS实现图片列表悬停放大效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么用CSS实现图片列表悬停放大效果”吧！代码如下:&...
    99+
    2024-04-02
  • CSS怎么实现鼠标悬停tip效果
    这篇文章主要介绍“CSS怎么实现鼠标悬停tip效果”，在日常操作中，相信很多人在CSS怎么实现鼠标悬停tip效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS怎么实现鼠...
    99+
    2024-04-02
  • 纯CSS怎么实现按钮的悬停效果
    这篇文章主要为大家展示了纯CSS怎么实现按钮的悬停效果，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带大家一起来研究并学习一下“纯CSS怎么实现按钮的悬停效果”这篇文章吧。 　　代码解读 ...
    99+
    2024-04-02
  • CSS如何实现图片列表悬停放大效果
    小编给大家分享一下CSS如何实现图片列表悬停放大效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！代码如下:<!DOCTY...
    99+
    2024-04-02
  • 纯CSS实现响应式导航栏的悬浮效果的实现步骤
    纯CSS实现响应式导航栏的悬浮效果的实现步骤前言：随着移动互联网的快速发展，响应式设计成为了网页设计的一项重要的特性。在响应式设计中，导航栏是一个关键的组成部分。本文将介绍如何通过纯CSS实现响应式导航栏的悬浮效果，让导航栏在不同设备上自动...
    99+
    2023-10-24
    不需要使用JavaScript。
  • 纯CSS实现响应式导航栏的折叠效果的实现步骤
    现如今，大多数人通过移动设备浏览网页，因此，响应式设计已成为现代网页设计的重要组成部分。而在响应式设计中，导航栏是一个重要的元素，在不同屏幕尺寸下能够有效地展示网页的导航结构。本文将介绍如何使用纯CSS来实现一个响应式导航栏，并在较小的屏幕...
    99+
    2023-10-21
  • CSS3怎么实现菜单悬停效果
    这篇文章主要讲解了“CSS3怎么实现菜单悬停效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS3怎么实现菜单悬停效果”吧！实现效果：html<nav id="...
    99+
    2023-06-08
  • 怎么在HTML5中实现一个图片悬停放大效果
    这篇文章将为大家详细讲解有关怎么在HTML5中实现一个图片悬停放大效果，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。HTML5 代码如下：<!DOCTYPE html>...
    99+
    2023-06-09
  • 利用CSS实现响应式图片轮播效果的教程
    利用CSS实现响应式图片轮播效果的教程随着移动设备的普及和技术的进步，响应式网站设计已成为当今设计趋势之一。在设计过程中，图片轮播是常见的元素之一，它可以有效地向用户展示多张图片的信息。本教程将分享如何使用CSS实现响应式图片轮播效果，并提...
    99+
    2023-11-21
    图片轮播 响应式 CSS
  • 使用CSS实现响应式图片画廊效果的教程
    使用CSS实现响应式图片画廊效果的教程在现代网页设计中，响应式设计已成为一个重要的考虑因素。而通过使用CSS实现响应式图片画廊效果，可以使图片在不同设备上自动适应并呈现最佳效果。本文将分享一个简单而实用的教程，并提供具体的代码示例。一、HT...
    99+
    2023-11-21
    响应式设计 (Responsive Design) CSS (Cascading Style Sheets) 图片画廊
  • CSS怎么实现鼠标悬停图片上图片变灰
    本文小编为大家详细介绍“CSS怎么实现鼠标悬停图片上图片变灰”，内容详细，步骤清晰，细节处理妥当，希望这篇“CSS怎么实现鼠标悬停图片上图片变灰”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学...
    99+
    2024-04-02
  • CSS布局技巧：实现悬浮卡片翻转效果的最佳实践
    悬浮卡片翻转效果是网页设计中非常常见的一种效果，它可以使页面看起来更加动态和生动。本文将介绍如何使用CSS实现悬浮卡片翻转效果，并给出具体的代码示例。在开始之前，我们需要明确一下悬浮卡片翻转的基本原理。其实这个效果可以通过使用CSS的tra...
    99+
    2023-10-21
    悬浮 翻转 卡片
  • 使用CSS实现响应式图片卡片布局的技巧
    使用CSS实现响应式图片卡片布局的技巧随着移动设备的普及和网络速度的提升，人们在浏览网页时越来越重视页面的响应式布局。作为页面设计的关键元素之一，图片在响应式布局中扮演着重要角色。本文将介绍一种使用CSS实现响应式图片卡片布局的技巧，帮助你...
    99+
    2023-11-21
    响应式 CSS 技巧 布局 图片卡片
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作