CSS实现服务卡片
CSS实现服务卡片
效果展示

CSS 知识点
- 回顾整体CSS知识点
- 灵活运用CSS知识点
页面整体布局
<div class="container"><div class="card"><div class="box"><div class="icon"><ion-icon name="color-palette-outline"></ion-icon></div><div class="content"><h2>Design</h2><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.Consectetur in maiores dolor ducimus at quod nisi reiciendisvoluptate, quasi dolorum repudiandae et obcaecati suscipitcorrupti molestias sequi voluptas adipisci dolorem.</p><a href="#">Read More</a></div></div></div>
</div>
实现整体布局和容器整体样式
.container {position: relative;display: flex;justify-content: center;align-items: center;flex-wrap: wrap;gap: 60px;padding: 80px 40px;
}.container .card {position: relative;display: flex;justify-content: center;align-items: center;width: 300px;padding: 40px 20px;border-radius: 30px;cursor: pointer;background: rgba(0, 0, 0, 0.2);transition: 0.5s;
}
实现卡片图标和整体布局
.container .card .box {display: flex;flex-direction: column;align-items: center;text-align: center;
}.container .card .box .icon {position: relative;width: 80px;height: 80px;background: rgba(0, 0, 0, 0.25);border-radius: 50%;display: flex;justify-content: center;align-items: center;font-size: 3em;color: #fff7;transition: 0.5s;
}
实现卡片内容部分样式
.container .card .content {margin-top: 20px;
}.container .card .content h2 {color: #fff7;font: 1.25em;text-transform: uppercase;letter-spacing: 1px;transition: 0.5s;
}.container .card .content p {margin-top: 10px;color: #fff7;font-weight: 400;letter-spacing: 1px;transition: 0.5s;
}
实现卡片按钮效果
.container .card .content a {display: inline-block;background: rgba(0, 0, 0, 0.25);padding: 10px 20px;margin-top: 20px;font-weight: 500;letter-spacing: 1px;color: #fff7;border-radius: 30px;text-decoration: none;
}
设置卡片悬停效果
.container .card:hover {background: #1f83f2;box-shadow: 25px 25px 75px rgba(0, 0, 0, 0.25),10px 10px 70px rgba(0, 0, 0, 0.25),inset 5px 5px 20px rgba(255, 255, 255, 0.25),inset -5px -5px 15px rgba(0, 0, 0, 0.75);transform: translateY(-20px);
}.container .card:hover .box .icon {background: #2f363e;color: #fff;box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.25),inset -3px -3px 5px rgba(0, 0, 0, 0.5);
}.container .card:hover .content h2,
.container .card:hover .content p {color: #fff;
}.container .card:hover .content a {background: #2f363e;color: #fff;box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.25),inset -3px -3px 5px rgba(0, 0, 0, 0.5);
}
完整代码下载
完整代码下载
相关文章:
CSS实现服务卡片
CSS实现服务卡片 效果展示 CSS 知识点 回顾整体CSS知识点灵活运用CSS知识点 页面整体布局 <div class"container"><div class"card"><div class"box"><div class"icon"><ion-icon name"color-pal…...
问:如何判断系统环境是大端/小端存储?
大端存储(Big Endian)和小端存储(Little Endian)是两种不同的字节序(即字节顺序)规则,用于在计算机中存储和表示多字节数据类型(例如整数)。 概念解释 大端存储&#x…...
使用NumPy进行线性代数的快速指南
介绍 NumPy 是 Python 中用于数值计算的基础包。它提供了处理数组和矩阵的高效操作,这对于数据分析和科学计算至关重要。在本指南中,我们将探讨 NumPy 中可用的一些基本线性代数操作,展示如何通过运算符重载和内置函数执行这些操作。 元素级…...
uni-app之旅-day02-分类页面
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言创建cate分支4.1 渲染分类页面的基本结构4.2 获取分类数据4.3 动态渲染左侧的一级分类列表4.4 动态渲染右侧的二级分类列表4.5 动态渲染右侧的三级分类列表4.6 …...
鸿蒙harmonyos next flutter通信之BasicMessageChannel获取app版本号
本文将通过BasicMessageChannel获取app版本号,以此来演练BasicMessageChannel用法。 建立channel flutter代码: //建立通道 BasicMessageChannel basicMessageChannel BasicMessageChannel("com.xmg.basicMessageChannel",StringCodec());…...
【文件增量备份系统】MySQL百万量级数据量分页查询性能优化
🎯 导读:本文针对大数据量下的分页查询性能问题进行了深入探讨与优化,最初查询耗时长达12秒,通过避免全表计数及利用缓存保存总数的方式显著提升了浅分页查询速度。面对深分页时依然存在的延迟,采用先查询倒数第N条记录…...
音视频入门基础:FLV专题(12)——FFmpeg源码中,解析DOUBLE类型的ScriptDataValue的实现
一、引言 从《音视频入门基础:FLV专题(9)——Script Tag简介》中可以知道,根据《video_file_format_spec_v10_1.pdf》第80到81页,SCRIPTDATAVALUE类型由一个8位(1字节)的Type和一个ScriptDataV…...
【AI知识点】分层可导航小世界网络算法 HNSW(Hierarchical Navigable Small World)
HNSW(Hierarchical Navigable Small World)分层可导航小世界网络算法 是一种高效的近似最近邻搜索(Approximate Nearest Neighbor Search, ANN) 算法,特别适用于大规模、高维数据集的相似性检索。HNSW 基于小世界网络&…...
ubuntu图形界面右上角网络图标找回解决办法
问题现象: ubuntu图形界面右上角网络图标消失了,不方便联网: 正常应该是下图: 网络寻找解决方案,问题未解决,对于某些场景可能有用,引用过来: 参考方案 Ubuntu虚拟机没有网络图标或…...
maven安装本地jar包到本地仓库
有时候我们需要把本地的 jar 包 install 到本地的 maven 仓库,这时就需要手动install依赖项。例如,把下面的 zhdx-license-1.0.jar 安装到本地 maven 仓库的操作如下: <dependency><groupId>com.zhdx</groupId><artifa…...
1panel申请https/ssl证书自动续期
参考教程 https://hin.cool/posts/sslfor1panel.html #Acme 账户 #1panel.腾讯云dns账号 这里有一步不需要参考,腾讯云dns账号,就是子帐号授权 直接控制台搜索 访问管理 创建用户 授权搜索dns,选择第一个 点击用户名,去掉AdministratorAccess权限 5.点击api密钥生成即可…...
【C语言】指针篇 | 万字笔记
写在前面 在学习C语言过程,总有一个要点难点离不开,那就是大名鼎鼎的C语言指针,也是应为有指针的存在,使得C语言一直长盛不衰。因此不才把指针所学的所有功力都转换成这个笔记。希望对您有帮助🥰🥰 学习指…...
使用transformers调用owlv2实现开放目标检测
目录 安装Demo 安装 pip install transformersDemo from PIL import Image, ImageDraw, ImageFont import numpy as np import torch from transformers import AutoProcessor, Owlv2ForObjectDetection from transformers.utils.constants import OPENAI_CLIP_MEAN, OPENAI_…...
大数据技术:Hadoop、Spark与Flink的框架演进
大数据技术,特别是Hadoop、Spark与Flink的框架演进,是过去二十年中信息技术领域最引人注目的发展之一。这些技术不仅改变了数据处理的方式,而且还推动了对数据驱动决策和智能化的需求。在大数据处理领域,选择合适的大数据平台是确…...
Spring Boot框架下的新闻推荐技术
1系统概述 1.1 研究背景 如今互联网高速发展,网络遍布全球,通过互联网发布的消息能快而方便的传播到世界每个角落,并且互联网上能传播的信息也很广,比如文字、图片、声音、视频等。从而,这种种好处使得互联网成了信息传…...
相亲交友系统的社会影响:家庭结构的变化
随着互联网技术的发展,相亲交友系统已成为许多单身人士寻找伴侣的重要途径。这些平台不仅改变了人们的社交方式,还对家庭结构产生了深远的影响。本文将探讨相亲交友系统如何促使家庭结构发生变化,开发h17711347205并通过简单的Python代码示例…...
C++ 内存池(Memory Pool)详解
1. 基本概念 内存池是一种内存管理技术,旨在提高内存分配的效率。它通过预先分配一块大的内存区域(池),然后从中分配小块内存来满足应用程序的需求。这样可以减少频繁的内存分配和释放带来的性能开销。 2. 设计思路 内存池的设…...
css三角形:css画箭头向下的三角形
.arrow { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-style: solid; border-width: 8px 5px 0 5px; /* 上、左、下、右 */ bord…...
CSS属性 - animation
一、基本概念 animation是 CSS 中的一个属性,用于将通过keyframes规则定义的动画应用到元素上。它是一种简写属性,能够在一个声明中设置多个动画相关的子属性。 二、语法结构 基本语法为: animation: name duration timing - function de…...
昇思MindSpore进阶教程--在ResNet-50网络上应用二阶优化实践(下)
大家好,我是刘明,明志科技创始人,华为昇思MindSpore布道师。 技术上主攻前端开发、鸿蒙开发和AI算法研究。 努力为大家带来持续的技术分享,如果你也喜欢我的文章,就点个关注吧 文章上半部分请查看 在ResNet-50网络上应…...
手游刚开服就被攻击怎么办?如何防御DDoS?
开服初期是手游最脆弱的阶段,极易成为DDoS攻击的目标。一旦遭遇攻击,可能导致服务器瘫痪、玩家流失,甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案,帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...
【力扣数据库知识手册笔记】索引
索引 索引的优缺点 优点1. 通过创建唯一性索引,可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度(创建索引的主要原因)。3. 可以加速表和表之间的连接,实现数据的参考完整性。4. 可以在查询过程中,…...
学校招生小程序源码介绍
基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码,专为学校招生场景量身打造,功能实用且操作便捷。 从技术架构来看,ThinkPHP提供稳定可靠的后台服务,FastAdmin加速开发流程,UniApp则保障小程序在多端有良好的兼…...
2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面
代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口(适配服务端返回 Token) export const login async (code, avatar) > {const res await http…...
腾讯云V3签名
想要接入腾讯云的Api,必然先按其文档计算出所要求的签名。 之前也调用过腾讯云的接口,但总是卡在签名这一步,最后放弃选择SDK,这次终于自己代码实现。 可能腾讯云翻新了接口文档,现在阅读起来,清晰了很多&…...
C++ 设计模式 《小明的奶茶加料风波》
👨🎓 模式名称:装饰器模式(Decorator Pattern) 👦 小明最近上线了校园奶茶配送功能,业务火爆,大家都在加料: 有的同学要加波霸 🟤,有的要加椰果…...
Linux 下 DMA 内存映射浅析
序 系统 I/O 设备驱动程序通常调用其特定子系统的接口为 DMA 分配内存,但最终会调到 DMA 子系统的dma_alloc_coherent()/dma_alloc_attrs() 等接口。 关于 dma_alloc_coherent 接口详细的代码讲解、调用流程,可以参考这篇文章,我觉得写的非常…...
Java详解LeetCode 热题 100(26):LeetCode 142. 环形链表 II(Linked List Cycle II)详解
文章目录 1. 题目描述1.1 链表节点定义 2. 理解题目2.1 问题可视化2.2 核心挑战 3. 解法一:HashSet 标记访问法3.1 算法思路3.2 Java代码实现3.3 详细执行过程演示3.4 执行结果示例3.5 复杂度分析3.6 优缺点分析 4. 解法二:Floyd 快慢指针法(…...
高分辨率图像合成归一化流扩展
大家读完觉得有帮助记得关注和点赞!!! 1 摘要 我们提出了STARFlow,一种基于归一化流的可扩展生成模型,它在高分辨率图像合成方面取得了强大的性能。STARFlow的主要构建块是Transformer自回归流(TARFlow&am…...
【java】【服务器】线程上下文丢失 是指什么
目录 ■前言 ■正文开始 线程上下文的核心组成部分 为什么会出现上下文丢失? 直观示例说明 为什么上下文如此重要? 解决上下文丢失的关键 总结 ■如果我想在servlet中使用线程,代码应该如何实现 推荐方案:使用 ManagedE…...
