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

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>

相关文章:

css实现水滴效果图

效果图&#xff1a; <template><div style"width: 100%;height:500px;padding:20px;"><div class"water"></div></div> </template> <script> export default {data() {return {};},watch: {},created() {},me…...

接口测试面试题目,你都会了吗?

面试题 什么是接口测试&#xff1f; 接口自动化测试的流程是什么&#xff1f; GET请求和POST请求区别是什么&#xff1f; 接口测试的常用工具有哪些&#xff1f; HTTP接口的请求参数类型有哪些&#xff1f; 如何从上一个接口获取相关的响应数据传递到下一个接口&#xff1…...

jmeter-beanshell学习16-自定义函数

之前写了一个从文件获取指定数据&#xff0c;用的时候发现不太好用&#xff0c;写了一大段&#xff0c;只能取出一个数&#xff0c;再想取另一个数&#xff0c;再粘一大段。太不好看了&#xff0c;就想到了函数。查了一下确实可以写。 public int test(a,b){return ab; } ctes…...

LogicFlow工作流在React和Vue3中的使用

LogicFlow 是一款流程图编辑框架&#xff0c;提供了一系列流程图交互、编辑所必需的功能和简单灵活的节点自定义、插件等拓展机制&#xff0c;方便我们快速在业务系统内满足类流程图的需求。 核心能力 可视化模型&#xff1a;通过 LogicFlow 提供的直观可视化界面&#xff0c…...

Python循环语句:不到长城心不死

Python中的循环语句是编程中非常重要的结构&#xff0c;它们允许你重复执行一段代码多次&#xff0c;直到满足某个条件为止。Python提供了两种主要的循环类型&#xff1a;for循环和while循环。 文章目录 1. for 循环2. while 循环循环控制语句range() 函数结合循环语句和 rang…...

Unity教程(九)角色攻击的改进

Unity开发2D类银河恶魔城游戏学习笔记 Unity教程&#xff08;零&#xff09;Unity和VS的使用相关内容 Unity教程&#xff08;一&#xff09;开始学习状态机 Unity教程&#xff08;二&#xff09;角色移动的实现 Unity教程&#xff08;三&#xff09;角色跳跃的实现 Unity教程&…...

宠物空气净化器真的能除毛吗?有哪些选购技巧和品牌推荐修改版

夏日炎炎&#xff0c;有猫超甜。作为一名资深铲屎官&#xff0c;家里养有猫让我倍感幸福&#xff0c;夏天里有空调、有西瓜、有猫&#xff0c;这几个搭配在一起真的是超级爽。但在这么高温的夏天&#xff0c;家里养有宠物还是有不少烦恼的。比如家里的浮毛一直飘&#xff0c;似…...

Qt自定义注释

前言 是谁在Qt中编写代码&#xff0c;函数注释&#xff0c;类注释时&#xff0c;注释符号一个一个的敲&#xff1f; comment注释brief简洁的 Detailed详细的 第一步&#xff1a; 打开Qt 工具->选项->文本编辑器->片段 第二步&#xff1a; 点击添加 然后点击OK…...

【模电笔记】——信号的运算和处理电路(含电压比较器)

tips&#xff1a;本章节的笔记已经打包到word文档里啦&#xff0c;建议大家下载文章顶部资源&#xff08;有时看不到是在审核中&#xff0c;等等就能下载了。手机端下载后里面的插图可能会乱&#xff0c;建议电脑下载&#xff0c;兼容性更好且易于观看&#xff09;&#xff0c;…...

Java之 equals()与==

目录 运算符用途&#xff1a;用于比较两个引用是否指向同一个对象。比较内容&#xff1a;比较的是内存地址&#xff08;引用&#xff09;。适用范围&#xff1a;适用于基本数据类型和对象引用 equals() 方法用途&#xff1a;用于比较两个对象的内容是否相同。比较内容&#xf…...

Ubuntu20.04 运行深蓝路径规划hw1

前言 环境&#xff1a; ubuntu 20.04 &#xff1b; ROS版本&#xff1a; noetic&#xff1b; 问题 1、出现PCL报错&#xff1a;#error PCL requires C14 or above catkin_make 编译时&#xff0c;出现如下错误 解决&#xff1a; 在grid_path_searcher文件夹下面的CMakeLis…...

企业如何组建安全稳定的跨国通信网络

