当前位置: 首页 > news >正文

水滴卡片效果实现

效果展示

在这里插入图片描述

在这里插入图片描述

CSS 知识点

  • border-radius 属性运用

FANCY-BORDER-RADIUS 工具

此工具主要是实现不规则的图形。

FANCY-BORDER-RADIUS 工具地址

页面整体布局实现

<div class="container"><div class="drop" style="--clr: #ff0f5b"><div class="content"><h2>01</h2><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam velitquis optio maiores autem non repellendus.</p><a href="#">Read More</a></div></div>
</div>

实现水滴整体样式

.container .drop {position: relative;width: 350px;height: 350px;box-shadow: inset 20px 20px 20px rgba(0, 0, 0, 0.05), 25px 25px 20px rgba(0, 0, 0, 0.05),25px 30px 30px rgba(0, 0, 0, 0.05), inset -20px -20px 25px rgba(255, 255, 255, 0.9);transition: 0.5s ease-in-out;display: flex;flex-flow: row wrap;justify-content: center;align-items: center;
}

FANCY-BORDER-RADIUS 工具生产不同形状的水滴样式

在线使用 FANCY-BORDER-RADIUS 工具后,复制出对应的border-radius属性值。在对应的元素上进行添加样式。

.container .drop:nth-child(1) {border-radius: 33% 67% 54% 46% / 30% 32% 68% 70%;
}

编辑悬停后的样式

.container .drop:hover {border-radius: 50%;
}

生产水滴上的两个白色阴影

.container .drop::before {content: "";position: absolute;top: 50px;left: 85px;width: 35px;height: 35px;background-color: #fff;border-radius: 50%;opacity: 0.8;
}.container .drop::after {content: "";position: absolute;top: 90px;left: 110px;width: 15px;height: 15px;background-color: #fff;border-radius: 50%;opacity: 0.6;
}

生产对应内容的样式

.container .drop .content {display: flex;flex-flow: column wrap;justify-content: center;align-items: center;text-align: center;gap: 15px;padding: 40px;
}.container .drop .content h2 {position: relative;width: 80px;height: 80px;background: eff0f4;border-radius: 50%;box-shadow: inset 2px 5px 10px rgba(0, 0, 0, 0.1), inset -2px -5px 10px rgba(255, 255, 255, 1),15px 15px 10px rgba(0, 0, 0, 0.05), 15px 15px 10px rgba(0, 0, 0, 0.025);display: flex;justify-content: center;align-items: center;font-size: 2em;color: var(--clr);
}.container .drop .content a {position: relative;padding: 10px 25px;background: var(--clr);text-decoration: none;color: #fff;border-radius: 25px;font-weight: 500;text-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);opacity: 0.6;transition: 0.5s;
}.container .drop .content a:hover {opacity: 1;
}

完整代码下载

完整代码下载

相关文章:

水滴卡片效果实现

效果展示 CSS 知识点 border-radius 属性运用 FANCY-BORDER-RADIUS 工具 此工具主要是实现不规则的图形。 FANCY-BORDER-RADIUS 工具地址 页面整体布局实现 <div class"container"><div class"drop" style"--clr: #ff0f5b">&l…...

【算法题】2899. 上一个遍历的整数

插&#xff1a; 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 坚持不懈&#xff0c;越努力越幸运&#xff0c;大家一起学习鸭~~~ 题目&#xff1a; 给你一个下标从 0 开始的字符串数组…...

Python+unittest+requests接口自动化测试框架搭建 完整的框架搭建过程

首先配置好开发环境&#xff0c;下载安装Python并下载安装pycharm&#xff0c;在pycharm中创建项目功能目录。如果不会的可以百度Google一下&#xff0c;该内容网上的讲解还是比较多比较全的&#xff01; 大家可以先简单了解下该项目的目录结构介绍&#xff0c;后面会针对每个文…...

系统架构设计:19 论数据挖掘技术的应用

目录 一 数据挖掘技术 1 数据挖掘的分类 2 数据挖掘的主要方法 一 数据挖掘技术 从技术角度看,数据挖掘可以定义为从大量的、不完全的、有噪声的、模糊的、随机的实际数据中提取隐含在其中的、人们不知道的、但又潜在有用的信息和知识的过程。</...

如何选择高防CDN和高防IP?

目录 前言 一、对高防CDN的选择 1. 加速性能 2. 抗攻击能力 3. 全球覆盖能力 4. 可靠性和稳定性 二、对高防IP的选择 1. 防御能力 2. 服务质量 3. 安全性 4. 价格 三、高防CDN和高防IP的优缺点对比 1. 高防CDN的优缺点 2. 高防IP的优缺点 总结 前言 随着互联网…...

【html】利用生成器函数和video元素,取出指定时间的视频画面

简言 有的时候想截取视频某一秒的视频画面。 手动截取操作麻烦&#xff0c;还得时刻关注视频播放时间。 于是&#xff0c;我搞出来了一个根据视频自动截取特定时间描述的页面。 效果 实现步骤 获取视频对象根据视频时长生成时间选择表单根据表单选择的时间和视频地址&#x…...

