CSS系列(27)- 图形与滤镜详解

前端技术探索系列:CSS 图形与滤镜详解 🎨

致读者:探索CSS的艺术表现力 👋

前端开发者们,

今天我们将深入探讨 CSS 图形和滤镜效果,学习如何创建引人注目的视觉效果。

基础图形 🚀

几何形状

/* 圆形 */
.circle {width: 100px;height: 100px;border-radius: 50%;background: #007bff;
}/* 三角形 */
.triangle {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 86.6px solid #28a745;
}/* 六边形 */
.hexagon {width: 100px;height: 57.735px;background: #dc3545;position: relative;
}.hexagon::before,
.hexagon::after {content: '';position: absolute;width: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;
}.hexagon::before {bottom: 100%;border-bottom: 28.867px solid #dc3545;
}.hexagon::after {top: 100%;border-top: 28.867px solid #dc3545;
}

复杂图形

/* 心形 */
.heart {width: 100px;height: 90px;position: relative;
}.heart::before,
.heart::after {content: '';position: absolute;top: 0;width: 50px;height: 80px;border-radius: 50px 50px 0 0;background: #ff4444;
}.heart::before {left: 50px;transform: rotate(-45deg);transform-origin: 0 100%;
}.heart::after {left: 0;transform: rotate(45deg);transform-origin: 100% 100%;
}/* 星形 */
.star {width: 0;height: 0;border-right: 100px solid transparent;border-bottom: 70px solid #ffd700;border-left: 100px solid transparent;transform: rotate(35deg);position: relative;
}.star::before {content: '';position: absolute;border-bottom: 80px solid #ffd700;border-left: 30px solid transparent;border-right: 30px solid transparent;transform: rotate(-35deg);top: -45px;left: -65px;
}.star::after {content: '';position: absolute;top: 3px;left: -105px;border-right: 100px solid transparent;border-bottom: 70px solid #ffd700;border-left: 100px solid transparent;transform: rotate(-70deg);
}

滤镜效果 🎯

基础滤镜

/* 模糊效果 */
.blur {filter: blur(5px);
}/* 亮度调整 */
.brightness {filter: brightness(150%);
}/* 对比度 */
.contrast {filter: contrast(180%);
}/* 组合滤镜 */
.combined-filters {filter: contrast(150%) brightness(110%) saturate(180%) hue-rotate(30deg);
}

高级滤镜

/* 毛玻璃效果 */
.frosted-glass {background: rgba(255, 255, 255, 0.2);backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);
}/* 动态滤镜 */
.hover-filter {transition: filter 0.3s;
}.hover-filter:hover {filter: brightness(110%) contrast(110%) saturate(120%);
}/* 图片处理 */
.image-effects {filter: sepia(50%)brightness(110%)contrast(120%)saturate(150%);
}

混合模式 💫

基础混合

/* 正片叠底 */
.multiply {background: #ff0000;mix-blend-mode: multiply;
}/* 叠加 */
.overlay {background: #00ff00;mix-blend-mode: overlay;
}/* 滤色 */
.screen {background: #0000ff;mix-blend-mode: screen;
}

高级混合

