当前位置: 首页 > 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;即所有…...

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架&#xff0c;支持"一次开发&#xff0c;多端部署"&#xff0c;可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务&#xff0c;为旅游应用带来&#xf…...

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

《基于Apache Flink的流处理》笔记

思维导图 1-3 章 4-7章 8-11 章 参考资料 源码&#xff1a; https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

【HarmonyOS 5 开发速记】如何获取用户信息(头像/昵称/手机号)

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...

用机器学习破解新能源领域的“弃风”难题

音乐发烧友深有体会&#xff0c;玩音乐的本质就是玩电网。火电声音偏暖&#xff0c;水电偏冷&#xff0c;风电偏空旷。至于太阳能发的电&#xff0c;则略显朦胧和单薄。 不知你是否有感觉&#xff0c;近两年家里的音响声音越来越冷&#xff0c;听起来越来越单薄&#xff1f; —…...

Java求职者面试指南:Spring、Spring Boot、MyBatis框架与计算机基础问题解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问&#xff08;基础概念问题&#xff09; 1. 请解释Spring框架的核心容器是什么&#xff1f;它在Spring中起到什么作用&#xff1f; Spring框架的核心容器是IoC容器&#…...

SQL慢可能是触发了ring buffer

简介 最近在进行 postgresql 性能排查的时候,发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升,且低水位伴随在整个慢 SQL,一直是 buferIO 的等待事件,此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ,但…...

GO协程(Goroutine)问题总结

在使用Go语言来编写代码时&#xff0c;遇到的一些问题总结一下 [参考文档]&#xff1a;https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现&#xff1a; 今天在看到这个教程的时候&#xff0c;在自己的电…...