第五十九章 学习常用技能 - 将数据从一个数据库移动到另一个数据库

文章目录 第五十九章 学习常用技能 - 将数据从一个数据库移动到另一个数据库 第五十九章 学习常用技能 - 将数据从一个数据库移动到另一个数据库 如果需要将数据从一个数据库移动到另一个数据库&#xff0c;请执行以下操作&#xff1a; 识别包含数据及其索引的Global。 如果…...

虚拟示波器的设计与实现

摘 要 针对传统示波器功能单一、不方便更新升级的缺陷&#xff0c;本文基于虚拟仪器软件LabVIEW和NI PCI-6221数据采集卡设计并实现了一种多功能虚拟示波器&#xff0c;该虚拟示波器不仅具有采集和显示实际信号时域波形的功能&#xff0c;还具有信号产生、波形存储等功能。 测试…...

ImgPlus:基于CodeFormer的图片增强

背景 最近参与了华为云开发者大会AI赛道&#xff0c;做了一个AI图片增强作品&#xff0c;本片文章来简单介绍一下。 正文 作品名称&#xff1a;ImgPlus 赛题技术领域选择&#xff1a; AI&#xff0c;图片增强 使用技术名称&#xff1a; CodeFormer&#xff0c;ECS&#xff0…...

2024华为校招面试真题汇总及其解答(二)

6.【算法题】三步问题 题目: 三步问题。有个小孩正在上楼梯,楼梯有n阶台阶,小孩一次可以上1阶、2阶或3阶。实现一种方法,计算小孩有多少种上楼梯的方式。结果可能很大,你需要对结果模1000000007。 示例1: 输入:n = 3 输出:4说明: 有四种走法示例2: 输入:n = 5输出:1…...

编译链接(Compile Link)

文章目录 前言一、翻译环境1、概念2、翻译环境的组成3、什么是编译链接&#xff1f; 二、编译1、编译的阶段2、预编译3、编译1、什么是语法分析&#xff1f;2、什么是词法分析&#xff1f;3、什么是语义分析&#xff1f;4、什么是符号汇总&#xff1f; 4、汇编1、符号表展示 三…...

14 幂等生产者和事务生产者

kafka消息交付可靠性保障和精确一次语义处理 消息交付可靠性保障&#xff0c;指的kafka对Producer和Consumer要处理的消息提供什么样的承诺。总共就三种&#xff1a;at most once 、at least once、axactly once kafka默认提供的是 at least once。原因是只有Broker提交消息并…...

zabbix部署与监控

目录 一、什么是zabbix&#xff1f; 二、zabbix 监控原理 三、Zabbix 新特性 三、Zabbix 功能组件 四、部署 zabbix zabbix的服务端部署 zabbix的客户端部署 zabbix的服务端部署 一、什么是zabbix&#xff1f; zabbix 是一个基于 Web 界面的提供分布式系统监视以及网络…...

Python 编程基础 | 第五章-类 | 5.8、运算符重载

一、运算符重载 1、Python类内置方法 Python常用内置方法&#xff0c;如下&#xff1a; __init__&#xff1a; 构造函数&#xff0c;在生成对象时调用__del__&#xff1a; 析构函数&#xff0c;释放对象时使用__repr__&#xff1a; 打印&#xff0c;转换__setitem__&#xff1…...

【前端设计模式】之解释器模式

解释器模式是一种行为设计模式&#xff0c;它用于解释特定语言或规则的表达式。在前端开发中&#xff0c;解释器模式可以用于处理复杂的逻辑或规则&#xff0c;并将其转化为可执行的代码。 解释器模式特性 定义语言规则&#xff1a;解释器模式通过定义语言规则来解析和执行表…...

TiDB 7.4 发版:正式兼容 MySQL 8.0

MySQL 是全球最受欢迎的开源数据库&#xff0c;长期位于 DB-Engines Ranking 排行榜第二名&#xff0c;在世界范围内拥有数量庞大的企业用户和开发者。然而&#xff0c;随着时间的推移&#xff0c;MySQL 用户正面临新挑战。Oracle 官宣将在 2023 年 10 月终止 MySQL 5.7 版本的…...

QT 网络编程 服务端 客户端 QTcpServer

服务端的创建 //创建服务端QTcpServer对象 server new QTcpServer(this);//设置服务端&#xff0c;端口&#xff0c;这里绑定的是主机的所有网卡&#xff0c; server->listen(QHostAddress::Any, 8080);//绑定连接信号与槽 connect(this->server, &QTcpServer::new…...

Stm32_标准库_16_串口蓝牙模块_手机与蓝牙模块通信_手机传入信息能对芯片时间日期进行更改

实现了手机发送信息给蓝牙模块&#xff0c;程序对数据进行分析拆解&#xff0c;并更新自身数据 main.c: #include "stm32f10x.h" // Device header #include "Delay.h" #include "OLED.h" #include "Serial.h" #include "Ti…...

137.【SpringCloud-快速搭建】

微服务框架搭建 (一)、SpringCloud-Parent1.创建一个SpringBoot项目2.导入我们的依赖 (二)、SpringCloud-API (实体类)1.创建一个SpringBoot项目2.导入我们的依赖3.创建我们的实体类 (三)、SpringCloud-dept (业务A)1.创建一个SpringBoot项目2.导入我们的依赖3.配置我们的配置信…...