当企业在海外设有分公司时&#xff0c;如何建立一个安全且稳定的跨国通信网络是一个关键问题。为了确保跨国通信的安全和稳定性&#xff0c;可以考虑以下几种方案。 首先&#xff0c;可以在分公司之间搭建虚拟专用网络。虚拟专用网络通过对传输数据进行加密&#xff0c;保护通信…...

WordPress原创插件:Download-block-plugin下载按钮图标美化

WordPress原创插件&#xff1a;Download-block-plugin下载按钮图标美化 https://download.csdn.net/download/huayula/89632743...

前端【详解】缓存

HTTP 缓存 https://blog.csdn.net/weixin_41192489/article/details/136446539 CDN 缓存 CDN 全称 Content Delivery Network,即内容分发网络。 用户在浏览网站的时候&#xff0c;CDN会选择一个离用户最近的CDN边缘节点来响应用户的请求 CDN边缘节点的缓存机制与HTTP 缓存相同…...

P5821 【LK R-03】密码串匹配

[题目通道](【L&K R-03】密码串匹配 - 洛谷) 一道神题。 如果没有修改操作&#xff0c;翻转A数组或B数组后就是裸的FFT了 如果每次操作都暴力修改FFT时间复杂度显然爆炸 如果每次操作都不修改&#xff0c;记下修改序列&#xff0c;询问时加上修改序列的贡献&#xff0c;…...

httpx,一个网络请求的 Python 新宠儿

大家好&#xff01;我是爱摸鱼的小鸿&#xff0c;关注我&#xff0c;收看每期的编程干货。 一个简单的库&#xff0c;也许能够开启我们的智慧之门&#xff0c; 一个普通的方法&#xff0c;也许能在危急时刻挽救我们于水深火热&#xff0c; 一个新颖的思维方式&#xff0c;也许能…...

计算机网络408考研 2014

1 计算机网络408考研2014年真题解析_哔哩哔哩_bilibili 1 111 1 11 1...

JavaScript 资源大全中文版

目录 JavaScript资源大全中文版 包管理器加载器组件管理器打包工具测试框架QA工具MVC 框架和库基于 Node 的 CMS 框架模板引擎文章和帖子数据可视化 时间轴电子表格 编辑器文档工具 文件函数式编程响应式编程数据结构日期字符串数字存储颜色国际化和本地化控制流路由安全性日志…...

如何获取能直接在浏览器打开的播放地址?

背景&#xff1a;需要在浏览器上直接打开设备的画面&#xff0c;但又不想二次开发 本文介绍一种极简的取流方式&#xff0c;不需要掌握前端开发知识&#xff0c;按照本文档拼接就能得到设备的播放地址 一、准备工作 1.将设备接入到萤石账号下。萤石设备接入指南&#xff1a;h…...

如何用 LangChain 实现一个Zero Shot智能决策器(附源码)

写在前面 最近一直在研究Agent和Tool的使用&#xff0c;今天给大家带来一篇何枝大佬&#xff08;知乎何枝&#xff09;的文章《如何用LangChain实现一个Zero Shot智能决策器》&#xff0c;并附上源码。 知乎&#xff1a;https://zhuanlan.zhihu.com/p/627333499LangChain是当…...

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销&#xff0c;平衡网络负载&#xff0c;延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时&#xff0c;可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案&#xff1a; 1. 检查电源供电问题 问题原因&#xff1a;多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

令牌桶 滑动窗口->限流 分布式信号量->限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

Java面试专项一-准备篇

一、企业简历筛选规则 一般企业的简历筛选流程&#xff1a;首先由HR先筛选一部分简历后&#xff0c;在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如&#xff1a;Boss直聘&#xff08;招聘方平台&#xff09; 直接按照条件进行筛选 例如&#xff1a…...

分布式增量爬虫实现方案

之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面&#xff0c;避免重复抓取&#xff0c;以节省资源和时间。 在分布式环境下&#xff0c;增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路&#xff1a;将增量判…...

免费PDF转图片工具

免费PDF转图片工具 一款简单易用的PDF转图片工具&#xff0c;可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件&#xff0c;也不需要在线上传文件&#xff0c;保护您的隐私。 工具截图 主要特点 &#x1f680; 快速转换&#xff1a;本地转换&#xff0c;无需等待上…...

【JVM】Java虚拟机(二)——垃圾回收

目录 一、如何判断对象可以回收 &#xff08;一&#xff09;引用计数法 &#xff08;二&#xff09;可达性分析算法 二、垃圾回收算法 &#xff08;一&#xff09;标记清除 &#xff08;二&#xff09;标记整理 &#xff08;三&#xff09;复制 &#xff08;四&#xff…...