喜欢看网页上那些酷炫的效果吗？这就是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.科幻404 ## 1.动态波纹字  ```html
想象你有一幅画，但是你只能通过文字来告诉别人这幅画是什么样子的。Base64就像是一种特殊的语言，它可以把你的画变成一串很长的文字，这样你就可以用文字的形式把画的内容告诉别人了。 在电脑世界里，Base64编码就像是用文字来描述图片和其他文件（比如视频、音频等）的方法。这样，你就可以把这些描述通过互联网发送给别人，而不用真的把文件本身发过去。 把图片转换成Base64编码的好处是，你可以把图片直接嵌入到网页的代码里，这样网页加载的时候就不需要再去互联网上下载这张图片，网页加载的速度就会变快。但是，这种方法也有一个缺点：用文字描述的图片比原来的图片要大一些，大概会增大三分之一左右。所以，如果我们用这种方法描述很大的图片，那么网页的代码就会变得非常大，加载起来也会变慢。 因此，我们通常只把小图片转换成Base64编码，因为小图片的描述文字不会太大，不会影响网页的加载速度。对于大图片，我们还是选择直接在网页上链接到图片文件，这样更有效率。 > 简单一点来理解，就是将图片转换成一串长代码，供网页使用。（可直接替换网页图片外链） ## 在线体验 1.前往图像转
今天给大家分享一个小技巧，给我们的博客文章评论框添加七彩打字动画。这个效果不仅能让我们的博客更加生动有趣，还能提升用户的评论体验，增加互动乐趣。让我们一起来看看如何实现这个效果吧！ ## 效果展示 白天模式：  夜晚模式：  ## 具体操作 1.复制代码 将以下JS代码复制到主题目录下的 footer.php 文件中 body 标签结束前： ```js (function webpackUniversalModuleDefinition(a,b){if(typeof exports==="object"&&typeof module==="object"){module.exports=b()}else{if(typeof define==="function"&&defin
今天给大家分享一个用JS代码制作一个倒计时公告的小技巧。这个方法非常实用，可以让你博客的公告在特定时间后自动关闭，既方便又高效。让我们一起来看看吧！
之前在使用joe主题的时候，偶然发现一个非常有趣的小组件“旋转小人”。因自己折腾切换主题，很多东西都没有了，今天在逛原来的网站时，又发现了这个项目。一段简单的代码，就能实现"旋转小人"的效果，现在分享给大家。 ## 效果展示  效果图有点拉胯，将就看吧。 ## 代码 ```html 旋转小人 刘郎阁 .twopeople{ margin: 0; align-items: center; justify-content: center; text-align: center; } canvas { displa
想让你网站的友情链接更整洁好看吗？试试自适应文字友链格子！它能帮你轻松制作大小合适、排列有序的友情链接，让它们在任何设备上都显得完美。操作简单，效果显著，快来让你的友情链接更上一层楼吧！ ## 效果展示  ## 代码 ```html .tp-ad-text1 {width:100%;padding-top:6px;box-sizing:border-box;overflow: hidden;background: rgba(255,255,255,.2);} .tp-ad-text1 a {color:#7fba00;font-size:14px;line-height:38px;text-align:center;border:1px dashed rgba(0,0,0,.2);padding:0 3px;box-sizin
文字已成为人们交流的重要方式，今天给大家分享一个如何在编辑器中添加字符统计功能，帮助您轻松掌握文章长度，提高写作效率。
接上次分享的"有趣可调节的暗黑模式"文章，今天再给大家分享一个挺不错的白天夜晚模式自由切换的小组件。 老样子，如果喜欢可以直接拿去食用😎！
你想知道你的博客文章需要多长时间才能阅读完吗？在文章中添加预计阅读时长，可以帮助读者更好地规划他们的时间。今天给大家分享一个轻松实现该功能的方法，如果觉得不错，就拿去食用吧！ ## 具体操作 1.添加Js方法 在你主题目录下的 functions.php 文件中，找一个合适的位置添加以下代码： ```js //文章阅读时间统计 function art_time ($cid){ $db=Typecho_Db::get (); $rs=$db->fetchRow ($db->select ('table.contents.text')->from ('table.contents')->where ('table.contents.cid=?',$cid)->order ('table.contents.cid',Typecho_Db::SORT_ASC)->limit (1)); $text = preg_replace("/[^\x{4e00}-\x{9fa5}]/u", "", $rs['text']); $tex
博客就像是我们精心打造的个人空间，我们在这里分享想法、记录生活、展示才华。而友情链接（友链）就像是这些个人空间之间的桥梁，它将我们与志同道合的朋友们连接起来，形成了一个互相支持、共同成长的网络社区。今天，我要和大家分享的是一个特别的“友链朋友圈部署方案”，它将帮助我们的博客不仅成为信息的孤岛，而是变成一个互联互通的生态圈。让我们一起来看看如何通过一些简单而实用的步骤，让我们的博客在“朋友圈”中绽放光彩吧！ ## 1.编写该方案的缘由 在逛友友的博客或者网站时，突然发现有这么好玩而又实用的项目"友链朋友圈"，不用"出门"就能在自家网站 查看/浏览 别人写的文章，实在是妙极了。于是，我就开始研究、折腾……此处省略N字：友链朋友圈折腾记录。 当然了，好用的东西肯定是要和大家一起分享的，于是便有了本文。 > 本文提供的以下2种方案，刘郎亲测均真实有效（但需要注意的是：不同平台、不同系统、不同主题可能有所偏差，自己动手微调即可）。 ## 2."友链朋友圈"项目 
敬畏生命，热爱生活！