/* 渐变混合 */
.gradient-blend {background: linear-gradient(45deg, #ff0000, #00ff00);mix-blend-mode: overlay;
}/* 图片混合 */
.image-blend {background-image: url('image.jpg');mix-blend-mode: luminosity;
}/* 动态混合 */
.hover-blend {transition: mix-blend-mode 0.3s;
}.hover-blend:hover {mix-blend-mode: difference;
}

渐变技巧 ⚡

线性渐变

/* 基础渐变 */
.gradient {background: linear-gradient(45deg, #ff0000, #00ff00);
}/* 多色渐变 */
.multi-gradient {background: linear-gradient(to right,#ff0000,#ff7f00,#ffff00,#00ff00,#0000ff,#4b0082,#8f00ff);
}/* 重复渐变 */
.repeating-gradient {background: repeating-linear-gradient(45deg,#ff0000,#ff0000 10px,#ffffff 10px,#ffffff 20px);
}

径向渐变

/* 圆形渐变 */
.radial {background: radial-gradient(circle, #ff0000, #00ff00);
}/* 椭圆渐变 */
.elliptical {background: radial-gradient(ellipse at center,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 70%);
}/* 多重渐变 */
.complex-gradient {background: radial-gradient(circle at 50% 0,rgba(255,0,0,.5),rgba(255,0,0,0) 70.71%),radial-gradient(circle at 6.7% 75%,rgba(0,0,255,.5),rgba(0,0,255,0) 70.71%),radial-gradient(circle at 93.3% 75%,rgba(0,255,0,.5),rgba(0,255,0,0) 70.71%);
}

最佳实践建议 💡

  1. 性能考虑

    • 合理使用滤镜
    • 优化渐变效果
    • 控制混合模式
    • 避免过度使用
  2. 创意表现

    • 组合多种效果
    • 动态交互
    • 响应式适配
    • 优雅降级
  3. 浏览器兼容

    • 特性检测
    • 回退方案
    • 前缀处理
    • 性能测试
  4. 实践建议

    • 模块化设计
    • 可维护性
    • 代码复用
    • 文档完善

写在最后 🌟

CSS图形和滤镜效果为我们提供了强大的视觉表现力,通过合理运用这些技术,我们可以创建出独特而吸引人的界面效果。

进一步学习资源 📚

  • CSS图形教程
  • 滤镜效果指南
  • 混合模式详解
  • 创意案例集

如果你觉得这篇文章有帮助,欢迎点赞收藏,也期待在评论区看到你的想法和建议!👇

终身学习,共同成长。

咱们下一期见

💻

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

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

相关文章

四、使用langchain搭建RAG:金融问答机器人--构建web应用,问答链,带记忆功能

经过前面3节完成金融问答机器人基本流程,这章将使用Gradio构建web应用,同时加入memory令提示模板带有记忆的,使用LCEL构建问答链。 加载向量数据库 from langchain.vectorstores import Chroma from langchain_huggingface import HuggingF…

矩阵链乘法【东北大学oj数据结构10-2】C++

矩阵链乘法问题的目标是找到最有效的方法来乘以给定的 n 个矩阵 M1,M2,M3,...,Mn。 编写一个程序,读取 Mi 的维度,并找到最小标量乘法以计算最大链链乘法 M1M2...Mn。 输入 在第一行中,给出了一个整数 n。 在接下来的 n 行中,矩阵…

深度学习之超分辨率算法——SRCNN

网络为基础卷积层 tensorflow 1.14 scipy 1.2.1 numpy 1.16 大概意思就是针对数据,我们先把图片按缩小因子照整数倍进行缩减为小图片,再针对小图片进行插值算法,获得还原后的低分辨率的图片作为标签。 main.py 配置文件 from model im…

基于海思soc的智能产品开发(mcu读保护的设置)

【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing 163.com】 对于市场上的产品,除了电路之外,软件保护也是非常重要的一个环节。要是自己辛辛苦苦写的软件,被竞争对手轻易地…

Zabbix6.0升级为6.4

为了体验一些新的功能,比如 Webhook 和问题抑制等,升级个小版本。 一、环境信息 1. 版本要求 一定要事先查看官方文档,确认组件要求的版本,否则版本过高或者过低都会出现问题。 2. 升级前后信息 环境升级前升级后操作系统CentOS…

GitLab的卸载与重装

目录 一、GitLab的卸载 二、 GitLab的安装与配置 1. 创建安装目录 2. 安装 3. 使用 3.1 初始化 3.2 创建空白项目 ​编辑 3.3 配置SSH 3.3.1 配置公钥 ​编辑 3.3.2 配置私钥 3.4 配置本地git库 一、GitLab的卸载 1. 停止gitlab sudo gitlab-ctl stop 2. 卸载…

0基础学java之Day29(单例模式、死锁)

单例模式 理解:在整个项目中,该类的实例只能有一个 1.饿汉式 优点:线程安全 缺点:浪费资源 public class A { ​private static A a new A();private A(){}public static A getInstance(){return a;}public static void met…

PyCharm 中打印完整的 DataFrame

PyCharm 中打印完整的 DataFrame 方法 1:设置 pandas 的全局显示选项代码示例:解释: 方法 2:临时设置显示选项代码示例:解释: 方法 3:使用 to_string 方法代码示例:解释:…

Linux快速入门-Linux的常用命令

Linux的常用命令 1. Linux的终端与工作区1.1 终端概述1.2 切换终端 2. Shell语言解释器2.1 Shell概述 3. 用户登录与身份切换3.1 su 命令3.2 sudo 命令 4. 文件、目录操作命令4.1 pwd 命令4.2 cd 命令4.3 ls 命令4.3.1 ls 指令叠加使用 4.4 mkdir 命令4.5 rmdir 命令4.6 cp 命令…

内表中的 GROUP BY 详解

由于大家对语法及其含义似乎有些混淆,让我们用一个非常简单的例子来逐步处理内部表的分组问题,你会发现其实并不复杂。我还附上了一个程序的全文,该程序会执行以下步骤并产生一些输出结果。 是的,您有一个内部表 spfli_tab TYPE …

三、ubuntu18.04安装docker

1.使用默认ubuntu存储库安装docker 更新软件存储库 更新本地软件数据库确保可以访问最新版本。打开终端输入:sudo apt-get update 卸载旧版本的docker 建议继续之前卸载任何旧的docker软件。打开终端输入:sudo apt-get remove docker docker-engine …

【Linux系统编程】:信号(2)——信号的产生

1.前言 我们会讲解五种信号产生的方式: 通过终端按键产生信号,比如键盘上的CtrlC。kill命令。本质上是调用kill()调用函数接口产生信号硬件异常产生信号软件条件产生信号 前两种在前一篇文章中做了介绍,本文介绍下面三种. 2. 调用函数产生信号 2.1 k…

专业电脑数据恢复软件 iFind Data Recovery v9.2.3 绿色便携版

前言 iFinD Data Recovery一款特别实用的数据找回工具,它很厉害,能帮你在SSD硬盘和Windows10系统上找回丢失的数据。而且,它还能深度扫描并恢复各种主流数码相机里的RAW格式照片,速度超快,用起来也很稳定顺畅&#xf…

QT:Widgets中的数据库应用

SQL数据库驱动 pro文件中添加如下一行代码 QT sql widgetsmain.cpp #include <QApplication> #include <QSqlDatabase> #include <QStringList> int main(int argc, char *argv[]) {QApplication a(argc, argv);qDebug() << "Available driver…

AI的进阶之路:从机器学习到深度学习的演变(三)

&#xff08;承接上集&#xff1a;AI的进阶之路&#xff1a;从机器学习到深度学习的演变&#xff08;二&#xff09;&#xff09; 四、深度学习&#xff08;DL&#xff09;&#xff1a;机器学习的革命性突破 深度学习&#xff08;DL&#xff09;作为机器学习的一个重要分支&am…

数据集-目标检测系列 车牌检测识别 数据集 CCPD2019

车牌检测&识别 数据集 CCPD2019 DataBall 助力快速掌握数据集的信息和使用方式&#xff0c;会员享有 百种数据集&#xff0c;持续增加中。 需要更多数据资源和技术解决方案&#xff0c;知识星球&#xff1a; “DataBall - X 数据球(free)” 贵在坚持&#xff01; 数据样…

(2024.12)Ubuntu20.04安装ZED-SDK

一.官网地址 ZED SDK 4.2 - Download | Stereolabs 选择适配版本进行下载 二.安装程序 下载完成后&#xff0c;进入文件目录&#xff0c;打开终端&#xff0c;输入&#xff1a; chmod x ZED_SDK_Ubuntu20_cuda11.8_v4.2.2.zstd.run ./ZED_SDK_Ubuntu20_cuda11.8_v4.2.2.zst…

MySQL 中的常见错误与排查

在 MySQL 数据库的日常运维中&#xff0c;管理员可能会遇到各种错误。无论是查询性能问题、连接异常、数据一致性问题&#xff0c;还是磁盘空间不足等&#xff0c;及时排查并解决这些问题是保证数据库稳定运行的关键。本文将列出 MySQL 中一些常见的错误及其排查方法。 一、连接…

JUC并发工具---ThreadLocal

ThreadLocal适合用在哪些实际生产的场景中 适用场景 场景一场景二ThreadLocal用作保存每个线程独享的对象ThreadLocal用作每个线程内需要独立保存信息以便其他方法更方便地获取该信息的场景&#xff08;类似于全局变量的概念&#xff09;通常用于保存线程不安全的工具类&…

解决uniapp中使用axios在真机和模拟器下请求报错问题

由于我的uniapp项目是通过vite脚手架搭建的&#xff0c;当时选择了axios作为请求方式&#xff0c;在本地调试的时候也一直没发现有问题&#xff0c;直到打包成app在真机上登录&#xff0c;发现报错There is no suitable adapter to dispatch the request since:-adapter xhr is…