不管在什么时候，我们都不应该忽视对家人的关爱与陪伴。其次，我最近在闲暇时偶然看到一个视频，让我对传统的新闻联播节目有了新的认识和理解。这不仅拓宽了我的视野，也提醒我即使在繁忙中也要保持对周围世界的好奇心。最后，我想和大家分享一个小技巧，它可以帮助我们在不依赖任何第三方API的情况下，为自己的博客添加一个有趣的“随机一言”功能。这个小功能不仅能为读者带来惊喜，也能增加博客的互动性和趣味性。通过几句简单的代码，就可以轻松实现这一功能，让我们的博客更加生动和吸引人。忙碌依旧、陪伴依旧从这个月的月初开始，我们公司就陷入了无尽的忙碌之中。每天除了忙，还是忙。而我的工作呢，同样也是忙着整理资料，忙着补资料，忙着加班加点。毫不夸张地说，这个月以来，我几乎没有好好休息过一天了。原本心情也是挺无奈，挺崩溃的。好在这段时间天气一直都挺不错，不下雨，太阳也挺不错。忙归忙，但如果每天把每件事都做得规规整整的、有条理了，似乎也感觉不那么忙了(这只是对于我个人而言哈)。也许这就是我的工作常态吧。人总是纠结的，不是想着天气好怎么出去玩，就是想着怎么在办公室里偷懒。但话说回来，天气好不好与我有什么关系呢？我一直坐在办公室里，外面的风景看不到，外面的太阳感受不到，外面的新鲜空气呼吸不到，再好的天气对我来说似乎也没什么用。总归一句话，好好工作，努力工作，完成自己手上的每一件工作任务。至于其他时间嘛，摸鱼，划水…… 哈哈，前提是把该做的工作做好。昨天媳妇儿给我说，天气真好……我给媳妇儿说，要不我请个假，带你和孩子们出去感受一下这个冬天的太阳。媳妇儿直接回了句“算了吧”…… 其实我也知道媳妇儿这是在体谅我的工作，知道我在公司抽不开身。这件事也只好作罢。看了看天气预报，过了明天，也就是周五，天气也要开始出现断崖式的下降了。冬天真的要来了。虽然这半个月的忙碌让我错过了不少好天气，但至少我知道，我努力工作不仅仅是为了我个人，而是为了这个小家。（工作虽忙，但每天下班回家后，我也会尽可能的抽出更多时间陪陪媳妇儿，陪陪孩子们。）新闻联播里的大学问新闻联播，对我来说，最初感觉就像是每天重复播放的单调旋律一样无聊。我曾以为，只有那些年龄大一些的长者们、或者是那些时事新闻的忠实追随者、又或是那些政客们才会对它情有独钟。当然了，除非有特别吸引我的新闻，我才会去留意一下。然而，最近我看到了一段视频，大概意思就是教我们如何去看懂新闻，如何从中提取有价值的信息，如何真正读懂新闻联播。在这儿，分享给大家！比如关于各国领导人来华访问的新闻，这意味着可能达成了一些协议，很多外贸机会就从这里产生：如果新闻里说双方进行了亲切友好的交谈，那表示合作的可能性非常大；如果是坦率的交谈，那就说明分歧很大，没法沟通；如果是交换了意见，那就是各说各的，没达成什么协议；如果是深度交换了意见，那就是吵得很厉害，没能达成协议；如果是增进双方了解，那也是分歧很大；如果说的是会谈是不易的，说明双方的目标虽然差距大，但能坐下来聊聊也不容易。领导人去哪里出差也是个很重要的信息：如果你是做金融投资的，当领导去上市公司参观时，第二天你就可以关注这家公司的股票了；如果领导参加某个展会，那这个行业的股票就要留意了；如果领导在某个地方开会，并播出了会议部分内容，那这个地方可能会有变更。每年国家或者地方发布的几号文件也很关键，这可能代表着某个领域的政策支持。比如，1号文件如果说大力发展高新科技、农业、新能源，那么赶紧投资这些行业，坐等政策扶持就好了。跟着领导出差的团队也要注意，这些团队成员通常会随行签一些订单，一般这些企业家在当前是比较安全的，所以这些企业还是值得相信和关注的。如果一个企业做大做强了，就不仅仅是经商这么简单了。(这样的例子有很多，比如这次M国总统大选中，支持特朗普的马斯克。在特朗普大选获胜以后，就被提任为M国“效率部”的高管……）地方领导的调动也很重要，经济发达地区的领导调到经济落后地区，那么后者城市的机会就来了。比如北京的领导调到贵州，那贵州的房价和电商、物流相关的行业就值得关注了。反之，如果经济落后的领导跌到经济发达地区，那么这个地方关注度可能会降低，因为会相对保守和稳定。如果你喜欢买房卖房这类新闻的，特别需要留意。新闻里有些事情，我们不能只看表面。比如，有时候一些有影响力的坏人会出来道歉，这可能是为了让大家平静下来，也可能是为了警告其他人别走他们的老路。就像那些搞电信诈骗的，被抓了之后公开道歉，其实是在告诉其他人别干这行。另外，新闻里有些消息，我们得反过来想想。比如，如果新闻说国家开始控制外汇，或者外汇储备减少了，我们就得想想，是不是有人在大量换钱，他们为什么要这么做。还有，如果哪个老板在新闻里说自己的员工不行，我们也别急着相信，可能背后有其他故事。写在最后新闻联播不只是新闻，它其实更像一个藏宝图。就比如领导人的会谈、出差、政策文件，甚至是地方领导的调动，都能给我们透露出赚钱的机会。所以，下次别一看到新闻联播，就直接换台或者…… (哈哈，当然了，我自己也喜欢刷短视频，也不喜欢看新闻联播，但学点知识始终还是不错的！)实现"随机一言"功能，无需第三方Api给自己的博客或者网站添加一个“随机一言”的功能，不但可以增加网站趣味性、提高用户留存率、传达正能量，同时还能凸显个性的品牌形象。我发现普遍的"随机一言"功能一般都是调用的第三方api。其实，只需要通过短短的几行代码就可以实现该功能！具体操作方法11.新建文件首先准备一个代码编辑器，然后新建一个 php 文件，命名为 api.php；再新建一个文件，命名为 jcyulu.dat 。注意：两个文件均需采用 UTF-8 编码，否则会乱码。然后打开 jcyulu.dat，在里面贴入要随机显示出来的文本，一行一条（可以去百度搜、也可以自己写）。2.复制代码<?php // 存储数据的文件 $filename = 'jcyulu.dat'; // 指定页面编码 header('Content-type: text/html; charset=utf-8'); if(!file_exists($filename)) { die($filename . ' 数据文件不存在'); } $data = array(); // 打开文档 $fh = fopen($filename, 'r'); // 逐行读取并存入数组中 while (!feof($fh)) { $data[] = fgets($fh); } // 关闭文档 fclose($fh); // 随机获取一行索引 $result = $data[array_rand($data)]; echo $result;将上面的代码复制并粘贴到 api.php 中保存，你的专属“一言” API 就搭建完成了！超简单是不是！方法2上面的代码是用 fopen + fgets 函数实现的，有些朋友似乎不是特别喜欢，觉得“效率低”。别急，这儿还有个 file_get_contents 函数实现的版本：<?php // 存储数据的文件 $filename = 'jcyulu.dat'; // 指定页面编码 header('Content-type: text/html; charset=utf-8'); if(!file_exists($filename)) { die($filename . ' 数据文件不存在'); } // 读取整个数据文件 $data = file_get_contents($filename); // 按换行符分割成数组 $data = explode(PHP_EOL, $data); // 随机获取一行索引 $result = $data[array_rand($data)]; // 去除多余的换行符（保险起见） $result = str_replace(array("\r","\n","\r\n"), '', $result); echo $result;注意：方法1和方法2除了代码部分不一样，其他操作流程是一样的。
在 HTML 前端开发中，色彩搭配很重要。但弄出好的配色不容易。之前在逛小彦的博客时发现了这个配色表，样式还算齐全，有各种组合，新手老手都能用(主要是我刚好用到😂)。今天把他分享给大家一起食用。效果展示源码 配色表 刘郎阁 鸨色 #f7acbc 赤白橡 #deab8a 油色 #817936 绀桔梗 #444693 踯躅色 #ef5b9c 肌色 #fedcbd 伽罗色 #7f7522 花色 #2b4490 桜色 #feeeed 橙色 #f47920 青丹 #80752c 瑠璃色 #2a5caa 蔷薇色 #f05b72 灰茶 #905a3d 莺色 #87843b 琉璃绀 #224b8f 韩红 #f15b6c 茶色 #8f4b2e 利久色 #726930 绀色 #003a6c 珊瑚色 #f8aba6 桦茶色 #87481f 媚茶 #454926 青蓝 #102b6a 红梅色 #f69c9f 枯茶 #5f3c23 蓝海松茶 #2e3a1f 杜若色 #426ab3 桃色 #f58f98 焦茶 #6b473c 青钝 #4d4f36 胜色 #46485f 薄柿 #ca8687 柑子色 #faa755 抹茶色 #b7ba6b 群青色 #4e72b8 薄红梅 #f391a9 杏色 #fab27b 黄緑 #b2d235 铁绀 #181d4b 曙色 #bd6758 蜜柑色 #f58220 苔色 #5c7a29 蓝铁 #1a2933 红色 #d71345 褐色 #843900 若草色 #bed742 青褐 #121a2a 赤丹 #d64f44 路考茶 #905d1d 若緑 #7fb80e 褐返 #0c212b 红赤 #d93a49 饴色 #8a5d19 萌黄 #a3cf62 藤纳戸 #6a6da9 臙脂色 #b3424a 丁子色 #8c531b 苗色 #769149 桔梗色 #585eaa 真赭 #c76968 丁子茶 #826858 草色 #6d8346 绀蓝 #494e8f 今様色 #bb505d 黄栌 #64492b 柳色 #78a355 藤色 #afb4db 梅染 #987165 土器色 #ae6642 若草色 #abc88b 藤紫 #9b95c9 退红色 #ac6767 黄枯茶 #56452d 松叶色 #74905d 青紫 #6950a1 苏芳 #973c3f 狐色 #96582a 白緑 #cde6c7 菫色 #6f60aa 茜色 #b22c46 黄橡 #705628 薄緑 #1d953f 鸠羽色 #867892 红 #a7324a 银煤竹 #4a3113 千草色 #77ac98 薄色 #918597 银朱 #aa363d 涅色 #412f1f 青緑 #007d65 薄鼠 #6f6d85 赤 #ed1941 胡桃色 #845538 浅緑 #84bf96 鸠羽鼠 #594c6d 朱色 #f26522 香色 #8e7437 緑 #45b97c 菖蒲色 #694d9f 洗朱 #d2553d 国防色 #69541b 草色 #225a1f 江戸紫 #6f599c 红桦色 #b4534b 练色 #d5c59f 木贼色 #367459 紫 #8552a1 红绯 #ef4136 肉色 #cd9a5b 常盘色 #007947 灭紫 #543044 桦色 #c63c26 人色 #cd9a5b 緑青色 #40835e 葡萄鼠 #63434f 铅丹色 #f3715c 土色 #b36d41 千歳緑 #2b6447 古代紫 #7d5886 赭 #a7573b 小麦色 #df9464 深緑 #005831 暗红 #401c44 绯色 #aa2116 琥珀色 #b76f40 萌葱色 #006c54 葡萄 #472d56 丹 #b64533 木兰色 #ad8b3d 青白橡 #375830 茄子绀 #45224a 土 #b54334 栀子色 #dea32c 革色 #274d3d 紫绀 #411445 焦香 #853f04 朽叶 #d1923f 麹尘 #375830 浓色 #4b2f3d 真红 #840228 萱草色 #c88400 仙斎茶 #27342b 二蓝 #402e4c 绯 #7a1723 黄金 #c37e00 若竹色 #65c294 菖蒲色 #c77eb5 红海老茶 #a03939 金色 #c37e00 青磁色 #73b9a2 牡丹色 #ea66a6 浅苏芳 #8a2e3b 金茶 #e0861a 青竹色 #72baa7 赤紫 #f173ac 鸢色 #8e453f 卵色 #ffce7b 铁色 #005344 白 #fffffb 小豆色 #8f4b4a 山吹色 #fcaf17 锖鼠 #122e29 胡粉色 #fffef9 弁柄色 #892f1b 黄土色 #ba8448 铁御纳戸 #293047 生成色 #f6f5ec 栗梅 #6b2c25 朽叶色 #896a45 青緑 #00ae9d 灰白 #d9d6c3 海老茶 #733a31 空五倍子色 #76624c 锖浅葱 #508a88 石竹色 #d1c7b7 深绯 #54211d 莺茶 #6d5826 水浅葱 #70a19f 象牙色 #f2eada 赤铜色 #78331e 向日葵色 #ffc20e 新桥色 #50b7c1 乳白色 #d3d7d4 赤褐色 #53261f 郁金色 #fdb933 浅葱色 #00a6ac 薄钝 #999d9c 金赤 #f15a22 砂色 #d3c6a6 白群 #78cdd1 银鼠 #a1a3a6 赤茶 #b4533c 芥子色 #c7a252 御纳戸色 #008792 茶鼠 #9d9087 赤锖色 #84331f 淡黄 #dec674 瓮覗 #94d6da 鼠色 #8a8c8e 黄丹 #f47a55 亜麻色 #b69968 水色 #afdfe4 薄墨色 #74787c 赤橙 #f15a22 枯色 #c1a173 蓝鼠 #5e7c85 利休鼠 #7c8577 柿色 #f3704b 鸟子色 #dbce8f 秘色 #76becc 铅色 #72777b 肉桂色 #da765b 黄色 #ffd400 空色 #90d7ec 灰色 #77787b 桦色 #c85d44 蒲公英色 #ffd400 青 #009ad6 钝色 #4f5555 炼瓦色 #ae5039 中黄 #ffe600 蓝色 #145b7d 煤竹色 #6c4c49 锖色 #6a3427 刈安色 #f0dc70 浓蓝 #11264f 黒茶 #563624 桧皮色 #8f4b38 黄檗色 #fcf16e 勿忘草色 #7bbfea 黒橡 #3e4145 栗色 #8e3e1f 緑黄色 #decb00 露草色 #33a3dc 浓鼠 #3c3645 黄赤 #f36c21 鶸色 #cbc547 缥色 #228fbd 墨 #464547 代赭 #b4532a 海松色 #6e6b41 浅缥 #2468a2 黒 #130c0e 骆驼色 #b7704f 鶸茶 #596032 薄缥 #2570a1 黒铁 #281f1d 黄茶 #de773f 山鸠色 #525f42 薄花色 #2585a6 蝋色 #2f271d 洗柿 #c99979 生壁色 #5f5d46 绀青 #1b315e 紫黒 #1d1626 根据自己的需求加入自己网站对应位置即可。补充除了以上的方法外，我们还可以具体到按色相的搭配来分类和按印象的搭配来分类：此方法来自KEVIN'S KEVIN'S效果展示立即前往完！
验证码的重要性不言而喻，腾讯云 T-Sec 天御滑块验证码有其独特之处。其一，可准确验证用户身份，区分人类与自动化程序；其二，能有力增强安全性，阻挡恶意攻击与批量注册等行为；其三，给予相对便捷的验证途径，滑动即可完成；其四，具备一定趣味性，提升用户体验并减少抵触。可腾讯云验证码官方收费着实有些高昂，对于我们这些资金有限（穷鬼）的人来说，那价格实在是让人望而却步，只能无奈地望其兴叹，仅仅是看看罢了。好在今天看到一个不错的替代方法，功能和样式大同小异而且还免费。在这里分享给大家！效果展示具体操作1.新建前端框架新建一个 index.html 文件，将以下 HTML 代码添加到其中： 滑动验证码 刘郎阁 验证 2.后端处理新建一个 api.php 文件，将以下 php 代码添加到其中：<?php @header('Content-Type: text/html; charset=UTF-8'); $ticket = $_POST['ticket']; $randstr = $_POST['randstr']; if(!$ticket || !$randstr) exit('参数不能为空'); $result = check_ticket($ticket, $randstr); if($result === 1){ exit('验证通过'); }elseif($result === -1){ exit('接口已失效'); }elseif($result === 0){ exit('验证不通过'); } function check_ticket($ticket, $randstr) { $url = 'https://cgi.urlsec.qq.com/index.php?m=check&a=gw_check&callback=url_query&url=https%3A%2F%2Fwww.qq.com%2F'.rand(111111,999999).'&ticket='.urlencode($ticket).'&randstr='.urlencode($randstr); $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false); $httpheader[] = "Accept: application/json"; $httpheader[] = "Accept-Language: zh-CN,zh;q=0.8"; $httpheader[] = "Connection: close"; curl_setopt($ch, CURLOPT_HTTPHEADER, $httpheader); curl_setopt($ch, CURLOPT_REFERER, 'https://urlsec.qq.com/check.html'); curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36'); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); $ret = curl_exec($ch); curl_close($ch); $arr = jsonp_decode($ret, true); if(isset($arr['reCode']) && $arr['reCode'] == 0){ //验证通过 return 1; }elseif($arr['reCode'] == -109){ //验证码错误 return 0; }else{ //接口已失效 return -1; } } function jsonp_decode($jsonp, $assoc = false) { $jsonp = trim($jsonp); if(isset($jsonp[0]) && $jsonp[0] !== '[' && $jsonp[0] !== '{') { $begin = strpos($jsonp, '('); if(false !== $begin) { $end = strrpos($jsonp, ')'); if(false !== $end) { $jsonp = substr($jsonp, $begin + 1, $end - $begin - 1); } } } return json_decode($jsonp, $assoc); }使用方法1.将以上两个新建好的文件放在同一个目录一下，上传到服务器(你需要使用的位置，如：评论验证、登录验证都可以)。2.使用时根据自己的实际情况，对验证码返回的验证状态做判断，然后再跳转即可！相关文章推荐：Typecho评论区超简单的验证方法完！
给大家分享一个简单的纯CSS毛玻璃特效，用毛玻璃背景以其独特的美学效果备受追捧。这种背景不仅赋予网站一种柔和、朦胧的感觉，还能提升用户的视觉体验。 [...]
网页设计早已不再仅仅是功能的堆砌，更是吸引用户眼球的艺术。今天给大家分享一个别开生面的点击特效：点击网页显示文字。一段简单的代码就可以在网页上实现该效果，为你的网站增添独特魅力。 [...]
继续给大家分享一个提高网站安全性的小技巧，包括复制提醒、禁用右键菜单和快捷键等功能。这种弹窗设计简洁、色彩搭配合适(也可自定义)，既能提醒用户，又不会打扰浏览体验。分享此方法的目的是为了让更多的友友能够使用到。当然也包括自己，也许以后自己琢磨（可能也会用到）。所以，避免源资源失效或者其他某些原因… 照葫芦画瓢，它来了！具体操作1.全局引入在网站目录中引入以下代码： 2.后面的代码均在全局引用 JS 的文件中添加。代码实现1.复制提醒/* 复制提醒 */ document.addEventListener("copy",function(e){ new Vue({ data:function(){ this.$notify({ title:"嘿！复制成功", message:"若要转载请务必保留原文链接！爱你呦~", position: 'bottom-right', offset: 50, showClose: false, type:"success" }); return{visible:false} } }) })2.禁用右键菜单并提醒/* 禁用右键菜单并提醒 */ document.oncontextmenu = function () { new Vue({ data:function(){ this.$notify({ title:"嘿！没有右键菜单", message:"复制请用键盘快捷键", position: 'bottom-right', offset: 50, showClose: false, type:"warning" }); return{visible:false} } }) return false; }3.禁用F12按键并提醒/* 禁用F12按键并提醒 */ document.onkeydown = function () { if (window.event && window.event.keyCode == 123) { event.keyCode = 0; event.returnValue = false; new Vue({ data:function(){ this.$notify({ title:"嘿！别瞎按", message:"坏孩子！", position: 'bottom-right', offset: 50, showClose: false, type:"error" }); return{visible:false} } }) return false; } };4.禁用左键选择//禁用复制 document.oncopy = function () { return false; }5.禁用Ctrl+Shift+I//禁用Ctrl+Shift+I if ((event.ctrlKey) && (event.shiftKey) && (event.keyCode == 73)) { return false; }此方法来自六月是只猫。完！
今天给大家分享一个简单的小技巧，如何使用JavaScript实现图片预览功能(无需多余的加载，秒开)。通过简单的代码，可以轻松地在网页上预览图片，为用户提供更好的视觉体验。 [...]
喜欢看网页上那些酷炫的效果吗？这就是CSS的功劳！我整理了一些很棒的CSS特效，让网页看起来更有趣、更生动。这些特效有的简单，有的复杂，但都用的是简单易懂的代码。比如，颜色会慢慢变化的背景，会动的小图标，还有跟着你的鼠标动来动去的效果。这篇文章里，我会和大家分享并展示这些让人看了还想看的CSS特效。接上次分享的不错的CSS特效1，今天再给大家分享一些不错的css特效！索引1.列表文字图标2.动态圆点水波纹3.呼吸灯效果4.简约动态按钮5.输入框选中交互动效6.Loading动画7.聚光灯效果8.文字上下浮动效果9.汉堡菜单按钮10.抖动的按钮11.简约动态输入框12.搜索框动态特效13.新拟态输入框14.多彩动态按钮15.创意菜单鼠标悬停效果16.边框流动特效17.限制显示两行，超出显示...18.星空19.圆弧转动20.流星雨1.列表文字图标 第一个字符串生成文字图标_刘郎阁 欢迎来到刘郎阁！欢迎来到刘郎阁！ 刘郎阁认真分享好东西！刘郎阁认真分享好东西！ 好东西一定要第一时间分享！好东西一定要第一时间分享！ 2.动态圆点水波纹 圆点水波纹效果_刘郎阁 3.呼吸灯效果 呼吸灯效果_刘郎阁 4.简约动态按钮 简约动态按钮_刘郎阁 刘郎阁 5.输入框选中交互动效 输入框选中交互动效_刘郎阁 用户名 6.Loading动画 Loading效果_刘郎阁 7.聚光灯效果 聚光灯效果_刘郎阁 刘郎阁 YJVC.CN 8.文字上下浮动效果 文字上下浮动效果_刘郎阁 刘 郎 阁 欢 迎 您 9.汉堡菜单按钮 汉堡菜单按钮_刘郎阁 10.抖动的按钮 抖动的按钮_刘郎阁 动起来 11.简约动态输入框 简约动态输入框_刘郎阁 12.搜索框动态特效 搜索框动态特效_刘郎阁 13.新拟态输入框 新拟态输入框_刘郎阁 14.多彩动态按钮 多彩动态按钮_刘郎阁 戳一下 15.创意菜单鼠标悬停效果HTML代码： Home About Services Teams Contact CSS代码：*,a{ margin: 0; padding: 0; box-sizing: border-box; font-family: Helvetica, sans-serif; text-decoration: none; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #252839; } ul,li{ margin: 0; list-style: none; } ul{ position: relative; display: flex; flex-direction: column; gap: 30px; } ul li a{ font-size: 4em; position: relative; letter-spacing: 2px; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.5); } ul li a::before{ content: attr(data-text); position: absolute; color: var(--clr); overflow: hidden; width: 0%; transition: all ease-in-out .3s; border-right: 8px solid var(--clr); -webkit-text-stroke: 1px var(--clr); } ul li a:hover::before{ width: 100%; filter: drop-shadow(0px 0px 15px var(--clr)); }16.边框流动特效 刘郎 17.限制显示两行，超出显示...display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;18.星空 星空 刘郎阁 19.圆弧转动 圆弧转动 刘郎阁 20.流星雨 漫天流星雨 刘郎阁 以上方法（部分）来自满心记，总而言之，当我发现有什么好的资源，肯定会第一时间与大家一起分享。如果喜欢或者是对你有用的，那就拿去食用吧！完！
喜欢看网页上那些酷炫的效果吗？这就是CSS的功劳！我整理了一些很棒的CSS特效，让网页看起来更有趣、更生动。这些特效有的简单，有的复杂，但都用的是简单易懂的代码。比如，颜色会慢慢变化的背景，会动的小图标，还有跟着你的鼠标动来动去的效果。这篇文章里，我会和大家分享并展示这些让人看了还想看的CSS特效。快来一起看看吧！相关文章推荐：不错的CSS特效2索引1.动态波纹字2.静态格栅字3.旋转的金币4.霓虹灯文字5.故障字体效果6.乱码效果7.输入框交互效果8.圆点交互按钮9.文字上下滑动按钮10.音频特效11.文字跳动的输入框12.暗黑模式切换开关13.呼吸灯按钮14.新拟态按钮15.网站底部徽章样式16.网站LED灯公告17.HTML滚动播报18.七彩圆环19.科幻4041.动态波纹字 动态的波纹字_刘郎阁 刘郎阁 欢迎您！ 2.静态格栅字 静态格栅字_刘郎阁 刘郎阁 欢迎您 3.旋转的金币 旋转的金币_刘郎阁 ¥ 4.霓虹灯文字 闪烁的霓虹灯文字_刘郎阁 刘 郎 阁 Welcome to vjo.cc 5.故障字体效果 故障字体效果_刘郎阁 404 6.乱码效果 乱码效果_刘郎阁 YJVC.CN 7.输入框交互效果 输入框交互_刘郎阁 用户名 8.圆点交互按钮 圆点交互按钮_刘郎阁 查看详情 9.文字上下滑动按钮 文字上下滑动按钮_刘郎阁 探 索 未 知 10.音频特效 音频特效_刘郎阁 11.文字跳动的输入框 提示文字跳起来的输入框_刘郎阁 用 户 名 12.暗黑模式切换开关 暗黑模式切换开关_刘郎阁 13.呼吸灯按钮 呼吸灯按钮_刘郎阁 按住说话 14.新拟态按钮 新拟态按钮_刘郎阁 FUN 15.网站底部徽章样式 网站底部徽章样式_刘郎阁 名称 vjo.cc 名称 vjo.cc 黔ICP备 666666号-1 网站运行 16.网站LED灯公告效果预览 网站LED灯公告_刘郎阁 <marquee scrollamount="3" scrolldelay="1" direction="left"> 公告：刘郎阁 YJVC.CN 欢迎大家光临寒舍！ </marquee> 17.HTML滚动播报 HTML滚动播报 刘郎阁 欢迎来到刘郎阁！ 源代码中寻快乐， 实用好玩花样多。 新鲜资源眼前过， 技术分享共切磋。 奇思妙想灵感落， 知识宝库用心掘。 刘郎阁里收获多！ 18.七彩圆环 七彩圆环 刘郎阁 19.科幻404 科幻404-刘郎阁 <path fill="#34496a" d="M0 0v600h800V0zm405.6 458.4C217 458.4 64.1 360.6 64.1 240S217 21.5 405.6 21.5 747.3 119.3 747.3 240s-153 218.4-341.6 218.4z" /> <defs /> <defs> <clipPath id="clip-path"> <rect id="graph-line-mask" width="105.2" height="66.7" x="439.5" y="186.6" fill="none" /> </clipPath> <clipPath id="clip-path-2"> <path id="body-mask" fill="none" d="M490.4 368.3c0 63.7-38 140-84.7 140s-84.8-76.3-84.8-140 38-90.6 84.8-90.6 84.7 26.9 84.7 90.6z" /> </clipPath> </defs> <g id="Ship"> <g id="mid-display"> <rect width="320.3" height="207" x="248.8" y="116.3" fill="#282e39" stroke="#0ff" stroke-miterlimit="10" stroke-width="5" opacity=".8" rx="18.4" /> <g id="graph-btm"> <path id="graph-left" fill="#0ff" d="M439.7 292.1s4.5-19.4 8.7-19c3.6.3 4.6 9.2 7.3 9 3.4-.2 4-14 7.3-14.3 3-.2 4.7 10 8.3 10 4 0 5.1-12.6 8.8-12.8 4.1-.2 7.2 27.1 7.2 27.1z" /> <path id="graph-morph1" fill="none" d="M439.7 292.1s2.2-10.8 6.5-10.4c3.5.3 8.3-18.9 11-19 3.4-.3 5.6 9 9 8.7 3-.3 3.5-3.2 7-3.2 4 0 5.9 10.6 9.5 10.4 4.2-.2 4.7 13.5 4.7 13.5z" /> <path id="graph-right" fill="#34496a" d="M502.6 292.1s4.5-19.4 8.8-19c3.5.3 4.6 9.2 7.3 9 3.4-.2 3.9-14 7.3-14.3 3-.2 4.7 10 8.3 10 4 0 5-12.6 8.7-12.8 4.2-.2 7.3 27.1 7.3 27.1z" /> <path id="graph-morph2" fill="none" d="M502.6 292.1s4.5-9.8 8.8-9.4c3.5.3 4.6-6.8 7.3-7 3.4-.2 3.9 6.6 7.3 6.4 3-.3 4.7-17.9 8.3-17.9 4 0 5 16.5 8.7 16.3 4.2-.2 7.3 11.6 7.3 11.6z" /> </g> <g id="planet"> <circle id="planet-base" cx="332.2" cy="207.8" r="37.3" fill="#34496a" /> <ellipse id="planet-circle" cx="331.5" cy="207.8" fill="none" stroke="#0ff" stroke-miterlimit="10" stroke-width="5" rx="61.8" ry="12.7" /> <path id="planet-top" fill="#34496a" d="M294.9 207.8a37.3 37.3 0 0174.6 0z" /> </g> <g class="graph-circle-lb" id="graph-cir-left"> <circle cx="290.4" cy="287.5" r="20.8" fill="#34496a" /> <path fill="#0ff" d="M290.4 287.5l5.3-20.1a20.8 20.8 0 0115.5 20z" /> </g> <g class="graph-circle-lb" id="graph-cir-mid"> <circle cx="345.4" cy="287.5" r="20.8" fill="#34496a" /> <path fill="#0ff" d="M345.4 287.5l5.2-20.1a20.8 20.8 0 0115.5 20z" /> </g> <g id="graph-cir"> <circle cx="396.4" cy="292.1" r="16.4" fill="none" stroke="#34496a" stroke-miterlimit="10" stroke-width="2" /> <circle cx="396.4" cy="292.1" r="20.8" fill="none" stroke="#34496a" stroke-miterlimit="10" stroke-width="2" /> <circle cx="396.4" cy="292.1" r="11.6" fill="none" stroke="#34496a" stroke-miterlimit="10" stroke-width="2" /> <circle id="graph-cir-1" cx="408" cy="292.1" r="2.3" fill="#0ff" /> <circle id="graph-cir-2" cx="396.4" cy="275.7" r="2.3" fill="#0ff" /> <circle id="graph-cir-3" cx="417.2" cy="292.1" r="2.3" fill="#0ff" /> <circle id="graph-cir-mid-2" cx="396.4" cy="292.1" r="2.3" fill="#0ff" data-name="graph-cir-mid" /> </g> <g id="graph-big" clip-path="url(#clip-path)"> <path id="graph-line" fill="none" stroke="#0ff" stroke-miterlimit="10" stroke-width="5" d="M439.7 206.4c26.3 0 26.3 34.2 52.6 34.2s26.3-34.2 52.6-34.2 26.3 34.2 52.6 34.2 26.3-34.2 52.6-34.2" /> </g> <circle cx="275.7" cy="139.7" r="11.8" fill="#34496a" /> <circle id="left-top-circle" cx="275.7" cy="139.7" r="11.8" fill="#0ff" /> <line x1="300.8" x2="387.1" y1="134.3" y2="134.9" fill="none" stroke="#34496a" stroke-linecap="round" stroke-miterlimit="10" stroke-width="5" /> <line x1="300.8" x2="338.5" y1="143.7" y2="143.9" fill="none" stroke="#34496a" stroke-linecap="round" stroke-miterlimit="10" stroke-width="5" /> <circle cx="448.1" cy="161.4" r="13.3" fill="none" stroke="#34496a" stroke-miterlimit="10" stroke-width="5" /> <path class="circles-top" id="circle-l" fill="none" stroke="#0ff" stroke-miterlimit="10" stroke-width="5" d="M448 148.2a13.3 13.3 0 11-13.2 13.3 13.3 13.3 0 0113.3-13.3" /> <circle cx="491.2" cy="161.4" r="13.3" fill="none" stroke="#34496a" stroke-miterlimit="10" stroke-width="5" /> <path class="circles-top" id="circle-m" fill="none" stroke="#0ff" stroke-miterlimit="10" stroke-width="5" d="M491.2 148.2a13.3 13.3 0 11-13.3 13.3 13.3 13.3 0 0113.3-13.3" /> <circle cx="534.4" cy="161.4" r="13.3" fill="none" stroke="#34496a" stroke-miterlimit="10" stroke-width="5" /> <path class="circles-top" id="circle-r" fill="none" stroke="#0ff" stroke-miterlimit="10" stroke-width="5" d="M534.4 148.2a13.3 13.3 0 11-13.3 13.3 13.3 13.3 0 0113.3-13.3" /> </g> <g id="btm-display"> <g id="right-display"> <g id="right-display-display"> <path fill="#282e39" stroke="#0ff" stroke-miterlimit="10" stroke-width="5" d="M654.7 461H508.6c-10.5 0-15.8-8.5-12-19l26.2-72a29.9 29.9 0 0125.8-18.9h146c10.5 0 15.8 8.5 12 19l-26.2 72a29.9 29.9 0 01-25.7 18.8z" opacity=".8" /> <g id="bars"> <polygon id="bar-3-btm" fill="#34496a" points="656.9 441.2 642.4 441.2 667.6 371.7 682.2 371.7 656.9 441.2" /> <polygon id="bar-3-top" fill="#0ff" points="656.9 441.2 642.4 441.2 653 412 667.5 412 656.9 441.2" /> <polygon id="bar-2-btm" fill="#34496a" points="633.7 441.2 619.2 441.2 644.5 371.7 659 371.7 633.7 441.2" /> <polygon id="bar-2-top" fill="#0ff" points="633.7 441.2 619.2 441.2 636 395.1 650.5 395.1 633.7 441.2" /> <polygon id="bar-1-btm" fill="#34496a" points="610.6 441.2 596.1 441.2 621.4 371.7 635.9 371.7 610.6 441.2" /> <polygon id="bar-1-top" fill="#0ff" points="610.6 441.2 596.1 441.2 604 419.5 618.5 419.5 610.6 441.2" /> </g> <g id="btns" fill="#0ff"> <ellipse cx="546.8" cy="379.3" rx="6.5" ry="4.6" transform="rotate(-39.8 546.8 379.3)" /> <ellipse cx="562.7" cy="379.3" rx="6.5" ry="4.6" transform="rotate(-39.8 562.7 379.3)" /> <ellipse cx="578.6" cy="379.3" rx="6.5" ry="4.6" transform="rotate(-39.8 578.6 379.3)" /> <ellipse cx="594.5" cy="379.3" rx="6.5" ry="4.6" transform="rotate(-39.8 594.5 379.3)" /> <ellipse cx="540.6" cy="396.3" rx="6.5" ry="4.6" transform="rotate(-39.8 540.6 396.3)" /> <ellipse cx="556.5" cy="396.3" rx="6.5" ry="4.6" transform="rotate(-39.8 556.5 396.3)" /> <ellipse cx="572.4" cy="396.3" rx="6.5" ry="4.6" transform="rotate(-39.8 572.4 396.3)" /> <ellipse cx="588.3" cy="396.3" rx="6.5" ry="4.6" transform="rotate(-39.8 588.4 396.3)" /> <ellipse cx="534.4" cy="413.3" rx="6.5" ry="4.6" transform="rotate(-39.8 534.4 413.3)" /> <ellipse cx="550.3" cy="413.3" rx="6.5" ry="4.6" transform="rotate(-39.8 550.3 413.3)" /> <ellipse cx="566.2" cy="413.3" rx="6.5" ry="4.6" transform="rotate(-39.8 566.2 413.3)" /> <ellipse cx="582.1" cy="413.3" rx="6.5" ry="4.6" transform="rotate(-39.8 582.2 413.3)" /> <ellipse cx="528.2" cy="430.3" rx="6.5" ry="4.6" transform="rotate(-39.8 528.2 430.3)" /> <ellipse cx="544.1" cy="430.3" rx="6.5" ry="4.6" transform="rotate(-39.8 544.1 430.3)" /> <ellipse cx="560" cy="430.3" rx="6.5" ry="4.6" transform="rotate(-39.6 562.3 429.7)" /> <ellipse cx="575.9" cy="430.3" rx="6.5" ry="4.6" transform="rotate(-39.8 576 430.3)" /> </g> </g> <ellipse id="right-display-shadow" cx="593.3" cy="508.4" fill="#1e3855" rx="74" ry="10.9" /> </g> <g id="left-display"> <g id="left-display-display"> <path fill="#282e39" stroke="#0ff" stroke-miterlimit="10" stroke-width="5" d="M299 461H153c-10.4 0-22-8.5-25.8-19L101 370c-3.8-10.4 1.6-18.9 12-18.9h146c10.5 0 22 8.5 25.9 18.9l26.2 72c3.8 10.4-1.6 19-12 19z" opacity=".8" /> <polygon fill="#0ff" points="153.1 433.3 155.7 440.3 158.2 447.3 153.6 443.8 148.9 440.3 151 436.8 153.1 433.3" /> <polygon fill="#0ff" points="143 433.3 146.4 433.3 151.9 448.4 148.5 448.4 143 433.3" /> <polygon fill="#0ff" points="193.8 448.4 191.3 441.4 188.7 434.4 193.4 437.9 198 441.4 195.9 444.9 193.8 448.4" /> <polygon fill="#0ff" points="203.9 448.4 200.6 448.4 195.1 433.3 198.4 433.3 203.9 448.4" /> <polygon fill="#0ff" points="164.4 433.3 167.8 433.3 173.3 448.4 169.9 448.4 164.4 433.3" /> <polygon fill="#0ff" points="174 433.3 177.4 433.3 182.9 448.4 179.5 448.4 174 433.3" /> <ellipse cx="199" cy="377.7" fill="#34496a" rx="5.4" ry="7.7" transform="rotate(-50.2 199 377.7)" /> <polygon fill="#0ff" points="198.2 380.9 197 377.7 195.9 374.6 199.2 376.1 202.6 377.7 200.4 379.3 198.2 380.9" /> <line x1="217.3" x2="267.5" y1="377.7" y2="377.7" fill="#282e39" stroke="#0ff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="5" opacity=".8" /> <ellipse cx="206.2" cy="397.6" fill="#34496a" rx="5.4" ry="7.7" transform="rotate(-50.2 206.2 397.6)" /> <polygon fill="#0ff" points="205.4 400.7 204.2 397.6 203.1 394.4 206.4 396 209.8 397.6 207.6 399.2 205.4 400.7" /> <line x1="224.5" x2="274.8" y1="397.6" y2="397.6" fill="#282e39" stroke="#0ff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="5" opacity=".8" /> <ellipse cx="213.5" cy="417.5" fill="#34496a" rx="5.4" ry="7.7" transform="rotate(-50.2 213.4 417.4)" /> <polygon fill="#0ff" points="212.6 420.6 211.5 417.5 210.3 414.3 213.7 415.9 217 417.5 214.8 419 212.6 420.6" /> <line x1="231.8" x2="282" y1="417.5" y2="417.5" fill="#282e39" stroke="#0ff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="5" opacity=".8" /> <ellipse cx="220.7" cy="437.3" fill="#34496a" rx="5.4" ry="7.7" transform="rotate(-50.2 220.7 437.3)" /> <polygon fill="#0ff" points="219.8 440.5 218.7 437.3 217.6 434.2 220.9 435.8 224.3 437.3 222.1 438.9 219.8 440.5" /> <line x1="239" x2="289.2" y1="437.3" y2="437.3" fill="#282e39" stroke="#0ff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="5" opacity=".8" /> <path fill="#34496a" d="M190.5 424.4h-46a7.4 7.4 0 01-6.5-4.7l-15.8-43.5c-1-2.6.4-4.7 3-4.7h46a7.4 7.4 0 016.5 4.7l15.8 43.5c1 2.6-.4 4.7-3 4.7z" /> <ellipse cx="157.8" cy="398" fill="#282e39" rx="17.5" ry="25.1" transform="rotate(-50.2 157.8 398)" /> <ellipse cx="157.8" cy="398" fill="#282e39" rx="5.1" ry="7.3" transform="rotate(-50.2 157.8 398)" /> <path fill="#0ff" d="M159.8 405a10 10 0 01-8.8-6.4 5.8 5.8 0 01.5-5.4 5.3 5.3 0 014.4-2.2 10 10 0 018.8 6.4 5.8 5.8 0 01-.5 5.4 5.3 5.3 0 01-4.4 2.1zm-3.9-10.6a2 2 0 00-1.6.7 2.5 2.5 0 000 2.3 6.6 6.6 0 005.4 4 2 2 0 001.7-.6 2.5 2.5 0 000-2.3 6.6 6.6 0 00-5.5-4zM173.6 405h14.5l-5.1-14h-14.4a1.8 1.8 0 00-1.7 2.6l3.2 8.7a4.1 4.1 0 003.5 2.6z" /> </g> <ellipse id="left-display-shadow" cx="224.5" cy="511.5" fill="#1e3855" rx="74" ry="10.9" /> </g> </g> <g id="robot"> <path id="body-base" fill="#fff" d="M490.4 368.3c0 63.7-38 140-84.7 140s-84.8-76.3-84.8-140 38-90.6 84.8-90.6 84.7 26.9 84.7 90.6z" /> <g id="robot-body"> <ellipse id="robot-shadow" cx="405.6" cy="543.9" fill="#1e3855" rx="44.5" ry="7.1" /> <g clip-path="url(#clip-path-2)"> <g id="faces"> <g id="face"> <ellipse id="face-back" cx="560" cy="340.9" fill="#34496a" rx="61.5" ry="32.2" /> <g class="eyes" id="eyes" fill="#0ff"> <ellipse cx="539.8" cy="340.9" rx="7.3" ry="13.7" /> <ellipse cx="579.1" cy="340.9" rx="7.3" ry="13.7" /> </g> </g> <g id="face-2" data-name="face"> <ellipse id="face-back-2" cx="256.9" cy="340.9" fill="#34496a" data-name="face-back" rx="61.5" ry="32.2" /> <g class="eyes" id="eyes-2" fill="#0ff" data-name="eyes"> <ellipse cx="236.7" cy="340.9" rx="7.3" ry="13.7" /> <ellipse cx="275.9" cy="340.9" rx="7.3" ry="13.7" /> </g> </g> <g id="charge"> <circle cx="406.8" cy="340.9" r="16.2" fill="#34496a" /> <rect width="4.1" height="13.9" x="398.7" y="334" fill="#fff" /> <rect width="4.1" height="13.9" x="410.8" y="334" fill="#fff" /> </g> </g> </g> </g> <path id="right-hand" fill="#fff" d="M549.7 400.7c0 15.6-31.2 28.2-56.2 28.2s-34.2-12.6-34.2-28.2 9.2-28 34.2-28 56.2 12.5 56.2 28z" /> <path id="left-hand" fill="#fff" d="M255.6 400.7c0-15.5 31.2-28 56.2-28s34.2 12.5 34.2 28-9.3 28.2-34.2 28.2-56.2-12.6-56.2-28.2z" /> </g> <path id="note-1" fill="none" d="M180 317l-3.5-3.8a1 1 0 00-1.7.7v8.1a6 6 0 00-2-.3c-2.5 0-4.6 1.6-4.6 3.5s2 3.5 4.7 3.5 4.6-1.5 4.6-3.5a3 3 0 00-.7-1.9v-6.8l1.7 1.8a1 1 0 101.5-1.4z" /> <path id="note-2" fill="none" d="M203.4 323.4v-9.5a1 1 0 00-1-1h-9.3a1 1 0 00-1 1v8.1a6 6 0 00-2-.3c-2.5 0-4.6 1.6-4.6 3.5s2 3.5 4.7 3.5 4.6-1.5 4.6-3.5a2.9 2.9 0 00-.7-1.9V315h7.3v7.1a5.8 5.8 0 00-1.9-.3c-2.6 0-4.7 1.6-4.7 3.5s2.1 3.5 4.7 3.5 4.7-1.5 4.7-3.5a2.9 2.9 0 00-.8-1.8z" /> </g> 以上方法(部分)来自满心记、六月是只猫。完！
接上次分享的"有趣可调节的暗黑模式"文章，今天再给大家分享一个挺不错的白天夜晚模式自由切换的小组件。 老样子，如果喜欢可以直接拿去食用😎！ [...]