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

css实现渐进中嵌套渐进的方法

 这是我们想要的实现效果:

思路:

1.有一个底色的背景渐变 

2.需要几个小的块级元素做绝对定位通过渐变+filter模糊来实现

注意:这里的采用的定位方法,所以在内部的元素一律要使用绝对定位,否则会出现层级的问题,z-index只有在定位元素有效。

参考代码:

<view class="position-relative border-rd-20rpx mb-28rpx h-350rpx"style="background: linear-gradient(0deg, #FFE7B7 0%, #FF663C 100%);overflow: hidden;"><view class="h-100%"><viewstyle="background: linear-gradient(to right,#ffb753,#ff8f61);border-radius: 50% / 40%;filter: blur(8px);transform: rotate(30deg);"class="w-150rpx top-28rpx h-100rpx left--20rpx mt-20rpx position-absolute z-index:-1"></view><viewstyle="background: linear-gradient(to right,#ffb753,#ff8f61);border-radius: 50% / 40%;filter: blur(8px);transform: rotate(90deg);"class="w-150rpx top--80rpx h-100rpx right-36rpx mt-20rpx position-absolute z-index:-1"></view><viewstyle="background:#FF2F2F;border-radius: 50% / 40%;filter: blur(10px);transform: rotate(-90deg);"class="w-150rpx top--10rpx h-80rpx right--60rpx mt-20rpx position-absolute z-index:-1"></view><viewstyle="background: linear-gradient(to right,#ffb753,#ff8f61);border-radius: 50% / 40%;filter: blur(8px);transform: rotate(90deg);"class="w-70rpx top-80rpx h-70rpx right--30rpx mt-20rpx position-absolute z-index:-1"></view></view></view>

 

http://www.lryc.cn/news/399578.html

相关文章:

  • JavaWeb后端学习
  • VUE_TypeError: Cannot convert a BigInt value to a number at Math.pow 解决方法
  • Linux下mysql数据库的导入与导出以及查看端口
  • Open3d入门 一文读懂三维点云
  • pyinstaller系列教程(一)-基础介绍
  • echarts图表:类目轴
  • SSM贫困生申请管理系统-计算机源码84308
  • [C++]——同步异步日志系统(5)
  • Qt项目:基于Qt实现的网络聊天室---TCP服务器和token验证
  • 深入理解C++构造函数
  • J025_斗地主游戏案例开发(简版)
  • 路径规划 | 飞蛾扑火算法求解二维栅格路径规划(Matlab)
  • 优化Cocos Creator 包体体积
  • TCPDump协议分析工具
  • 土壤分析仪:解密土壤之奥秘的科技先锋
  • 计算1的数量
  • Linux udp编程
  • 【开源项目】Rust开发复制文件夹目录结构工具
  • PostgreSQL的pg_dirtyread工具
  • 苹果梦碎:Vision Pro的辉煌与失落,苹果已决定暂停 Vision Pro 后续产品的研发工作
  • 推荐一款uniapp拖动验证码插件
  • 十年期国债收益率
  • 使用Go编写的持续下行测速脚本,快速消耗流量且不伤硬盘
  • 保护国外使用代理IP的安全方法
  • 18集 学习ESP32的ESP-DL深度学习教程-《MCU嵌入式AI开发笔记》
  • jmeter-beanshell学习9-放弃beanshell
  • Web 性能入门指南-1.5 创建 Web 性能优化文化的最佳实践
  • 【Android】Service介绍和生命周期
  • [论文笔记]RAPTOR: RECURSIVE ABSTRACTIVE PROCESSING FOR TREE-ORGANIZED RETRIEVAL
  • python 端口的转发