水滴怕片效果实现

效果展示

在这里插入图片描述

在这里插入图片描述

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;
}

完整代码下载

完整代码下载

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

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

相关文章

Python学习基础笔记六十六——对象的方法

我们已经学习到的对象类型&#xff1a; 整数类型的对象 字符串类型的对象 列表类型的对象 元组类型的对象 对象通常都有属于自己的方法&#xff08;method&#xff09; 调用对象的方法和调用函数差不多&#xff0c;只要在前面加上所属对象的一个点。 var1 [1, 2, 3,4, 5,…

PreScan与MATLAB联合仿真报错

一、 问题&#xff1a; Error:Matlab ||和&&运算符的操作数必须能够转换为逻辑标量值 二、解决办法 必须安装VS2013&#xff08;我装的VS2017不行的&#xff09;&#xff0c;然后重启prescan和MATLAB&#xff0c;编译通过&#xff0c;界面如下&#xff1a; 三、VS…

vue-element-admin—登录页面添加自定义背景

一、效果图 初始效果&#xff1a; 更改背景后效果&#xff1a; 二、操作步骤 1、准备图片 2、更改代码 打开下面路径的 index.vue 文件&#xff1a; vue-element-admin-master\src\views\login\index.vue 也就是登录页面。 对 .login-container 样式代码块内代码做如下…

机器学习之Sigmoid函数

文章目录 Sigmoid函数是一种常用的数学函数&#xff0c;通常用于将实数映射到一个特定的区间。它的形状类似于"S"形状曲线&#xff0c;因此得名。Sigmoid函数在机器学习、神经网络和统计学中经常被使用&#xff0c;主要用于二元分类和处理概率值。 Sigmoid函数的一般…

git-ssh-key协议同步文件

生成秘钥 ssh-keygen -t rsa ssh-keygen -t rsa Generating public/private rsa key pair. Enter file in which to save the key (/c/Users/Beza/.ssh/id_rsa): /c/Users/Beza/.ssh/id_rsa already exists. Overwrite (y/n)? y Enter passphrase (empty for no passphrase): …

idea中maven plugin提示not found

在终端中输入&#xff1a; mvn dependency:resolve 然后 解决了部分问题 Plugin org.apache.maven.plugins:maven-jar-plugin:3.1.0 not found 改为3.3.0了 Plugin maven-source-plugin:3.3.0 not found 改为 2.4 了 版本下降了 感觉后继有坑 待观察

【绝地求生】轻松提升战斗力,分享顶级吃鸡干货!

大家好&#xff01;作为一名热爱绝地求生的玩家&#xff0c;您是否想要提高自己的游戏战斗力&#xff0c;分享顶级的吃鸡干货呢&#xff1f;在本文中&#xff0c;我将带领大家探索如何通过一些实用工具和技巧来实现这些目标。 首先&#xff0c;让我们来了解绝地求生作图工具推荐…

vue3:Module not found: Error: Can‘t resolve ‘fs‘ in

在Vue3 webpack typescript的前端项目中&#xff0c;遇到了Module not found: Error: Can’t resolve ‘fs’ in 的问题。 起因 我在typecript文件中使用fs模块&#xff0c;导致程序报错&#xff0c;找不到fs模块。看了一下node_modules中也有node/type包。 解决方案 1.在…

工程管理系统源码之全面+高效的工程项目管理软件

高效的工程项目管理软件不仅能够提高效率还应可以帮你节省成本提升利润 在工程行业中&#xff0c;管理不畅以及不良的项目执行&#xff0c;往往会导致项目延期、成本上升、回款拖后&#xff0c;最终导致项目整体盈利下降。企企管理云业财一体化的项目管理系统&#xff0c;确保…

2023年淘宝天猫双11红包领取活时间什么时候开始领天猫淘宝双十一红包优惠券?

2023年淘宝天猫双11红包领取活动开始与结束时间 2023年10月24日20:00开始领取至11月11日23:59结束&#xff1b; 2023年淘宝天猫双11红包活动使用开始与结束时间 第一波&#xff1a;2023年10月31日20:00开始使用至11月3日23:59 第二波&#xff1a;2023年11月10日20:00开始使用…

