毛玻璃用户卡交互

效果展示

在这里插入图片描述

页面结构组成

从效果展示可以看到,此效果都是比较常规的。主要的核心就是卡片的悬停效果。

CSS 知识点

  • backdrop-filter 回顾
  • transition
  • transform

页面基础布局实现

<section><div class="container"><div class="card"><div class="img_box"><img src="./images/user-1.jpg" /></div><div class="content"><div class="content_box"><h3>Someone Famous<br /><span>Creative Designer</span></h3></div><ul><li style="--i: 1"><a href="#"><i class="fa fa-qq" aria-hidden="true"></i></a></li><li style="--i: 2"><a href="#"><i class="fa fa-weixin" aria-hidden="true"></i></a></li><li style="--i: 3"><a href="#"><i class="fa fa-weibo" aria-hidden="true"></i></a></li><li style="--i: 4"><a href=" #"><i class="fa fa-tencent-weibo" aria-hidden="true"></i></a></li></ul></div></div></div>
</section>

实现卡片样式

.container .card {position: relative;width: 300px;height: 400px;margin: 20px;overflow: hidden;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);border-radius: 15px;display: flex;justify-content: center;align-items: center;
}.container .card .img_box {width: 100%;height: 100%;
}.container .card .img_box img {display: flex;width: 100%;height: 100%;object-fit: cover;
}.container .card .content {position: absolute;bottom: -160px;width: 100%;height: 160px;display: flex;justify-content: center;align-items: center;z-index: 10;flex-flow: row wrap;backdrop-filter: blur(15px);box-shadow: 0 -10px 10px rgba(0, 0, 0, 0.1);border: 1px solid rgba(255, 255, 255, 0.2);transition: 0.5s;
}.container .card:hover .content {bottom: 0;
}

社交图标实现

.container .card .content ul {position: relative;bottom: 10px;display: flex;
}.container .card .content ul li {list-style: none;margin: 0 10px;transform: translateY(40px);transition: 0.5s;opacity: 0;transition-delay: calc(0.2s * var(--i));
}.container .card:hover .content ul li {opacity: 1;transform: translateY(0px);
}

完整代码下载

完整代码下载

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

react create-react-app v5配置 px2rem (暴露 eject方式)

环境信息&#xff1a; create-react-app v5 “react”: “^18.2.0” “postcss-plugin-px2rem”: “^0.8.1” 配置步骤&#xff1a; 我这个方式是 npm run eject 暴露 webpack配置的方法 1.安装 postcss-plugin-px2rem 和 lib-flexible cnpm install postcss-plugin-px2rem…

二叉树和堆

二叉树不存在度大于2的结点&#xff08;每个根最多只有两个子结点&#xff09;二叉树的子树有左右之分&#xff0c;次序不能颠倒&#xff0c;因此二叉树是有序树 两个特殊的二叉树——&#xff08;满二叉树&#xff0c;完全二叉树&#xff09; 满二叉树——每个根结点都有左右…

Ubuntu镜像源cn.arichinve.ubuntu.com不可用原因分析和解决

文章目录 Ubuntu查看系统版本Ubuntu更新系统不能更新Ubuntu查看APT更新源配置cn.archive.ubuntu.com已经自动跳转到清华镜像站Ubuntu变更镜像源地址备份原文件批量在VIM中变更 Ubuntu国内镜像站推荐推荐阅读 今天想要在Ubuntu环境下搭建一个测试环境&#xff0c;进入Ubuntu系统…

react create-react-app v5 从零搭建项目

前言&#xff1a; 好久没用 create-react-app做项目了&#xff0c;这次为了个h5项目&#xff0c;就几个页面&#xff0c;决定自己搭建一个&#xff08;ps:mmp 好久没用&#xff0c;搭建的时候遇到一堆问题&#xff09;。 我之前都是使用 umi 。后台管理系统的项目 使用 antd-…

MySQL学习笔记27

MySQL主从复制的核心思路&#xff1a; 1、slave必须安装相同版本的mysql数据库软件。 2、master端必须开启二进制日志&#xff0c;slave端必须开启relay log 日志。 3、master主服务器和slave从服务器的server-id号不能一致。 4、slave端配置向master端来同步数据。 master…

南京大学【软件分析】07 Interprocedural Analysis

文章目录 1. Motivation2. Call graph Construction&#xff08;CHA&#xff09;2.1 方法分派Method Dispatch2.2 方法签名method signature2.3 案例&#xff1a;查找Dispatch2.4 CHA2.5 通过CHA构造调用图 3. Interprocedural Control-Flow Graph4. Interprocedural Data-Flow…

Open Book LLM Science Exam

工作太忙&#xff0c;导致完全没有时间学习了。国庆期间&#xff0c;抽空找个baseline继续学习一波 https://www.kaggle.com/code/jjinho/open-book-llm-science-exam/notebook 首先将维基百科数据都保存为faiss index&#xff0c;根据train训练集的prompt选择最相似的3个 t…

matplotlib.show() 阻塞程序怎么解决

