css 利用模糊属性 制作水滴

 <style>.box {background-color: #111;height: 100vh;display: flex;justify-content: center;align-items: center;/* 对比度*/filter: contrast(20);}.drop {width: 150px;height: 159px;border-radius: 50%;background-color: #fff;position: absolute;/* 模糊 */filter: blur(15px);transition: all 1s;}.box:hover .drop1 {transform: translateX(-180px);}.box:hover .drop3 {transform: translateX(180px);}</style><template><div class="box"><div class="drop drop1"></div><div class="drop drop2"></div><div class="drop drop3"></div></div></template>

 

 

 

三张图 依次是 鼠标移入的变化

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

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

相关文章

JavaScript Windows 浏览器对象模型

Window 对象 BOM 的核心就是 window 对象所有浏览器都支持 window 对象。它表示浏览器窗口。所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。全局变量是 window 对象的属性。全局函数是 window 对象的方法。HTML DOM 的 document 也是 window 对象的属…

Flowable-服务-微服务任务

目录 定义图形标记XML内容界面操作 定义 Sc 任务不是 BPMN 2.0 规范定义的官方任务&#xff0c;在 Flowable 中&#xff0c;Sc 任务是作为一种特殊的服务 任务来实现的&#xff0c;主要调用springcloud的微服务使用。 图形标记 由于 Sc 任务不是 BPMN 2.0 规范的“官方”任务…

CASAIM自动化平面度检测设备3D扫描零部件形位公差尺寸测量

平面度是表面形状的度量&#xff0c;指示沿该表面的所有点是否在同一平面中&#xff0c;当两个表面需要连接在一起形成紧密连接时&#xff0c;平面度检测至关重要。 CASAIM自动化平面度检测设备通过搭载领先的激光三维测头和智能检测软件自动获取零部件高质量测量数据&#xf…

vue_router__WEBPACK_IMPORTED_MODULE_1__.default is not a constructor

你所建立的项目 是 vue2x &#xff0c;但是却下载了 vue-router4x 而 vue-router4x 适用于 vue3x 所以你需要卸载 vue-router4x&#xff0c;重新下载 vue-router3x 卸载&#xff1a; npm uninstall vue-router 安装&#xff1a;(3版本&#xff09; npm i vue-router3

剑指offer刷题笔记--Num61-68

1--扑克牌中的顺子&#xff08;61&#xff09; 主要思路&#xff1a; 五个数是顺子的充要条件&#xff1a;① 最大值 - 最小值 < 5&#xff08;大小王除外&#xff09;&#xff1b;② 没有出现重复的值&#xff08;大小王除外&#xff09;&#xff1b; 判断是否出现重复的值…

【Java】java和kotlin关于Json写文件

Java写json文件 public class WriterJson {public static void main(String[] args) {// 创建一个 JSON 对象JSONObject jsonObject new JSONObject();jsonObject.put("case", "testtest");JSONObject jsonObjects new JSONObject();jsonObjects.put(&q…

IDEA如何快捷创建serialVersionUID【详细图解】

在Java Bean&#xff0c;快速创建serialVersionUID&#xff0c;详细操作流程如下&#xff1a; 1.File->Settings->Editor->Inspections 在搜索框里搜索 Uid,选择下图中勾选的选择 2.如何使用 双击选中需要序列化Uid的类名&#xff0c;使用Alt enter&#xff0c;快捷…

Webpack5 生产模式压缩图片ImageMinimizerPlugin

文章目录 一、 ImageMinimizerPlugin是什么&#xff1f;二、已经有了asset&#xff0c;为什么需要ImageMinimizerPlugin&#xff1f;三、怎么使用ImageMinimizerPlugin&#xff1f;四、ImageMinimizerPlugin压缩的成果 一、 ImageMinimizerPlugin是什么&#xff1f; 它的实际依…

Java里的static import使用小结

Java里的static import使用小结 换了工作要把Java重新捡起来了&#xff0c;这个在大学里用过的语言&#xff0c;虽然不复杂&#xff0c;还是有一些奇怪的地方的。比如static Slgluimport。 Static import是JDK 1.5中引进的特性&#xff0c;不过读大学那会还真没注意到。它的作…

机器学习 | Python实现NARX模型预测控制

机器学习 | Python实现NARX模型预测控制 目录 机器学习 | Python实现NARX模型预测控制效果一览基本介绍研究内容程序设计参考资料效果一览 基本介绍 机器学习 | Python实现NARX模型预测控制 研究内容 贝叶斯黑盒模型预测控制,基于具有外源输入的非线性自回归模型的预期自由能最…

微信小程序防盗链referer问题处理

公司使用百度云存储一些资源&#xff0c;然后现在要做防盗链&#xff0c;在CDN加入Referer白名单后发现PC是正常的&#xff0c;微信小程序无法正常访问资源了。然后是各种查啊&#xff0c;然后发现是微信小程序不支持Referer的修改&#xff0c;且在小程序开发工具是Referer是固…

将程序打包成单一一个可执行文件

最近做了一个界面交互渲染的小项目&#xff0c;项目主要的功能是通过TCP接收数据然后在界面中渲染出对应的状态。由于用户的最大需求是炫酷&#xff0c;于是为了方便实现特殊的交互逻辑&#xff0c;我选择用freeglut自行实现了界面的交互和渲染&#xff0c;又用OpenCV做了部分图…

图数据库Neo4j学习四——Spring Data NEO

1配置 1.1Maven依赖 <!--neo4j --> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-neo4j</artifactId> </dependency>1.2yml配置 spring:data:neo4j:uri: bolt://localhost:76…

IO进、线程——线程(线程的创建、线程的退出、线程的回收、线程的分离和多线程并发编程)

线程 并发执行的轻量级进程 进程是资源分配的最小单位&#xff0c;线程是任务调度的最小单位 线程是进程的一部分&#xff0c;是任务调度的最小单位。一个进程可以包含多个线程&#xff0c;这些线程可以并发执行&#xff0c;共享进程的资源&#xff0c;但每个线程都有自己的…

QT--day4(定时器事件、鼠标事件、键盘事件、绘制事件、实现画板、QT实现TCP服务器)

QT实现tcpf服务器代码&#xff1a;&#xff08;源文件&#xff09; #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);//给服务器指针实例化空间server new QTc…

excel中使地址按十六进制进行数值递增的函数

这里是尼德兰的喵工具相关文章&#xff0c;欢迎您的访问&#xff01; 如果文章对您有所帮助&#xff0c;期待您的点赞收藏&#xff01; 让我们一起为成为芯片前端全栈工程师而努力&#xff01; 在进行寄存器编写时很多时候会涉及到算地址的问题&#xff0c;通常32bit位宽的寄存…

棕榈酰三肽-38——对额间纹,鱼尾纹,抬头纹和颈纹非常有效

简介 棕榈酰三肽-38由三个氨基酸组成&#xff0c;是一种双氧化的脂肽。这种肽的灵感源自于天然存在于胶原蛋白VI和层粘连蛋白中的一种三肽。 它可以在需要的地方&#xff0c;从内部重建肌肤&#xff0c;使皱纹平滑皮肤得到舒缓&#xff0c;尤其对额间纹&#xff0c;鱼尾纹&…

电教智能云数据可视化平台开发电脑优化日志实录

电教智能云数据可视化平台开发电脑优化日志实录 一、2K和4K弹窗判断二、电能API对接1.电脑爬虫2.电能分组过滤3.数据可视化渲染4.弹窗 三.数组按顺序输出 一、2K和4K弹窗判断 {* 判断2k和4k弹窗 *}{if $dataScene[scene_standard] eq 0}<a class"menuBtn subMenu"…

Spring整合Mybatis、Spring整合JUnit

&#x1f40c;个人主页&#xff1a; &#x1f40c; 叶落闲庭 &#x1f4a8;我的专栏&#xff1a;&#x1f4a8; c语言 数据结构 javaweb 石可破也&#xff0c;而不可夺坚&#xff1b;丹可磨也&#xff0c;而不可夺赤。 Spring整合 一、Spring整合Mybatis1.1 整合Mybatis&#x…

python设计模式

16种设计模式 1.简单工厂模式 内容:不直接向客户端暴露对象创建的实现细节,而是通过一个工厂来负责创建产品类的实例 角色: 工厂角色(Creator) 抽象产品角色(Product) 具体产品角色(Concrete Product) 优点: 1.隐藏了对象创建的实现细节 2.客户端不需要修改代码 缺点: 1.违…