css如何实现边框模糊的效果

其实并不难,用属性 filter: blur(数字px); 即可。效果如下:
在这里插入图片描述
图上的圆形内有色彩的渐变,同样也是用filter: blur(数字px); 实现的,代码如下:、

<template><div id="root" :style="{}"><div id="bgc"><div id="left1"><div id="left1-1"></div><div id="left1-2"></div><div id="left1-3"></div><div id="left1-4"></div></div><div id="left2"><div id="left2-1"></div><div id="left2-2"></div><div id="left2-3"></div><div id="left2-4"></div></div><div id="left3"><div id="left3-1"></div><div id="left3-2"></div><div id="left3-3"></div></div><div id="left4"><div id="left4-1"></div><div id="left4-2"></div><div id="left4-3"></div></div></div></div></template><style lang="scss" scoped>#root {position: relative;height: 100%;#bgc {position: absolute;left: 0;top: 0;width: 100%;height: 100%;background-color: #fdfeff;/** 生成模糊边框 */#left1 {position: absolute;left: 380px;top: 360px;width: 224px;height: 224px;border-radius: 50%;overflow: hidden; /** 为了让超出范围的部分是页面底色,需设置hidden */filter: blur(10px);animation: circleMove1 5s linear infinite alternate;/** 加了点动效,可忽略 */@keyframes circleMove1 {from {transform: translate(0)}to {transform: translate(-20px, -20px)}}#left1-1 {position: absolute;left: 46px;top: -48px;width: 167px;height: 172px;background: rgba(211, 247, 244, 0.7);filter: blur(45px);}#left1-2 {position: absolute;left: -15px;top: 38px;width: 127px;height: 106px;background: rgba(191, 205, 255, 0.7);filter: blur(88px);}#left1-3 {position: absolute;left: 42px;top: 119.93px;width: 107.05px;height: 84.41px;transform: rotate(20.06deg);background: rgba(249, 239, 198, 0.7);filter: blur(61px);}#left1-4 {position: absolute;left: 88px;top: 152.49px;width: 107.06px;height: 74.17px;transform: rotate(-40.44deg);background: rgba(215, 255, 248, 0.7);filter: blur(31px);}}#left2 {position: absolute;left: 650px;top: 150px;width: 168px;height: 168px;border-radius: 50%;overflow: hidden; /**为了让超出范围的部分是白色底色,需设置hidden */filter: blur(5px);animation: circleMove2 3s linear infinite alternate;@keyframes circleMove2 {from {transform: translate(0)}to {transform: translate(10px, -5px)}}#left2-1 {position: absolute;left: 35px;top: -36px;width: 125px;height: 130px;background: #d4f8f5;filter: blur(45px);}#left2-2 {position: absolute;left: -11px;top: 28.5px;width: 95px;height: 79.5px;opacity: 1;background: #afbffa;filter: blur(88px);}#left2-3 {position: absolute;left: 21.78px;top: 117.85px;width: 80.29px;height: 33.6px;transform: rotate(20.06deg);opacity: 1;background: #fdeeb2;filter: blur(225px);}#left2-4 {position: absolute;left: 98px;top: 118px;width: 60px;height: 62px;opacity: 1;background: #d0fefb;filter: blur(45px);}}#left3 {position: absolute;right: 510px;top: 150px;width: 240px;height: 240px;border-radius: 50%;overflow: hidden; /**为了让超出范围的部分是白色底色,需设置hidden */filter: blur(10px);animation: circleMove3 4s linear infinite alternate;@keyframes circleMove3 {from {transform: translate(0);}to {transform: translate(-20px, -7px);}}#left3-1 {position: absolute;left: 56.41px;top: -58.43px;width: 203.5px;height: 209.54px;opacity: 1;background: #fac9fa;filter: blur(92px);}#left3-2 {position: absolute;left: -36.27px;top: 22.16px;width: 185.36px;height: 191.41px;background: #9eb3ff;filter: blur(204px);}#left3-3 {position: absolute;left: 106.86px;top: 185.17px;width: 130px;height: 90.07px;transform: rotate(-40.44deg);background: #eceff9;filter: blur(367px);}}#left4 {position: absolute;right: 200px;top: 100px;width: 400px;height: 400px;border-radius: 50%;overflow: hidden; /**为了让超出范围的部分是白色底色,需设置hidden */filter: blur(20px);animation: circleMove4 5s linear infinite alternate;@keyframes circleMove4 {from {transform: translate(0);}to {transform: translate(25px, 1px);}}#left4-1 {position: absolute;left: 98.73px;top: -102.25px;width: 356.12px;height: 366.7px;background: rgba(247, 209, 247, 0.7);filter: blur(92px);}#left4-2 {position: absolute;left: -63.47px;top: 38.79px;width: 324.39px;height: 334.96px;background: rgba(150, 171, 244, 0.7);filter: blur(204px);}#left4-3 {position: absolute;left: 61.71px;top: 333.92px;width: 227.49px;height: 95.19px;transform: rotate(20.06deg);background: rgba(170, 254, 240, 0.7);filter: blur(175px);}}}</style>

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

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

