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.mzph.cn/bicheng/52388.shtml

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

相关文章

B/S架构和C/S架构的区别

B/S架构、C/S架构区别 1. B/S架构 1.1 什么是B/S架构 B/S架构的全称为Browser/Server&#xff0c;即浏览器/服务器结构。Browser指的是Web浏览器&#xff0c;极少数事务逻辑在前端实现&#xff0c;但主要事务逻辑在服务器端实现。B/S架构的系统无须特别安装&#xff0c;只需要…

动态内存管理-经典笔试题

目录 题目一&#xff1a; 题目二&#xff1a; 题目三&#xff1a; 题目四&#xff1a; 题目一&#xff1a; 结果&#xff1a;程序崩溃 原因&#xff1a; 1、函数是传值调用&#xff0c;出了函数p不存在&#xff0c;str未改变&#xff0c;依旧为空指针&#xff0c;运行时发…

【CTF Web】CTFShow 版本控制泄露源码2 Writeup(目录扫描+.svn泄漏)

版本控制泄露源码2 10 版本控制很重要&#xff0c;但不要部署到生产环境更重要。 解法 用 dirsearch 扫描。 dirsearch -u https://8d22223d-dc2c-419c-b82d-a1d781eda427.challenge.ctf.show/找到 .svn 仓库。 访问&#xff1a; https://8d22223d-dc2c-419c-b82d-a1d781eda…

ubuntu安装minio

# 下载MinIO的可执行文件 curl -O https://dl.min.io/server/minio/release/linux-amd64/minio # 添加执行权限 chmod x minio # 运行MinIO (需要先创建存储数据和存储存储桶的目录) nohup ./minio server /home/lighthouse/minioDir/data /home/lighthouse/minioDir/bucke…

修复线上问题,又造成了个Bug

项目场景 这是一位朋友给我分享的实际线上问题&#xff0c;看似简单却害了项目再次造出一个bug来。 场景&#xff1a;线上环境中&#xff0c;需要查询某某业务数据&#xff0c;条件是状态&#xff0c;之前产品只要求查两个状态的&#xff0c;但现在让他再多查一个状态的。 自…

时序预测|基于贝叶斯BO-卷积-双向门控单元-注意力机制的单变量时间序列预测模型BO-CNN-BiGRU-Attention

时序预测|基于贝叶斯BO-卷积-双向门控单元-注意力机制的单变量时间序列预测模型BO-CNN-BiGRU-Attention 文章目录 前言时序预测|基于贝叶斯BO-卷积-双向门控单元-注意力机制的单变量时间序列预测模型BO-CNN-BiGRU-Attention 一、BO-CNN-BiGRU-Attention模型1. 贝叶斯优化&#…

Go Convey测试框架入门(go convey gomonkey)

Go Convey测试框架入门 介绍 GoConvey是一款针对Golang的测试框架&#xff0c;可以管理和运行测试用例&#xff0c;同时提供了丰富的断言函数&#xff0c;并支持很多 Web 界面特性。 Golang虽然自带了单元测试功能&#xff0c;并且在GoConvey框架诞生之前也出现了许多第三方测…

OSPF路由原理详解与关键点

目录 一. OSPF简介: 二. OSPF原理描述: 三. OSPF的核心内容: 四. OSPF的邻居关系和邻接 五. LSA在各区域中传播的支持情况 一. OSPF简介: 开放式最短路径优先OSPF&#xff08;Open Shortest Path First&#xff09;是IETF组织开发的一个基于链路状态的内部网关协议&…

技术债务已接管经济

“技术债务”一词通常指软件开发过程中的捷径或次优方法。它表现为设计不良的代码、缺乏文档和过时的组件。虽然正确编写的代码和文档是永恒的&#xff0c;但组件和方法却不是。随着时间的推移&#xff0c;软件及其组件可能会成为技术债务。自 40 年前的 20 世纪 80 年代软件行…

【嵌入式开发之网络编程】TCP端口和UDP端口

目录 网络端口的定义及作用 运输层的作用 运输层的两个主要协议 用户数据报协议UDP (User Datagram Protocol) 传输控制协议TCP (Transmission Control Protocol) 运输层的端口及分类 按照端口号分类 按照协议类型分类 BSD端口 网络端口的定义及作用 在网络技术中…

