css实现水滴效果图

效果图: 

 

<template><div style="width: 100%;height:500px;padding:20px;"><div class="water"></div></div>
</template>
<script>
export default {data() {return {};},watch: {},created() {},methods: {},
};
</script>
<style lang='less' scoped>
.water {width: 300px;height: 300px;box-shadow: 10px 20px 30px 0px rgba(0, 0, 0, 0.2) inset,10px 20px 30px rgba(0,0,0,0.3),15px 15px 30px rgba(0,0,0,0.05),-15px -15px 30px rgba(255,255,255,0.8) inset;border-radius: 59% 41% 71% 29% / 54% 43% 57% 46% ;margin: 0 auto;margin-top:300px;/**box-sizing 用于控制元素的盒模型,决定了元素的宽度和高度是如何计算的;默认值是content-box, 元素的宽度和高度只包含内容区域,border-box , 元素的宽度和高度包含内容区域,内边距,边框;*/box-sizing: border-box;animation: action 3s linear infinite;
}
@keyframes action {0%{border-radius: 59% 41% 71% 29% / 54% 43% 57% 46% ;}25%{border-radius:43% 57% 55% 45% / 63% 37% 63% 37% ;}50%{border-radius:37% 63% 39% 61% / 69% 26% 74% 31% ;}75%{border-radius:53% 47% 44% 56% / 50% 58% 42% 50%  ;}100%{border-radius: 59% 41% 71% 29% / 54% 43% 57% 46% ;}
}
</style>

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

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

相关文章

spring mvc工作流程

Spring MVC 是基于模型-视图-控制器&#xff08;MVC&#xff09;设计模式的 Web 框架&#xff0c;它简化了开发 Web 应用程序的流程。下面是 Spring MVC 的工作流程详细介绍&#xff1a; 客户端请求 --> DispatcherServlet --> HandlerMapping --> Controller --&…

Win10 创建新的桌面2,并实现桌面切换

1. Win10 创建新的桌面2 Win - Tab 2. Win10 桌面切换 Ctrl - Win - ←/→ 我们下期见&#xff0c;拜拜&#xff01;

【大模型从入门到精通14】openAI API 构建和评估大型语言模型(LLM)应用2

这里写目录标题 评估大型语言模型&#xff08;LLM&#xff09;输出的方法构建评估标准实施评估协议利用专家比较案例研究评估客户服务聊天机器人学术文本摘要高级评估技术 评估大型语言模型&#xff08;LLM&#xff09;输出的方法 评估大型语言模型&#xff08;LLM&#xff09…

开源免费的表单收集系统TDuck

TDuck&#xff08;填鸭表单&#xff09;是一款开源免费的表单收集系统&#xff0c;它基于Apache 2.0协议开源&#xff0c;用户可以随时下载源码&#xff0c;自由修改和定制&#xff0c;也可以参与到项目的贡献和反馈中。TDuck表单系统不仅支持私有化部署&#xff0c;还提供了丰…

快排/堆排/归并/冒泡/

常见的内排序算法 插入排序 直接插入排序 原理&#xff1a;相当于扑克牌变成有序&#xff0c;先拿第一张&#xff0c;把他调节成有序&#xff0c;再拿第二张&#xff0c;与第一张相比找到第二张的位置&#xff0c;再继续拿第三张&#xff0c;以此类推。 void InsertSort(in…

【C++二分查找 贪心】792. 匹配子序列的单词数

本文涉及的基础知识点 C二分查找 贪心 LeetCode792. 匹配子序列的单词数 给定字符串 s 和字符串数组 words, 返回 words[i] 中是s的子序列的单词个数 。 字符串的 子序列 是从原始字符串中生成的新字符串&#xff0c;可以从中删去一些字符(可以是none)&#xff0c;而不改变其…

关于Vue项目npm快捷键,点击run启动报错,及npm i也报错的解决办法

1.配置idea的npm 2.点击运行按钮 3.结果 分析原因及问题&#xff1a; npm i npm run dev 由于是刚刚从gitlab新拉的前端代码&#xff0c;可能没有用命令install过类似于没有编译过&#xff0c;所以执行一下上面的命令 结果报错如下&#xff1a; F:\tbyf\qjyy\hip-manager-ui&…

密探 -- 渗透测试工具 v1.14 版

1.如何运行 在jdk8环境下&#xff08;在jdk8以上的高版本请参考常见问题1的处理方案&#xff09;运行以下语句运行: java -jar mitan-jar-with-dependencies.jar 若不想输入这么长太长语句&#xff0c;可以通过以下脚本的方式启动&#xff1a; Mac/Linux 环境下&#xff0c;…

计算机网络——HTTP协议详解(上)

