找到
295
篇与
易航
相关的结果
- 第 22 页
-
易航博客APP闪亮登场，开启移动阅读新纪元！ 亲爱的读者朋友们，激动人心的时刻终于到来！我们倾注了无数心血打造的易航博客APP正式上线啦！ 从此，阅读不再局限于电脑屏幕，随时随地尽享阅读乐趣！ 典狱司 - 抿抿甜" url="https://txmov2.a.kwimgs.com/upic/2025/02/16/15/BMjAyNTAyMTYxNTU2MjdfNDE0MzgwMDU5NF8xNTcxMDc4MTE4MzdfMV8z_b_B4320c674177609899c755d2a5d24349b.mp4" cover="https://p4-ad.adukwai.com/upic/2025/02/16/15/BMjAyNTAyMTYxNTU2MjdfNDE0MzgwMDU5NF8xNTcxMDc4MTE4MzdfMV8z_ccc_Be91c1eb78454cbd96a257973e889e7fc.jpg" theme="#409eff" lrc="" lrcType="0" loop="none" autoplay="1" storage="0" autotheme="1 易航博客APP，为您带来以下精彩体验： 便捷的阅读体验：无论是乘坐飞机、地铁，还是在排队等候，随时随地打开APP，即可沉浸在精彩的文字海洋中。 丰富的文章内容：涵盖科技、生活、文化、娱乐等各个领域，总有一款适合你！ 个性化的阅读设置：调整字体大小、亮度、阅读模式，打造舒适的阅读体验。 离线阅读功能：提前下载文章，即使没有网络也能尽情阅读。 便捷的分享功能：精彩内容一键分享到微信、微博等社交平台，与朋友们一起分享阅读的快乐。 易航博客APP，不仅仅是一个阅读工具，更是一个思想的交流平台！ 我们致力于打造一个开放、多元的交流社区，让每位用户都能在这里找到共鸣，分享自己的观点和见解。 立即下载易航博客APP，开启移动阅读新纪元！ 下载地址：点击下载 我们期待您的加入，一起在知识的海洋中畅游！ 此外，我们还将陆续推出更多新功能和精彩活动，敬请期待！
-
Joe再续前缘实现自动更新 首先，在宝塔终端执行添加主题安全目录到 Git 全局配置的命令 # 主题目录示例：/www/wwwroot/blog.yihang.info/usr/themes/Joe git config --global --add safe.directory 这里填写你的主题目录添加主题安全目录到 Git 全局配置的命令执行完成后会没有任何返回内容，这代表已经成功了添加主题安全目录到 Git 的全局配置后在宝塔计划任务处添加Shell脚本或bat脚本，脚本内容为 #!/bin/bash echo "开始检测更新" # 主题目录示例：/www/wwwroot/blog.yihang.info/usr/themes/Joe gitPath="这里填写你的主题目录" # git 网址 gitHttp="https://gitee.com/yh-it/Joe" echo "Web站点路径：$gitPath" #判断项目路径是否存在 if [ -d "$gitPath" ]; then cd $gitPath #判断是否存在git目录 if [ ! -d ".git" ]; then echo "在该目录下克隆 git" git clone $gitHttp gittemp mv gittemp/.git . rm -rf gittemp fi #拉取最新的项目文件 sudo git reset --hard origin/master sudo git pull #设置目录权限 chown -R www:www $gitPath echo "更新完毕" exit else echo "该项目路径不存在" exit fi示例 宝塔计划任务 Joe再续前缘自动更新图片
-
你真的应该弄清楚 URI 和 URL 的区别 在互联网上，我们经常需要引用资源的位置来访问对应的资源。为了实现这一点，有两个术语经常被提及：URI 和 URL。这两个术语很容易也经常被弄混，很多人虽然大概能知道意思，但是并不能区分两者的差别，一直处于稀里糊涂之中。本文将详细介绍 URI 和 URL 的定义、作用以及它们之间的差异，并通过具体的例子帮助大家更好地理解。 什么是 URI？ URI（Uniform Resource Identifier），统一资源标识符，是一个字符串，用于唯一标识互联网上的资源。URI 主要用于标识资源，而不管资源位于何处或如何访问。一个 URI 可能包含多种类型的标识信息，包括但不限于名称、位置、对象类型等。 拿书来举个例子，假设一本书的标题是《计算机网络》，可以使用一个 URI 来唯一标识这本书，如 urn:isbn:978-0132671453，这里的 “urn:isbn：” 表示这是一个国际标准书号 (ISBN) 格式的 URI。再拿本地文件来举个例子，对于本地文件系统中的一个文件，我们可以使用类似这样的 URI：file:///C:/Documents/MyFile.txt，这里的 “file://” 表示这是文件系统的路径。 URI 的主要目的是标识资源，而无需指定如何访问这些资源。URI 可以用于各种各样的资源，包括文件、书籍、服务等。 什么是 URL？ URL（Uniform Resource Locator），统一资源定位符，是 URI 的一个子集，专门用于描述资源的位置以及访问资源的方法。URL 不仅标识资源，还提供了访问资源的具体路径。 举个网站的例子，假设我们要访问一个网站，其 URL 是 https://blog.csdn.net/luduoyuan，这里的 “http://” 表示使用 HTTP 协议访问该资源，“blog.csdn.net” 是域名，“/luduoyuan” 是资源的路径。再举个邮件的例子，发送电子邮件时使用的 URL 形式可能是 mailto:example@example.com，这里的 “mailto:” 表示使用邮件客户端发送电子邮件。 URL 明确指出了资源的位置和访问方式。URL 包含了足够的信息，可以直接访问资源。 URI 和 URL 的区别 URI 和 URL 的区别主要体现在以下几个方面： 范围不同：URI 是一个更广泛的概念，包括了 URL 和 URN（Uniform Resource Name）等。 作用不同：URI 的主要作用是标识资源；URL 则是用于描述资源的位置和访问方法。 格式不同：URL 通常以协议开头（如 “http://” 或 “https://”），后面跟着资源的位置。URI 可能不包含访问协议，而是仅仅作为标识符。 当在浏览器地址栏中输入一个网址时，实际上是在输入一个 URL。例如，输入 https://www.google.com 就是在告诉浏览器访问 Google 的主页。如果需要引用一个资源而不关心它的具体位置或访问方式，那么可能会使用一个 URI。例如，在学术论文中引用一个特定的研究成果时，可能会使用一个 DOI（数字对象唯一标识符）作为 URI。 小结 URI 和 URL 都是用于互联网资源标识的重要概念，但在实际使用中经常被混淆，所以一定要弄明白它们的区别。URI 和 URL 各自有着不同的重点和应用场景，URI 是一个更广泛的概念，包含了 URL，而 URL 是 URI 的一个子集，专门用于资源的定位。理解了它们之间的区别，有助于我们在处理网络资源时更加准确高效。
-
千古第一骈文《滕王阁序》 滕王阁序 - 王勃" url="https://www.lequxiang.com.cn/view.php/2480cb55f25d85034a2d5615bf5d4631.mp3" cover="https://game.gtimg.cn/images/yxzj/zlkdatasys/images/image/20221116/16685612888792.png" theme="#000" lrcType="1" loop="none" autoplay="autoplay" autotheme="1 原文 豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；童子何知，躬逢胜饯。 时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。俨骖騑于上路，访风景于崇阿；临帝子之长洲，得天人之旧馆。层峦耸翠，上出重霄；飞阁流丹，下临无地。鹤汀凫渚，穷岛屿之萦回；桂殿兰宫，即冈峦之体势。 披绣闼，俯雕甍，山原旷其盈视，川泽纡其骇瞩。闾阎扑地，钟鸣鼎食之家；舸舰弥津，青雀黄龙之舳。云销雨霁，彩彻区明。落霞与孤鹜齐飞，秋水共长天一色。渔舟唱晚，响穷彭蠡之滨；雁阵惊寒，声断衡阳之浦。 遥襟甫畅，逸兴遄飞。爽籁发而清风生，纤歌凝而白云遏。睢园绿竹，气凌彭泽之樽；邺水朱华，光照临川之笔。四美具，二难并。穷睇眄于中天，极娱游于暇日。天高地迥，觉宇宙之无穷；兴尽悲来，识盈虚之有数。望长安于日下，目吴会于云间。地势极而南溟深，天柱高而北辰远。关山难越，谁悲失路之人？萍水相逢，尽是他乡之客。怀帝阍而不见，奉宣室以何年？ 嗟乎！时运不齐，命途多舛。冯唐易老，李广难封。屈贾谊于长沙，非无圣主；窜梁鸿于海曲，岂乏明时？所赖君子见机，达人知命。老当益壮，宁移白首之心？穷且益坚，不坠青云之志。酌贪泉而觉爽，处涸辙以犹欢。北海虽赊，扶摇可接；东隅已逝，桑榆非晚。孟尝高洁，空余报国之情；阮籍猖狂，岂效穷途之哭！ 勃，三尺微命，一介书生。无路请缨，等终军之弱冠；有怀投笔，慕宗悫之长风。舍簪笏于百龄，奉晨昏于万里。非谢家之宝树，接孟氏之芳邻。他日趋庭，叨陪鲤对；今兹捧袂，喜托龙门。杨意不逢，抚凌云而自惜；钟期既遇，奏流水以何惭？ 呜乎！胜地不常，盛筵难再；兰亭已矣，梓泽丘墟。临别赠言，幸承恩于伟饯；登高作赋，是所望于群公。敢竭鄙怀，恭疏短引；一言均赋，四韵俱成。请洒潘江，各倾陆海云尔： 滕王高阁临江渚，佩玉鸣鸾罢歌舞。 画栋朝飞南浦云，珠帘暮卷西山雨。 闲云潭影日悠悠，物换星移几度秋。 阁中帝子今何在？槛外长江空自流。 白话文 这里是汉代的豫章郡城，如今是洪州的都督府，天上的方位属于翼，轸两星宿的分野，地上的位置连结着衡山和庐山。以三江为衣襟，以五湖为衣带、控制着楚地，连接着闽越。物类的精华，是上天的珍宝，宝剑的光芒直冲上牛、斗二星的区间。人中有英杰，因大地有灵气，陈蕃专为徐孺设下几榻。雄伟的洪州城，房屋像雾一般罗列，英俊的人才，像繁星一样地活跃。城池座落在夷夏交界的要害之地，主人与宾客，集中了东南地区的英俊之才。都督阎公，享有崇高的名望，远道来到洪州坐镇，宇文州牧，是美德的楷模，赴任途中在此暂留。正逢十日休假的日子，杰出的友人云集，高贵的宾客， 也都不远千里来到这里聚会。高贵的宾客，其文采像腾起的蛟龙、飞舞的彩凤，文坛领袖孟学士，藏有像紫电、青霜一样锋利的宝剑。王将军的武库里，由于父亲在交趾做县令，我在探亲途中经过这个著名的地方。我年幼无知，竟有幸亲身参加了这次盛大的宴会。 时当九月，秋高气爽。积水消尽，潭水清澈，天空凝结着淡淡的云烟，暮霭中山峦呈现一片紫色。在高高的山路上驾着马车，在崇山峻岭中访求风景。来到昔日帝子的长洲，发现了滕王所修的滕王阁。这里山峦重叠，青翠的山峰耸入云霄。凌空的楼阁，红色的阁道犹如飞翔在天空，从阁上看不到地面。白鹤，野鸭停息的小洲，极尽岛屿的纡曲回环之势，雅浩的宫殿，跟起伏的山峦配合有致。 推开雕花的阁门，俯视彩饰的屋脊，山峰平原尽收眼底，湖川曲折令人惊讶。遍地是里巷宅舍，许多钟鸣鼎食的富贵人家。舸舰塞满了渡口，尽是雕上了青雀黄龙花纹的大船。正值雨过天晴，虹消云散，阳光朗煦，落霞与孤雁一起飞翔，秋天的江水和辽阔的天空连成一片，浑然一色。傍晚渔舟中传出的歌声，响彻彭蠡湖滨，雁群感到寒意而发出的惊叫，鸣声到衡阳之浦为止 放眼远望，胸襟刚感到舒畅，超逸的兴致立即兴起，排箫的音响引来的徐徐清风，柔缓的歌声吸引住飘动的白云。像睢园竹林的聚会，这里善饮的人，酒量超过彭泽县令陶渊明，像邺水赞咏莲花，这里诗人的文采，胜过临川内史谢灵运。（音乐与饮食，文章和言语）这四种美好的事物都已经齐备，（贤主、嘉宾）这两个难得的条件也凑合在一起了，向天空中极目远眺，在假日里尽情欢娱。苍天高远，大地寥廓，令人感到宇宙的无穷无尽。欢乐逝去，悲哀袭来，我知道了事物的兴衰成败是有定数的。西望长安，东指吴会，南方的陆地已到尽头，大海深不可测，北方的北斗星多么遥远，天柱高不可攀。关山重重难以越过，有谁同情不得志的人？萍水偶尔相逢，大家都是异乡之客．怀念着君王的宫门，但却不被召见，什么时候才能够去侍奉君王呢？ 呵！各人的时机不同，人生的命运多有不顺。冯唐容易衰老，李广难得封侯。使贾谊遭受委屈，贬于长沙，并不是没有圣明的君主，使梁鸿逃匿到齐鲁海滨，难道不是政治昌明的时代？只不过由于君子能了解时机，通达的人知道自己的命运罢了。年纪虽然老了，但志气应当更加旺盛，怎能在白头时改变心情？境遇虽然困苦，但节操应当更加坚定，决不能抛弃自己的凌云壮志。即使喝了贪泉的水，仍觉着神清气爽，即使身处于干涸的主辙中，也是欢乐无比。北海虽然十分遥远，雅浩的宫殿可以联通；早晨虽然已经过去，而珍惜黄昏却为时不晚。孟尝君心地高洁，但白白地怀抱着报国的热情；阮籍为人放纵不羁，我们怎能学他那种穷途的哭泣！ 我王勃，地位卑微，只是一个书生。却无处去请缨杀敌。虽然和终军一样年已二十一，也有投笔从戎的志向。我羡慕宗悫那种“乘长风破万里浪”的英雄气概，如今我抛弃了一生的功名，到万里之外朝夕侍奉父亲。虽然称不上谢家的“宝树”，但是能和贤德之士相交往。不久我将见到父亲，聆听他的教诲；今天我侥幸地奉陪各位长者，高兴地登上龙门。假如碰不上杨得意那样引荐的人，就只有抚拍着自己的文章而自我叹惜。既然已经遇到了钟子期，就弹奏一曲《流水》又有什么羞愧呢？ 呵！名胜之地不能常存，盛大的宴会难以再逢，兰亭宴集已为陈迹，石崇的梓泽也变成了废墟。让我临别时作了这一篇序文，承蒙这个宴会的恩赐，至于登高作赋，这只有指望在座诸公了。我只是冒昧地尽我微薄的心意，作了短短的引言。在座诸位都按各自分到的韵字赋诗，我已写成了四韵八句。在座诸位施展潘岳，施展陆机一样的才笔，各自谱写瑰丽的诗篇吧： 巍峨高耸的滕王阁俯临着江心的沙洲，想当初佩玉、鸾铃鸣响的豪华歌舞已经停止了。 早晨，画栋飞上了南浦的云，黄昏，珠帘卷入了西山的雨。 悠闲的彩云影子倒映在江水中，整天悠悠然地漂浮着，时光易逝，人事变迁，不知已经度过几个春秋。 昔日游赏于高阁中的滕王如今已不知哪里去了？只有那栏杆外的滔滔江水空自向远方奔流。
-
Web 开发 2025：PHP 依然有一席之地 PHP图片 在 2025 年即将到来之际，许多新晋 Web 开发人员都在思考一个问题：学习 PHP 还有必要吗？ PHP 作为 Web 开发领域的元老，几十年来一直占据着主导地位，其影响力不容小觑。超过 75% 的网站都运行在 WordPress、Drupal 和 Joomla 等平台之上，而这些平台正是由 PHP 驱动的。然而，随着新兴编程语言和框架的涌现，PHP 的未来似乎蒙上了一层阴影，学习它的价值也因此受到质疑。 为了帮助您做出明智的决定，我们将深入探讨在 2025 年学习 PHP 的利弊，并分析其未来发展趋势。 1、PHP 的持续相关性 尽管 Python、JavaScript 和 Ruby 等新兴语言来势汹汹，但 PHP 在 Web 开发领域的地位依然不可撼动。尤其是 WordPress 等巨头平台，凭借 PHP 构建，牢牢占据着内容管理系统（CMS）市场的半壁江山。因此，对于专注于网站、博客或电子商务解决方案开发的开发者来说，掌握 PHP 依然是至关重要的技能。 2、框架和工具 现代 PHP 开发早已摆脱了过去的繁琐，这主要归功于 Laravel 等框架的兴起。Laravel 以其优雅的语法和强大的功能著称，为开发者提供了前所未有的便捷体验。Artisan 命令行工具、Eloquent ORM 和 Blade 模板引擎等更是如虎添翼，极大提升了开发效率。类似的，其他流行框架如 Django 和 Ruby on Rails 也采用了类似的设计理念， 致力于为开发者提供高效愉悦的开发体验。 3、PHP 8.x 和性能提升 PHP 并未故步自封，而是不断发展进化。PHP 8.0 及其后续版本的发布，带来了显著的性能提升和安全增强。其中，全新的 JIT 编译器极大提升了代码执行速度， 使 PHP 在与其他语言的竞争中更具优势。此外，PHP 还积极拥抱其他语言，支持与 Node.js 和 Python 等语言的集成，进一步拓展了其应用领域。 4、繁荣的社区和就业机会 PHP 并未故步自封，而是不断发展进化。PHP 8.0 及其后续版本的发布，带来了显著的性能提升和安全增强。其中，全新的 JIT 编译器极大提升了代码执行速度， 使 PHP 在与其他语言的竞争中更具优势。此外，PHP 还积极拥抱其他语言，支持与 Node.js 和 Python 等语言的集成，进一步拓展了其应用领域。 5、PHP 与新语言 虽然 PHP 宝刀未老，但我们也必须承认，一些新兴语言和框架在某些方面已经走在了前面，尤其是在现代 Web 应用开发领域。 JavaScript (Node.js): Node.js 已然成为全栈开发的热门选择，其最大的优势在于允许开发者使用 JavaScript 同时进行前端和后端开发。随着 React、Vue 等 JavaScript 框架的流行，越来越多的开发者投入 Node.js 的怀抱，享受其带来的流畅开发体验。 Python (Django/Flask): Python 以其简洁易读的语法著称，并且在数据科学和人工智能领域得到了广泛应用。这使得 Python 也成为了 Web 开发领域的热门选择。与 PHP 相比，Django 和 Flask 等 Python 框架提供了更强大的功能和更简洁的语法，对新一代开发者更具吸引力。 Go: Go 语言以其超快的速度和简洁的语法而闻名，在高性能应用和微服务领域越来越受欢迎。 尽管 PHP 依然占据一席之地，但学习 JavaScript 或 Python 等语言可以为你打开更多大门，让你在数据科学、机器学习或移动应用开发等领域大展拳脚。 6、您应该在 2025 年学习 PHP 吗？ 如果你专注于开发基于 CMS 的项目，或者需要维护现有的 PHP 系统，那么学习 PHP 依然是明智之举。 而如果你立志成为全栈开发者，JavaScript 或 Python 或许是更佳选择。 当然，鱼和熊掌也可兼得。精通 PHP 的同时掌握前端开发技能，无疑会让你在求职市场上脱颖而出。更重要的是，借助 Laravel 等现代框架，PHP 开发体验也丝毫不逊色于其他语言。 PHP 将成为 2025 年最受好评的编程语言 PHP 将成为 2025 年最受好评的编程语言图片 这张图表预测了到 2025 年，PHP 与其他主流编程语言（JavaScript、Python、Java 和 Go）在受欢迎程度、就业机会和 Web 开发领域的主导地位。 1、受欢迎程度（%）：该指标反映了开发者对每种语言的使用率和满意度。 JavaScript 以 95% 的高比例遥遥领先，Python 紧随其后，占比 92%。 PHP 依然保持着 80% 的强劲势头，表明其与 Web 开发的密切联系。 Java 和 Go 分别以 75% 和 60% 的比例位居其后。 2、就业机会（%）：该指标预测了市场对掌握每种语言的开发者的需求程度。 PHP 的就业市场份额高达 82%，凸显了其强劲的就业前景，尤其是在 Web 开发和 CMS 平台领域。 JavaScript 和 Python 分别以 90% 和 88% 的比例领先，而 Java 和 Go 也保持稳定，分别占比 80% 和 65%。 3、Web 开发主导地位（%）：该指标衡量每种语言在 Web 开发领域的影响力。 JavaScript 在前端开发领域占据绝对优势，占比高达 95%。 PHP 作为服务器端开发的传统优势依然存在，占比 85%，这意味着它将继续为大量 Web 应用提供支持，尤其是 WordPress 和 Laravel 等平台。 Python (70%) 和 Java (50%) 在 Web 应用开发中也占有一席之地，而 Go (40%) 正在某些细分领域逐渐崭露头角。 总而言之，这份图表强调了 PHP 在 Web 开发领域的重要地位，它依然是需求旺盛的主流语言之一，对于从事 CMS 平台和遗留系统开发的开发者来说更是不可或缺的技能。 结论 展望 2025 年，PHP 在 Web 开发领域依然占据着不可忽视的地位，尤其是在 CMS 开发和遗留系统维护方面。 当然，为了拓宽职业发展道路，或者进军人工智能、数据科学等前沿领域，学习 JavaScript 或 Python 等语言也是非常有益的。 总而言之，PHP 本身在不断发展进步，加之 Laravel 等现代框架的助力，对于有志于成为 Web 开发者的新人来说，PHP 依然是一项值得学习的宝贵技能，尤其是在 Web 开发领域。
-
纯CSS实现任意元素扫光效果的三种方式 介绍一个比较常见的动画效果。 在日常开发中，为了强调凸显某些文本或者元素，会加一些扫光动效，起到吸引眼球的效果，比如文本的 图片 或者是一个卡片容器，里面可能是图片或者文本或者任意元素 图片 除此之外，还有那种不规则的图片，比如奖品图案 图片 这些是如何实现的呢？一起看看吧 一、CSS 扫光的原理 CSS 扫光动画的原理很简单，就是一个普通的、从左到右的、无限循环的位移动画 图片 位移动画可以选择 transform 或者改变 background-position 都行。 至于扫光，我们只需要绘制一条斜向上45deg的线性渐变就可以了，示意如下 图片 用 CSS 实现就是 background: linear-gradient(45deg, rgba(255,255,255,0) 40%, rgba(255, 255, 255, 0.7), rgba(255,255,255,0) 60%);准备工作做好了，下面看 3 种不同场景的实现 二、文本扫光 首先来看文本扫光。 由于扫光在文本内部，所以需要将这个渐变作为文本的颜色。文本渐变色，可以用 backgrond-clip:text 来实现，假设 HTML 是这样的 <h1 class="shark-txt">前端侦探</h1>为了让效果看起来更加明显，我们用一个比较粗的字体 h1{ font-size: 60px; font-family: "RZGFDHDHJ"; font-weight: normal; color: #9747FF; }效果如下 图片 现在我们通过 background-clip 来添加扫光，由于是裁剪背景，所以需要将当前文本颜色设置透明，建议通过 -webkit-text-fill-color: transparent 来设置，这样可以保留文本原有颜色，好处是其他地方，比如 background-color 可以直接使用原有文本颜色 currentColor ，具体实现如下 .shark-txt{ -webkit-text-fill-color: transparent; background: linear-gradient(45deg, rgba(255,255,255,0) 40%, rgba(255, 255, 255, 0.7), rgba(255,255,255,0) 60%) -100%/50% no-repeat currentColor; -webkit-background-clip: text; }效果如下 图片 最后就是让这个扫光动起来了。 由于是在文本内部，所以这里可以通过改变background-position来实现扫光动画了，动画很简单，如下 @keyframes shark-txt { form{ background-position: -100%; } to { background-position: 200%; } }但是这样做没有动画效果，完全不会动。 这是因为背景默认尺寸是 100% ，根据背景偏移百分比的计算规则，当背景尺寸等于容器尺寸时，百分比完全失效，具体规则如下 给定背景图像位置的百分比偏移量是相对于容器的。值 0% 表示背景图像的左（或上）边界与容器的相应左（或上）边界对齐，或者说图像的 0% 标记将位于容器的 0% 标记上。值为 100% 表示背景图像的 右（或 下）边界与容器的 右（或 下）边界对齐，或者说图像的 100% 标记将位于容器的 100% 标记上。因此 50% 的值表示水平或垂直居中背景图像，因为图像的 50% 将位于容器的 50% 标记处。类似的，background-position: 25% 75% 表示图像上的左侧 25% 和顶部 75% 的位置将放置在距容器左侧 25% 和距容器顶部 75% 的容器位置。 https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-position(container width - image width) * (position x%) = (x offset value) (container height - image height) * (position y%) = (y offset value)所以这种情况下，我们可以手动改小一点背景尺寸，比如 50% .shark-txt { -webkit-text-fill-color: transparent; background: linear-gradient(45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 60%) -100% / 50% no-repeat currentColor; -webkit-background-clip: text; animation: shark-txt 2s infinite; }这样就能完美实现文本扫光效果了 图片 三、卡片容器扫光 还有一种比较常见的是容器内的扫光动效，通常是在一个圆角矩形的容器里。 像这种情况下就不能直接用背景渐变了，因为会被容器内的其他元素覆盖。所以我们需要创建一个伪元素，然后通过改变伪元素的位移来实现扫光动画了。 假设有一个容器，容器内有一张图片，HTML 如下 <div class="shark-wrap card"> <img src="https://imgservices-1252317822.image.myqcloud.com/coco/b11272023/ececa9a5.7y0amw.jpg"> </div>简单修饰一下 .card{ width: 300px; border-radius: 8px; background-color: #FFE8A3; } .card img{ display: block; width: 100%; }效果如下 图片 下面通过伪元素来创建一个扫光层，设置位移动画 .shark-wrap::after{ content: ''; position: absolute; inset: -20%; background: linear-gradient(45deg, rgba(255,255,255,0) 40%, rgba(255, 255, 255, 0.7), rgba(255,255,255,0) 60%); animation: shark-wrap 2s infinite; transform: translateX(-100%); } @keyframes shark-wrap { to { transform: translateX(100%); } }效果如下 图片 最后直接超出隐藏就行了 .shark-wrap{ overflow: hidden; }最终效果如下 图片 也适合那种圆形头像 图片 四、不规则图片扫光 其实前面两种情况已经适合大部分场景了，其实还有一种情况，就是那种不规则的图片扫光。这种图片无法直接通过 overflow:hidden 去隐藏多余部分，比如这样 图片 很明显在图片之外的地方也出现了扫光，无法做到扫光在图形的"内部"。 那么，有没有办法根据图片的外形去裁剪呢？当然也是有办法的，这里需要用到 CSS mask 遮罩。 简单来说，就是直接将该图片作为遮罩图片，这样只有形状内的部分可见，形状外的直接被裁剪了 图片 在上一种场景的情况下，只需要在此基础之上，添加一个完全相同的 mask 遮罩就行了 <div class="shark-wrap" style="-webkit-mask: url(https://imgservices-1252317822.image.myqcloud.com/coco/s09252023/3af9e8de.00uqxe.png) 0 0/100%"> <img class="logo" src="https://imgservices-1252317822.image.myqcloud.com/coco/s09252023/3af9e8de.00uqxe.png"> </div>这样就可以把扫光多余的部分裁剪掉了 图片 换张图也能很好适配 图片 五、总结一下 以上就本文的全部内容了，共介绍了3种不同的扫光场景，你学到了吗？下面总结一下重点 扫光样式本身可以直接用线性渐变绘制而成 扫光动画原理很简单，就是一个水平的位移动画 文本扫光动画需要通过改变 background-postion 实现 当背景尺寸等于容器尺寸时，设置 background-postion 百分比无效 普通容器的扫光效果需要借助伪元素实现，因为如果使用背景会被容器内的元素覆盖 普通容器的扫光动画可以直接用 transfrom 实现 使用 overflow:hidden 裁剪容器外的部分 不规则图片的扫光效果无法直接根据形状裁剪 借助 CSS mask 可以根据图片本身裁剪掉扫光多余部分 对了，这个属于常规需求，只是普通的动画效果，没有兼容性限制，放心使用，除了本文的样式，还可以根据需求改变扫光的大小，角度，颜色等，这个就看具体需求了。 六、完整案例 CSS shark animation (codepen.io)：https://codepen.io/xboxyan/pen/KKLLZOE CSS shark animation (juejin.cn)：https://code.juejin.cn/pen/7385810378132815882