相关文章

2.1.2 事件驱动reactor的原理与实现

LINUX 精通 2 day14 20240513 day15 20240514 算法刷题&#xff1a;2维前缀和&#xff0c;一二维差分 耗时 135min 习题课 4h 课程补20240425 耗时&#xff1a;4h 课程链接地址 回顾 怎么学0voice课网络io——一请求一线程&#xff0c;一个client一个连接再accpet分配io f…

曲线救国:window 安装 docker

你好&#xff0c;我是 shengjk1&#xff0c;多年大厂经验&#xff0c;努力构建 通俗易懂的、好玩的编程语言教程。 欢迎关注&#xff01;你会有如下收益&#xff1a; 了解大厂经验拥有和大厂相匹配的技术等 希望看什么&#xff0c;评论或者私信告诉我&#xff01; 文章目录 一…

软件3班20240513

java.util.PropertyResourceBundle4554617c package com.yanyu;import java.sql.*; import java.util.ResourceBundle;public class JDBCTest01 {public static void main(String[] args) throws SQLException { // 获取属性配置文件ResourceBundle bundle Res…

亚马逊是如何铺设多个IP账号实现销量大卖的?

一、针对亚马逊平台机制&#xff0c;如何转变思路&#xff1f; 众所周知&#xff0c;一个亚马逊卖家只能够开一个账号&#xff0c;一家店铺&#xff0c;这是亚马逊平台明确规定的。平台如此严格限定&#xff0c;为的就是保护卖家&#xff0c;防止卖家重复铺货销售相同的产品&a…

ICode国际青少年编程竞赛- Python-5级训练场-综合练习5

ICode国际青少年编程竞赛- Python-5级训练场-综合练习5 1、 a 16 for i in range(6):Dev.step(1)Dev.turnLeft()Dev.step(a)Dev.step(-a)Dev.turnRight()while Dev.energy < 100:wait()Dev.step(1)a a - 5 i2、 for i in range(5):Dev.step(11 - i * 2)Dev.turnRight()wh…

考研数学|李林《880》做不动,怎么办!?看这一篇!

在考研数学的备考过程中&#xff0c;遇到难题是很常见的情况&#xff0c;尤其是当你尝试解决李林880习题集中的问题时。他以其难度和深度著称&#xff0c;旨在帮助考生深入理解数学分析的复杂概念。 如果你在解题过程中感到困难&#xff0c;这并不是你个人的问题&#xff0c;而…

【八大排序算法】插入排序、希尔排序、选择排序、堆排序、冒泡排序、快速排序、归并排序、计数排序

文章目录 一、排序的相关概念二、排序类型三、排序算法实现插入排序1.直接插入排序2.希尔排序 选择排序3.简单选择排序4.堆排序 交换排序5.冒泡排序6.快速排序递归实现非递归实现 7.归并排序递归实现非递归实现 8.计数排序 四、总结 一、排序的相关概念 排序&#xff1a;根据数…

MapReduce代码

WordCount 数据准备&#xff1a; a.txt lxy lxy lxy zhang wsoossj liagn guui liang liagn代码&#xff08;在idea中创建一个Maven工程&#xff09;&#xff1a; mapper&#xff1a; package com.lxy.mr.wordcount.thi;import org.apache.hadoop.io.LongWritable; import…

【经验总结】超算互联网服务器 transformers 加载本地模型

1. 背景 使用 超算互联网 的云服务&#xff0c;不能连接外网&#xff0c;只能把模型下载到本地&#xff0c;再上传上去到云服务。 2. 模型下载 在 模型中 https://huggingface.co/models 找到所需的模型后 点击下载 config.json pytorch_model.bin vocab.txt 3. 上传模型文…

矩阵相关运算1

矩阵运算是线性代数中的一个核心部分&#xff0c;它包含了许多不同类型的操作&#xff0c;可以应用于各种科学和工程问题中。 矩阵加法和减法 矩阵加法和减法需要两个矩阵具有相同的维度。操作是逐元素进行的&#xff1a; CAB or CA−B其中 A,B 和 C 是矩阵&#xff0c;且 C…

idea控制台日志控制

1.清除控制台log日志 测试的时候&#xff0c;控制台打印的日志比较多&#xff0c;速度有点慢而且不利于查看运行结果&#xff0c;所以接下来我们把这个日志处理下: 取消初始化spring日志打印&#xff0c;resources目录下添加logback.xml&#xff0c;名称固定&#xff0c;内容如…

智能自助终端主板RK3288/RK3568在酒店前台自助机方案的应用,支持鸿蒙,支持免费定制

酒店前台自助机解决方案是一款基于自助服务终端&#xff0c;能够让客人通过简单的操作完成入住登记/退房的解决方案&#xff0c;大幅提高酒店的工作效率&#xff0c;提升客人体验&#xff0c;降低人力成本。 该方案解决了以下传统前台登记入住方式的痛点&#xff1a; 1、人流量…

过滤器Filter和拦截器Interceptor实现登录校验

一.过滤器 Filter过滤器可以把对资源的请求拦截下来&#xff0c;从而实现一些登录验证的功能 1.Filter的快速入门 1.定义Filter:定义一个类&#xff0c;实现Filter接口&#xff0c;并重写其所有方法。2.配置 public class dofilter implements Filter {Override //初始化只…

Git使用(3):版本管理

一、查看历史 编写一个java类进行测试 选择Git -> Show Git Log查看日志。 第一次修改推送到远程仓库了&#xff0c;所以有origin&#xff08;远程仓库地址&#xff09;&#xff0c;第二次修改只提交到本地仓库所以没有。 二、版本回退 1、本地回退 在要回退的版本上右键&a…

线程纵横:C++并发编程的深度解析与实践

hello &#xff01;大家好呀&#xff01; 欢迎大家来到我的Linux高性能服务器编程系列之《线程纵横&#xff1a;C并发编程的深度解析与实践》&#xff0c;在这篇文章中&#xff0c;你将会学习到C新特性&#xff0c;并发编程&#xff0c;以及其如何带来的高性能的魅力&#xff0…

linux系统修改网卡名称

说明&#xff1a; 因操作过程需要停用网卡&#xff0c;导致ssh远程连接不上&#xff0c;需要控制台登录操作。 测试环境&#xff1a; CentOS7.9、8.2虚拟机 Suse15 SP4虚拟机 操作步骤&#xff1a; 方法一&#xff1a; 1、 查看网卡当前名称及状态 ip a2、 将网卡状态从启用…

uni-app(三):离线打包与插件引用(Android)

离线打包与插件引用 1.下载Android离线SDK2.使用Android Studio打开离线打包项目并更新Gradle3.解决报错4.构建5.配置AppKeya.查看证书b.申请AppKeyc.配置AppKey 6.生成本地打包App资源7.拷贝App资源到Android项目中8.修改 appid9.修改Android项目配置文件10.下载证书并配置11.…

如何将一个流固耦合的爆炸案例修改成一个没有固体的爆炸案例(类似于blastfoam的twochargeDetonation案例,可以重点模仿这个来)

t技巧总结&#xff1a;~/myapp/OpenFOAM-7/blastfoam_2_0/tutorials/twoChargeDetonation案例对比&#xff0c;发现确实这个案例也没有固体文件夹和precice-config文件夹&#xff0c;只需要用到openfoam7与blastfoam2.0.0。&#xff08;这个案例可以当做一个很好的爆炸案例的入…

51. UE5 RPG 自定义FGameplayEffectContext

我们期望能够通过FGameplayEffectContext将此次技能造成的伤害是否触发格挡和暴击的参数传递到AttributeSet中&#xff0c;所以需要实现自定义一个FGameplayEffectContext类&#xff0c;来增加对应的配置。 创建自定义类文件 首先在Public目录上右键&#xff0c;选择添加一个…

【Flutter】极光推送配置流程(VIVO/OPPO/荣耀厂商通道) 章三

相关文章 推送配置共三篇(如下链接) 【Flutter】极光推送配置流程(极光通道/华为厂商/IOS) 章一 【Flutter】极光推送配置流程(小米厂商通道) 章二 【Flutter】极光推送配置流程(VIVO/OPPO/荣耀厂商通道) 章三 前言 很高兴大家来看小编写的文章&#xff5e;&#xff5e; 继【…