一、HTTP协议简单介绍 1.1 什么是HTTP协议 HTTP&#xff08;超文本传输协议&#xff09;是一种用于在Web浏览器和Web服务器之间传输数据的应用层协议。它是一种无状态协议&#xff0c;即服务器不会保留与客户端的任何连接状态信息&#xff0c;每个请求都被视为一个独立的事务。…

Mysql-约束

概念&#xff1a; 约束是作用于表中字段上的规则&#xff0c;用于限制存储在表中的数据。 目的&#xff1a; 保存数据库中数据的正确&#xff0c;有效性和完整性。 分类&#xff1a; 注意事项&#xff1a;约束是作用在数据表中的字段上的&#xff0c;可以在创建表或修改表的时候…

【开端】Java 分页工具类运用

一、绪论 Java系统中&#xff0c;分页查询的场景随处可见&#xff0c;本节介com.baomidou.mybatisplus.core.metadata.IPage;来分页的工具类 二、分页工具类 public class PageUtils implements Serializable { private static final long serialVersionUID 1L; /**…

Luatos-lua For MacOSX

0x00 缘起 看到Luatos-soc-pc项目能够编译到MacOS平台并且运行&#xff0c;所以尝试编译&#xff1b;可是Apple Clang编译器太过于严格&#xff0c;导致编译不通过。遂换到gcc-11编译通过&#xff0c;虽然其中依旧会报错&#xff08;宏定义LUA_USE_MACOSX不起作用&#xff0c;导…

Android 10.0 SystemUI下拉状态栏QSTileView去掉着色效果显示彩色图标功能实现

1.前言 在10.0的系统rom定制化开发中,在关于SystemUI的下拉状态栏中QSTileView的背景颜色设置过程中,在由于 系统原生有着色效果,导致现在某些彩色背景显示不是很清楚效果不好,所以需要去掉QSTileView的默认着色 背景显示原生的彩色背景,接下来就来实现相关功能 如图: 2.…

直击Vue2/3watch的底层逻辑,字符串长度对侦听效率的影响

目录 直击Vue2/3watch的底层逻辑&#xff0c;字符串长度对侦听效率的影响 一、Vue 2的底层原理 二、Vue 3的底层原理 三、基础类型性能消耗 四、数据变化比较原理 1、Vue 2 中的引用类型比较 2、Vue 3 中的引用类型比较 3、字符串比较&#xff08;基础类型比较&#xf…

ARM——体系结构

计算机体系结构&#xff1a;冯诺伊曼 哈佛 冯诺依曼结构 冯诺依曼结构&#xff0c;也称冯诺依曼模型或普林斯顿结构&#xff0c;是根据冯诺依曼提出的存储程序概念设计的计算机体系结构。其主要特点包括&#xff1a; 存储程序&#xff1a;指令与数据都…

解决手机按键失灵!全新检测方案了解一下!

手机按键在手机设备中起着至关重要的作用&#xff0c;手机按键用于执行各种操作&#xff0c;如接听电话、挂断电话、调节音量、开关机等&#xff0c;方便用户进行基本操作。在生产过程中视觉检测需要确保按键的尺寸、形状和表面光滑度符合设计要求&#xff0c;以保证按键的正常…

基于Spring Boot的企业产品档案管理系统

目录 前言 功能设计 系统实现 获取源码 博主主页&#xff1a;百成Java 往期系列&#xff1a;Spring Boot、SSM、JavaWeb、python、小程序 前言 随着企业规模扩张和产品种类增多&#xff0c;手动管理方式不再适应不断增长的需求。因此&#xff0c;本研究的目标是设计和开发…

Cesium 缓冲区分析和查询

Cesium 缓冲区分析和查询 loadLabel() {this.collection new Cesium.BillboardCollection()this.viewer.scene.primitives.add(this.collection);this.points [];return new Promise((resolve,reject)>{fetch("../../public/json/hfty-point.json").then(res &g…

设计模式-标识域(Identity Field)

目的 为了在内存对象和数据库行之间维护标识而在对象内保存的一个数据库标识域。 关系数据库和内存对象的区别 区分行&#xff1a;关系数据库使用键来区分数据行&#xff0c;而内存对象不需要这样一个键 引用方法&#xff1a;对象系统中通过原始内存位置直接区分对象&#x…

【资源】wordpress 子比主题

简介 子比主题是一款功能强大的WordPress主题模板&#xff0c;支持社区论坛、商城、支付、古腾堡编辑器等多种功能。很多资源类网站都是基于此搭建的。搭建后的效果基本上和官网一致&#xff0c;可查看官网的演示效果。 官方网站&#xff1a;https://www.zibll.com/ 如要获取…