《通义千问AI落地—下》:WebSocket详解

一、前言 文本源自 微博客 且已获授权,请尊重版权。 《通义千问AI落地——下篇》如约而至。Websocket在这一类引用中,起到前后端通信的作用。因此,本文将介绍websocket在这类应用场景下的配置、使用、注意事项以及ws连接升级为wss连接等;如下图,本站已经使用了wss连接…

iphone异常问题常用修复方法

作为智能手机的领军者&#xff0c;iPhone凭借其卓越的性能和稳定的系统赢得了全球用户的青睐。然而&#xff0c;就像任何电子设备一样&#xff0c;iPhone在使用过程中也难免会遇到各种异常问题&#xff0c;如卡顿、无法充电、应用闪退等。这些问题虽然令人头疼&#xff0c;但大…

防范小程序隐私合规风险,筑牢用户信任防线

随着国内APP软件生态的成熟&#xff0c;依托于头部APP的小程序逐渐成为零售、娱乐、出行等行业必选的获客渠道之一。较低的开发成本和成熟的用户营销功能&#xff0c;令小程序的数量在过去几年呈指数级增长。截止2023年&#xff0c;头部APP内集成的小程序总量已超千万。然而&am…

C语言 之 memcpy函数的内存重叠问题 及解决该问题的思路

文章目录 函数原型&#xff1a;例子&#xff1a; 解决方式整体思路如下&#xff1a; 内存重叠问题主要是使用函数memcpy的时候会发生的 函数原型&#xff1a; void * memcpy ( void * destination, const void * source, size_t num);这个函数能够在source指向的空间中拷贝nu…

嘉立创EDA个人学习笔记2(设计流程及绘制元件)

前言 本篇文章属于嘉立创EDA的学习笔记&#xff0c;来源于B站教学视频。下面是这位up主的视频链接。本文为个人学习笔记&#xff0c;只能做参考&#xff0c;细节方面建议观看视频&#xff0c;肯定受益匪浅。 【教程】零基础入门PCB设计-国一学长带你学立创EDA专业版 全程保姆…

黑神话:悟空-配置推荐

显卡推荐&#xff08;按类别整理&#xff09; 1. GTX 10系列、GTX 16系列&#xff1a; 如果希望体验光线追踪&#xff0c;建议根据预算升级到RTX 40系列显卡。对于1080p分辨率&#xff0c;至少需要RTX 4060才能流畅运行。 2. RTX 20系列&#xff1a; RTX 2060、RTX 2070&#…

-Wl,-rpath= 编译器链接器指定动态库路径 与 LD_LIBRARY_PATH

实例先行&#xff0c; 1&#xff0c;情景 三互相依赖的小项目&#xff1a; &#xff08;1&#xff09;libbottom.so&#xff0c;无特别依赖&#xff0c;除系统文件 &#xff08;2&#xff09;libtop.so&#xff0c;依赖libbottom.so &#xff08;3&#xff09;app 可执行程…

buuctf [HDCTF2019]Maze

前言&#xff1a;做题笔记。 常规 下载 解压 查壳 脱壳后用32IDA Pro打开。 得&#xff0c;迷宫类型的题目。(字符串有说。) 咳&#xff0c;此前思路对半分不行了。。。 合理猜测步数为&#xff1a;14。 那可以看看7 * 10的迷宫类型。(手动猜测的时候去取倍数如&#xff1a;0 2…

冷硬缓存——利用缓存滥用绕过 RPC 接口安全

介绍 MS-RPC 是 Windows 操作系统的基石之一。早在 20 世纪 90 年代发布,它就已扎根于系统的大部分部分。服务管理器?RPC。Lsass?RPC。COM?RPC。甚至一些针对域控制器的域操作也使用 RPC。鉴于 MS-RPC 已经变得如此普遍,您可以预料到它已经受到严格的审查、记录和研究。 …

【Redis】有序集合(Zset)详解及实际应用场景分析:从命令操作到内部编码

目录 Zset 有序集合普通命令集合间操作命令⼩结内部编码使⽤场景 Zset 有序集合 有序集合相对于字符串、列表、哈希、集合来说会有⼀些陌⽣。它保留了集合不能有重复成员的特点&#xff0c;但与集合不同的是&#xff0c;有序集合中的每个元素都有⼀个唯⼀的浮点类型的分数&…