Vue3.0 项目结构及组件

main.js文件 // vue中main.js的作用 // main.js是项目的入口文件&#xff0c;项目中所有的页面都会加载main.js,所以main.js,主要有三个作用&#xff1a; // 1.实例化Vue。 // 2.放置项目中经常会用到的插件和CSS样式。例如&#xff1a; 网络请求插件:axios和vue-resource、图…

5+非肿瘤分析,分型+WGCNA+机器学习筛选相关基因

今天给同学们分享一篇非肿瘤分型机器学习WGCNA实验的生信文章“Identification of diagnostic markers related to oxidative stress and inflammatory response in diabetic kidney disease by machine learning algorithms: Evidence from human transcriptomic data and mou…

Windows下Redis3.0主从模式架构搭建

redis版本&#xff1a;Redis-x64-3.0.504 复制相同文件 修改文件夹下redis.windows.conf 文件配置(注意&#xff1a;主有密码&#xff0c;从必须有密码且跟主相同) 修改端口&#xff1a; 主库&#xff1a;端口号6379 从库1&#xff1a;修改端口号为6380 从库2&#xff1a;修…

win11下的VS2022+QT6+VTK9.2+PCL1.13.1联合开发环境配置及踩坑记录

准备工作&#xff1a; 安装VS2022&#xff1a;这个比较简单&#xff0c;网上随便找个教程就行 安装QT并为VS2022添加QT Creater插件&#xff1a;VS2022配置Qt6_vs2022 qt6-CSDN博客 安装PCL&#xff1a;vs2022配置pcl1.13.1_pcl配置-CSDN博客 安装PCL过程中本身也会安装VTK&…

iOS代码混淆-从入门到放弃

​ iOS代码混淆-从入门到放弃 目录 1. 什么是iOS代码混淆&#xff1f; 2. iOS自动代码混淆的方法是什么&#xff1f; 3. iOS代码混淆的作用是什么&#xff1f; 4. 怎么样才能做到更好的iOS代码混淆&#xff1f; 总结 参考资料 1. 什么是iOS代码混淆&#xff1f; 代码混…

数据挖掘之贝叶斯优化——前反馈特征的参数,估计特征的最佳数值

贝叶斯优化是一个全局优化方法&#xff0c;用于优化具有噪声的黑盒函数。这一方法在许多现实世界的问题中都有应用&#xff0c;特别是在那些评估目标函数的代价很高的场合&#xff0c;例如超参数调优。 背景&#xff1a; 为什么需要贝叶斯优化&#xff1f; 在数据挖掘、机器…

你知道跨境商城源码如何为商家节省成本和时间吗

跨境电商行业迅速发展&#xff0c;商家如何利用跨境商城源码实现成本和时间节省 在全球经济一体化的背景下&#xff0c;跨境电商行业蓬勃发展&#xff0c;为商家提供了全球范围的市场机会。然而&#xff0c;面临的挑战也日益增多&#xff0c;比如高昂的运营成本和繁琐的流程&am…

Ruby语言基础知识

Ruby是一种简单快捷的面向对象脚本语言&#xff0c;由日本人松本行弘&#xff08;Yukihiro Matsumoto&#xff09;在20世纪90年代开发&#xff0c;遵守GPL协议和Ruby License。它的灵感和特性来自于Perl、Smalltalk、Eiffel、Ada以及Lisp语言。 以下是Ruby语言的一些特点&#…

rust: function

///file: nestd.rs ///ide: RustRover 233.8264.22 /// /// /// /***自定义函数*/ pub fn function() {println!("called my::nested::function()"); }#[allow(dead_code)] fn private_function() {println!("called my::nested::private_function()"); }/…

Linux服务器快速搭建pytorch

Linux服务器搭建pytorch 文章目录 Linux服务器搭建pytorch一、使用FileZilla传输Anaconda二、激活Anaconda环境1.创建一个虚拟环境2.使用已有项目生成requirements.txt3.在虚拟环境中使用requirements.txt安装其他项目相关库 总结 一、使用FileZilla传输Anaconda 提示&#xf…