计算机网络第2章-CDN(4)

视频流和内容分发网 HTTP流和DASH 在HTTP流中&#xff0c;视频只是存储在HTTP服务器中作为一个普通的文件&#xff0c;每个文件有有一个特定的URL。当用户要看视频时&#xff0c;客户与服务器之间创建一个TCP连接并发送HTTP GET请求。 HTTP流具有严重缺陷&#xff0c;即所有…...

3步打造你的专属阅读系统:开源工具如何重构数字阅读体验

3步打造你的专属阅读系统&#xff1a;开源工具如何重构数字阅读体验 【免费下载链接】legado-Harmony 开源阅读鸿蒙版仓库 项目地址: https://gitcode.com/gh_mirrors/le/legado-Harmony 你是否曾遇到这样的困扰&#xff1a;阅读APP充斥广告弹窗、书源受限无法找到心仪内…...

Windows下FFmpeg环境配置全攻略:从下载到视频剪辑实战

Windows下FFmpeg环境配置全攻略&#xff1a;从下载到视频剪辑实战 在数字内容创作爆发的时代&#xff0c;视频处理能力已成为开发者和创作者的必备技能。FFmpeg作为开源多媒体处理领域的"瑞士军刀"&#xff0c;其强大功能与跨平台特性使其成为处理音视频文件的首选工…...

告别卡顿闪烁!在Cesium 1.134中集成SOG格式,让400万高斯秒级加载

突破性能瓶颈&#xff1a;Cesium 1.134集成SOG格式实现400万高斯秒级渲染 在三维地理空间可视化领域&#xff0c;Cesium一直是开发者构建高精度场景的首选引擎。但当项目涉及数百万级高斯泼溅数据时&#xff0c;传统加载方式往往导致令人崩溃的卡顿和视角移动时的闪烁问题。最近…...

HP-Socket技术债务管理成熟度提升计划:行动项与时间表

HP-Socket技术债务管理成熟度提升计划&#xff1a;行动项与时间表 【免费下载链接】HP-Socket High Performance TCP/UDP/HTTP Communication Component 项目地址: https://gitcode.com/gh_mirrors/hp/HP-Socket HP-Socket作为高性能TCP/UDP/HTTP通信组件&#xff0c;随…...

B端拓客号码核验行业:痛点剖析、技术突围与发展思考氪迹科技法人 号码筛选系统,阶梯式价格

B端拓客的效率与质量&#xff0c;很大程度上取决于核心决策人触达的精准度&#xff0c;而企业法人、股东、董监高等群体的有效联系方式&#xff0c;正是打通这一环节的关键。作为拓客工作的前置基础性步骤&#xff0c;号码核验的质量直接关联拓客投入的回报效率&#xff0c;更是…...

黑丝空姐-造相Z-Turbo实战项目:数据库课程设计之AI图库管理系统

黑丝空姐-造相Z-Turbo实战项目&#xff1a;数据库课程设计之AI图库管理系统 最近在带学生做数据库课程设计&#xff0c;发现一个挺有意思的现象&#xff1a;很多同学觉得数据库设计就是建几张表&#xff0c;写几个查询&#xff0c;做完就完了&#xff0c;跟实际应用脱节挺大的…...

【Python SM9性能生死线】:当SM9签名延迟突破120ms,你必须立即检查的4个Cython绑定陷阱

第一章&#xff1a;Python SM9性能生死线的临界认知SM9作为我国自主设计的标识密码算法标准&#xff08;GB/T 38635–2020&#xff09;&#xff0c;其在Python生态中的实现常因底层运算瓶颈而陷入“可运行但不可用”的灰色地带。性能临界点并非由单一因素决定&#xff0c;而是密…...

7个高级配置技巧:打造极致Markdown预览体验

7个高级配置技巧&#xff1a;打造极致Markdown预览体验 【免费下载链接】vscode-markdown-preview-enhanced One of the "BEST" markdown preview extensions for Visual Studio Code 项目地址: https://gitcode.com/gh_mirrors/vs/vscode-markdown-preview-enhanc…...

如何用ASR6601实现22dBm发射功率?LoRa模组射频优化全流程

ASR6601射频性能深度优化&#xff1a;从原理到22dBm发射功率实战指南 在低功耗广域物联网(LPWAN)领域&#xff0c;LoRa技术凭借其出色的传输距离和抗干扰能力&#xff0c;已成为智慧城市、工业监测等场景的首选方案。而ASR6601作为国产化LoRa SoC的佼佼者&#xff0c;其集成的A…...

3分钟搞定!LyricsX让你的macOS音乐播放器拥有完美歌词体验

3分钟搞定&#xff01;LyricsX让你的macOS音乐播放器拥有完美歌词体验 【免费下载链接】LyricsX &#x1f3b6; Ultimate lyrics app for macOS. 项目地址: https://gitcode.com/gh_mirrors/ly/LyricsX 还在为macOS上的音乐播放器找不到合适的歌词而烦恼吗&#xff1f;L…...