matplot.show() 阻塞程序怎么解决 在使用matplotlib的过程中,发现不能像matlab一样同时开几个窗口进行比较,于是查询得知了交互模式,但是放在脚本里运行的适合却总是一闪而过,图像并不停留,遂仔细阅读和理解了一下文档,记下解决办法,问题比较简单,仅供菜鸟参考。 py…

Apache Hudi初探(五)(与flink的结合)--Flink 中hudi clean操作

背景 本文主要是具体说说Flink中的clean操作的实现 杂说闲谈 在flink中主要是CleanFunction函数&#xff1a; Overridepublic void open(Configuration parameters) throws Exception {super.open(parameters);this.writeClient FlinkWriteClients.createWriteClient(conf,…

python实用小代码

一、python实现31省市名称替换 首先定义了一个字典province_dict&#xff0c;其中包含每个省市的无缩写名称与其标准名称之间的映射。然后&#xff0c;我们使用map()函数将每个省市名称从无缩写名称转换为标准名称&#xff0c;并将结果存储在新列省市标准名称中。 province_di…

安卓玩机-----反编译apk 修改apk 去广告 去弹窗等操作中的一些常识

安卓机型app的编译与反编译 apk文件的简单说明与解析 -安卓修改apk apk的组成和编译 一 电脑端几种反编译apk工具操作步骤解析 前面几个博文有说明关于反编译apk和apk架构等有些常识.今天对以上做个补充。初学者记住一点。对于一个apk文件使用压缩软件7zip打开可以查看到文件…

LeetCode 2582. 递枕头

原题链接&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 题目描述 n 个人站成一排&#xff0c;按从 1 到 n 编号。 最初&#xff0c;排在队首的第一个人拿着一个枕头。每秒钟&#xff0c;拿着枕头的人会将枕头传递给队伍中的下一个人。一…

【JavaEE基础学习打卡08】JSP之初次认识say hello!

目录 前言一、JSP技术初识1.动态页面2.JSP是什么3.JSP特点有哪些 二、JSP运行环境配置1.JDK安装2.Tomcat安装 三、编写JSP1.我的第一个JSP2.JSP执行过程3.在IDEA中开发JSP 总结 前言 &#x1f4dc; 本系列教程适用于JavaWeb初学者、爱好者&#xff0c;小白白。我们的天赋并不高…

力扣-338.比特位计数

Idea 直接暴力做法&#xff1a;计算从0到n&#xff0c;每一位数的二进制中1的个数&#xff0c;遍历其二进制的每一位即可得到1的个数 AC Code class Solution { public:vector<int> countBits(int n) {vector<int> ans;ans.emplace_back(0);for(int i 1; i < …

【Docker】docker拉取镜像错误 missing signature key

问题 当我使用docker拉取一个特定的镜像时&#xff0c;提示错误&#xff1a; 错误 missing signature key 但是拉取其他镜像又可以访问&#xff0c;&#xff0c;&#xff0c;&#xff0c;于是&#xff0c;我怀疑是否是docker版本问题。 docker --version结果确实&#xff0…

ESP32设备通信-两个ESP32间UART通信

两个ESP32间UART通信 文章目录 两个ESP32间UART通信1、UART介绍2、软件准备3、硬件准备4、代码实现在本文中,我们将使用 Arduino IDE 的 UART 硬件库在两个 ESP32 板之间执行 UART 或串行通信。 要使用 USB 端口调试和编程 ESP32,需要使用称为通用异步接收器/发送器 (UART) 通…

Java发送httpPost,httpGet,httpDelete请求

业务场景&#xff1a;最近开发的项目使用的将文件图片和视频存储在Minio当中&#xff0c;但是准备上线申请资源的时候申请不到资源&#xff0c;就临时决定使用厂商提供的Api接口进行文件图片和视频上传&#xff0c;然后就需要在后端进行登录&#xff0c;文件校验和文件存储和文…

源码编译postgresql

没什么好研究的了&#xff0c;就试试编译Postgresql源码&#xff0c;按照网站查的资料一步步测试的&#xff0c;方便后期定制数据库时候用&#xff0c;也算是开源的大优势了&#xff0c;只要你愿意折腾&#xff0c;可以自己定制或改进一个数据库来满足特殊业务。后面研究一下他…

搭建智能桥梁,Amazon CodeWhisperer助您轻松编程

零&#xff1a;前言 随着时间的推移&#xff0c;人工智能技术以惊人的速度向前发展&#xff0c;正掀起着全新的编程范式革命。不仅仅局限于代码生成&#xff0c;智能编程助手等创新应用也进一步提升了开发效率和代码质量&#xff0c;极大地推动着软件开发领域的快速繁荣。 当前…

Guitar Pro 8 .1全新功能介绍及2023官方特惠优惠券

《中国好声音》节目诞生10年多热度不减&#xff0c;每一季都有籍籍无名的学员成为万众瞩目的新星。怎么像他们一样把爱好变成事业&#xff1f;带着这个问题在不断的探寻中找到了答案&#xff0c;那就是要在有限的时间里比别人做效率更高的事。所谓“工欲善其事&#xff0c;必先…