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,一经查实,立即删除!

相关文章

Flowable-服务-微服务任务

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

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

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

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

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

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

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

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…

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;鱼尾纹&…

Spring整合Mybatis、Spring整合JUnit

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

记录一次通过iostat命令定位系统数据库CPU飙升的案例

一、背景 我们有个移动考勤的系统&#xff0c;运维监控系统显示&#xff0c;每到上下班时间&#xff0c;考勤数据库的CPU就飙升到100%&#xff0c;磁盘读写请求等待时间变长&#xff0c;最初无法确定是磁盘性能下降导致的CPU飙升&#xff0c;还是CPU飙升导致的磁盘性能下降&…

C# 外观模式

概述 外观模式&#xff08;Facade Pattern&#xff09;是一种结构型设计模式&#xff0c;它提供了一个统一的接口&#xff0c;用于访问子系统中的一组接口。外观模式隐藏了子系统的复杂性&#xff0c;使得客户端可以通过简单的接口与子系统进行交互。 外观模式定义了一个高层…

设计模式之观察者模式

定义&#xff1a;对象间的一种一对多的依赖关系&#xff0c;当一个对象的状态发货所能改变时&#xff0c;所有依赖它的对象都得到通知并被自动更新。 例子&#xff1a;报纸-邮局-用户 不用设计模式实现 被观察者 package com.tao.YanMoDesignPattern.observer.case3_Origin;…

Docker快速入门笔记

Docker快速入门 前言 当今软件开发领域的一股热潮正在迅速兴起&#xff0c;它融合了便捷性、灵活性和可移植性&#xff0c;让开发者们欣喜若狂。它就是 Docker&#xff01;无论你是一个初学者&#xff0c;还是一位经验丰富的开发者&#xff0c;都不能错过这个引领技术浪潮的工…

windwos server 2008 更新环境,且vs_redis 安装失败

KB2919442 下载地址:https://www.microsoft.com/zh-cn/download/confirmation.aspx?id42153 KB2919355 下载地址:https://www.microsoft.com/zh-cn/download/confirmation.aspx?id42153 安装步骤:先安装442,后安装355

C语言打印水仙花数

“水仙花数”是指一个n位数&#xff0c;其各位数字的n次方之和确好等于该数本身&#xff0c;如:153&#xff1d;13&#xff0b;53&#xff0b;3^3&#xff0c;则153是一个“水仙花数”。 思路&#xff0c;先把每个数的每位算出来&#xff0c;然后再判断他们的3次方相加是否这个…

HTML+CSS+JavaScript:随机抽奖案例

一、需求 在时代少年团的七个人中&#xff0c;随机抽取一个人获得一等奖&#xff0c;再抽取一个获二等奖&#xff0c;再抽取一个获三等奖。注意同一个人不能同时获得多个奖项 如下图所示 二、代码素材 以下是缺失JS部分的代码&#xff0c;感兴趣的小伙伴可以先自己试着写一写…