自定义博客皮肤VIP专享

*博客头图：

格式为PNG、JPG，宽度*高度大于1920*100像素，不超过2MB，主视觉建议放在右侧，请参照线上博客头图

请上传大于1920*100像素的图片！

博客底图：

图片格式为PNG、JPG，不超过1MB，可上下左右平铺至整个背景

栏目图：

图片格式为PNG、JPG，图片宽度*高度为300*38像素，不超过0.5MB

主标题颜色：

RGB颜色，例如：#AFAFAF

Hover：

RGB颜色，例如：#AFAFAF

副标题颜色：

RGB颜色，例如：#AFAFAF

预览 取消 提交

自定义博客皮肤

-+
上一步保存

uu0216的博客

UE-UI-WebDesign-WebFrontEngineer

  • 博客(65)
  • 收藏
  • 关注
排序：
按最后发布时间
按访问量
RSS订阅

原创 CSS技巧专栏：一日一例 21 -纯CSS实现拟真电器按钮特效

上面是按钮本体层的变化，它改变了文字颜色，按钮背景色变亮些，然后给按钮增加了投影。上述样式表，修改了文字颜色，让它稍微比鼠标悬停状态更暗些，然后增加了蓝色的文字阴影，模拟了文字外发光的效果。黑色的层，包在按钮外面，当鼠标悬浮到按钮上时，它的颜色变为蓝色，常态下还有颜色稍深一点点的投影，也放在这个层。首先是按钮本体层，它包括按钮文字，鼠标悬浮状态时候的按钮内发光也写在按钮本体上，按钮按下去时候的内阴影也可以写在本体上。到此，这个按钮的全部样式就完成了。这时候，按钮就变化成了我们看到的常态的按钮样式了。

2024-08-09 20:47:41 1104

原创 JS+CSS案例：实时获取人民币与美元汇率+CNY与USD互换+单位转换成万元和亿元的汇率计算器

自动获取当前汇率，输入美元（USD）输出 人民币（CNY），点击文本框后的货币单位，可以交换兑换比率。自动处理数字输入：文本框允许直接粘帖科学计数法形式的数字（自动过滤空格,逗号及其他字符），如：2,923,706,026 或 2 923 706 026 这样的数字。对转换后的以元为单位的数值进行单位换算，可以换算为万元和亿元为单位的两种数值。

2024-08-09 20:26:21 688

原创 CSS技巧专栏：一日一例 20-纯CSS实现点击会凹陷的按钮

这是一个非常简单但实用的按钮，乍一看就是个平面，当鼠标移动上去时候，按钮显示白色的圆形按钮。当按钮点下去时候，出现按钮凹陷的效果。

2024-08-07 22:35:34 657

原创 JS+CSS案例：可适应上下布局和左右布局的菜单（含二级菜单）

我们看到 在CSS引用时，我引用了3个css文件：reset.css ，style.css ，menu-y.css 并且，在引用 menu-y.css 时，还在这行代码的最后给它加了一个 id=cssfile 。为什么这样呢？因为我后面要通过js来改变这个ID的引用文件，达到用户前台切换样式表的目的。所以，这个id 一定不能忘了写。

2024-08-07 22:31:43 1336

原创 JS+CSS案例：用CSS+JS做漂亮的拟真时钟

今天给大家分享一个挺酷的CSS+js模拟的时钟。

2024-08-06 21:40:45 428

原创 CSS技巧专栏：一日一例 19 -纯CSS实现超酷的水晶按钮特效

我们观察一下按钮动作，鼠标移动到按钮上时，发生了两个变化：1.按钮本体向下滑动了几个像素。但按钮的高光没有动。2.按钮下面的深色投影，在按钮向下移动的时候，阴影没有了。我们可以把按钮本体那个投影层的透明度降低看看效果：

2024-08-06 21:02:26 1423

原创 JS+CSS案例：JS+CSS 实现漂亮时尚的样式表切换（换肤）功能

在页面前端给用户提供网站换肤的选择，并利用cookie记录用户访问网站时候选择的网站风格（样式表文件）。

2024-08-02 18:32:53 626 2

原创 CSS技巧专栏：一日一例 18 -纯CSS实现背景浮光掠影的按钮特效

按钮是好几种颜色的背景色组成的，使用css的话，应该会有几个不同颜色的层，在按钮后面移动。每个层互相叠加，大概还会用到图片混合模式产生了更多的叠加的颜色，然后边缘过渡的话，就是用模糊滤镜了。

2024-08-02 16:40:39 1191

原创 CSS技巧专栏：一日一例 17 -纯CSS实现抖音故障风按钮特效

今天这个案例，是大家非常熟悉的风格。

2024-08-01 18:48:49 792

原创 JS+CSS案例：实现点击展开隐藏答案的帮助列表

要实现点击一个问题后关闭其他所有被展开的答案，你需要在JavaScript中添加一些逻辑来跟踪当前展开的答案，并在需要时关闭它们。我们首先通过querySelectorAll获取了所有的问题和答案元素，并将它们分别存储在questions和answers数组中。然后，我们为每个问题元素添加了一个点击事件监听器。在监听器的回调函数中，我们首先遍历所有的答案元素，并将它们的display样式设置为'none'来关闭它们。之后，我们找到当前被点击问题元素的下一个元素（即答案），并将其display样式设置为'bl

2024-08-01 18:41:52 380

原创 CSS技巧专栏：一日一例 16 纯CSS实现黑色背景炫光按钮特效

按钮层：放置文字，定位按钮，在最上面。背景层：黑色，用于遮挡彩色背景层，在中间。 用伪元素 after 来实现底层：彩色渐变层，在下面。用伪元素 before 来实现

2024-07-31 17:59:51 765

原创 前端入门知识分享：HTML 页面中 head 标签之间的代码详解

head元素内的内容不会直接显示在网页上，但会影响网页的渲染和功能。为了提高页面加载速度，通常建议将CSS样式表放在使用meta标签可以优化搜索引擎对网页的索引和理解。

2024-07-31 17:50:06 1399

原创 JS小应用：从图床获取的html代码中提取IMG标签并提取图片复制到剪贴板

自己做站长，为了节省银子，难免要用到图床。有的图床可以直接给你URL，这当然是最好的情况：而有的图床，却禁用了鼠标右键，甚至复制一张图片地址的机会都不给（偏偏它其他的功能还挺好，你又舍不得放弃它），它给的：这时候就比较烦了。所以，我自己写了一段js来把自己解放出来。

2024-07-30 17:21:05 402

原创 CSS技巧专栏：一日一例 15 纯CSS写立体按钮特效

鼠标移动到按钮上，按钮本体要升高起来，但按钮的阴影不要升高。毕竟，你见过哪个人跳起来的时候，影子也会跟着跳起来了呢 😊，但位移是写在按钮本体上的，所以，按钮的阴影在这个动画里，要同时调整与本体的距离。按钮升高后，按钮的阴影需要看起来变小、边缘更模糊，这才符合现实。至于按钮改变颜色什么的，那就不是个事儿了。

2024-07-30 17:12:34 1082

原创 CSS技巧专栏：一日一例 14-纯CSS实现模拟水波波动填充按钮特效

我们先做复杂的水波滚动效果，先修改一下HTML，给按钮增加一个 行内元素 span，它会有1个本体和两个伪元素层，用来实现上面我们说过的水波波动效果。

2024-07-29 19:45:00 394

原创 前端必修技能：高手进阶核心知识分享 - css盒的before、after和子元素的层叠关系解析及应用

一个盒子 它的 ::before伪类在最底层, ::after 伪元素在最上层, 其所有子元素在中间叠放。盒子的 子元素堆叠关系，按照书写顺序自下而上排序：先写的叠放在下面，后写的在上面。父元素在最下面。

2024-07-29 15:16:06 1463

原创 JS小应用：复制指定div的内容到剪贴板

使用这个函数，只需传入你想要复制内容的div的ID即可。

2024-07-26 21:05:01 465 3

原创 ​CSS技巧专栏：一日一例 13 -纯CSS实现晃晃悠悠背景不停滚动的按钮特效​

间隔的灰色条和白色的条纹布滚动效果，以及鼠标移动上去后，变成了醒目的荧光绿。仔细观察发现，那个滚动的条纹布并没有超过按钮上灰色的边框，而这个按钮，居然在灰色的边框外面还有一层白色的边框。那么，我们把这些样式分解一下：两个边框，可以都写在按钮上，一个用真的边框border，一个用box-shadow来模拟。三个动画：条纹滚动动画，采用背景色渐变位移动画，绑定在after层上。像个摇头摆尾的小狗狗一样时不时晃一晃的动画，绑定在按钮上。响应鼠标悬浮：条纹灰色变荧光绿色，可以用颜色变化，也可以用灰度滤镜。

2024-07-26 21:01:28 968

原创 CSS技巧专栏：一日一例 12 -纯CSS实现边框上下交错的按钮特效

虽说这按钮给人的感觉就是上下两个边框交错变换了位置，但我们都知道border是没法移动的。那么这个按钮是如何实现的呢？你想到了吗？没错，还是伪元素。利用before和after，可以绘制两个蓝色的边，然后，只要让他们动起来就行了。

2024-07-25 18:01:17 865

原创 WordPress 后台开发技巧：向文章发布页右侧添加自定义菜单项

这个案例向你介绍了如何在文章发布页的右侧边栏增加一个新的自定义菜单项。具体用它实现什么功能，就看你的需要了

2024-07-25 17:20:56 382

原创 玩转CSS：用ul li +JS 模拟select，避坑浏览器不兼容。

在前端的工作中，经常会遇到 selcet控件，但我们用css来写它的样式时候，总是不那么令人满意，各种浏览器不兼容啊有没有？那么，我本篇文章就给大家提供一个思路：用UL 和li 模拟 select 控件，让我们用起来可以避免令人心烦的调整样式问题。

2024-07-24 20:18:42 560

原创 CSS技巧专栏：一日一例 11 -纯CSS实现多彩渐变按钮系列特效

这是一个系列的按钮，它们具有共同的特点：底层按钮层，具有一个彩色的渐变边框，上层是依据hover效果需要，可以是渐变，可以时白色。鼠标hover效果都是一样的：背景色位移或变化。本篇文章仅介绍第三个按钮的做法，其他的做法，我会写在源文件里，但不写在本篇里。

2024-07-24 20:05:33 834

原创 CSS技巧专栏：一日一例 10 -纯CSS实现表爱心的小可爱按钮特效

这个按钮的常态效果有一个 为爱发电一样的光影扩散的效果，这个效果我考虑可以使用 动画 + 阴影 实现。当鼠标移到按钮上，两边突然滑出两个翅膀和翅膀上一样可爱的闪动的表白文字，这个可以使用before和after两个伪元素来实现。

2024-07-22 16:16:40 825

原创 前端必修技能：高手进阶核心知识分享 - CSS 选择器

CSS（层叠样式表）提供了多种选择器，用于选择要应用样式的 HTML 元素。CSS 选择器用于选择你想要的元素的样式的模式。看了上面的图，你发现就算你不知道选择器名字叫什么，属于哪一种，但不知不觉的，你其实已经习惯了其中的很多种选择器的使用。嘿嘿，这就是我现在的状态。看了这图之后，你是不是有一种感慨呢？选择器太多了，到底该怎么用呢？

2024-07-22 16:02:58 988

原创 前端必修技能：高手进阶核心知识分享 - CSS伪类和伪元素

伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。伪类选择器和伪元素选择器虽然不是真正的元素，但它们在CSS中扮演着极其重要的角色。了解并熟练运用它们，可以让你的网页更加生动、互动性更强，同时也能更好地控制页面的布局和内容的表现。

2024-07-19 22:22:29 1155

原创 CSS技巧专栏：一日一例 9 -纯CSS实现按钮边框依次填充特效

在这个按钮的样式表里没有写border，而是利用box-shadow内阴影属性弄模拟了边框。其实使用border也是可以实现同样效果的，只是要稍微调整一下before 和 after 层的位置。接着再写用来响应鼠标悬停动画的边框，还是老办法，利用它的 before 和 after 两个伪元素。

2024-07-19 17:24:07 1208

原创 给Wordpress评论列表的用户昵称增加个性化角色称号和注册年数

这篇文章介绍了如何在 wordpress 默认的评论列表的用户名后面增加：个性化用户角色（基于调用用户组的代码）和增加 用户注册年数 的功能。

2024-07-18 18:24:15 547

原创 CSS技巧专栏：一日一例 8 - 纯CSS利用mask属性实现按钮边框对称包围特效

在前一篇文章的最后，给各位看官留了一个作业，如上图所示。本篇文章，我们来公布一下它的源码。

2024-07-18 17:41:41 789

原创 给Wordpress添加评分功能到评论表单

在前端页面展示分值时，从后台获取的是一个数值。但并不是小星星。通常做法是使用js获取用户的评分数值，然后使用js+CSS实现输出与分值相等的五角星数量。但是：能用CSS解决的问题就不要用JS。所以，在这里我使用了 css 的自定义属性 data-* 直接获取了每个评价的评分。然后利用CSS的伪类，对应输出不同数量的五角星。完美躲过了js。

2024-07-17 16:33:07 503

原创 CSS技巧专栏：一日一例 7 - 纯CSS实现炫光边框按钮特效

相信你可能已经在网络见过类似这样的流光的按钮，在羡慕别人做的按钮这么酷的时候，你有没有扒一下它的源代码的冲动？或者你当时有点冲动，却转眼忘却了。今天，刚巧，你又看到它了，今天跟我一起扒一扒它的源代码。左边按钮分析：1. 圆角按钮的光线效果，这个稍微费劲些。难点：动画层的路径移动2. 倒影。

2024-07-17 16:26:33 2760

原创 CSS技巧专栏：一日一例 6 - 纯CSS实现粉红色跳出来的立体按钮特效

我说它简单，因为它实际上并没有使用什么特别的动画效果，只是几个简单的动画组合：利用伪类before和after，制作按钮后面两个透明的粉色填充层，左右移动。给文字层单独增加span，以实现它跳出来的旋转动画。利用多层文字阴影，实现文字的立体外描边效果。

2024-07-16 16:55:43 1097

原创 JS+CSS特效：HTML+JS+CSS 实现精致的带二级菜单的头部菜单

既然a标签把它填满导致了原来的内圆角没有了，而去掉了a标签的背景色依然没有出现圆角。那么我不妨把第一行的两个菜单项和最后一行的两个菜单项写个圆角。这里利用子选择器实现。为了避免菜单项数量改变而导致样式的变化，需要把样式写在最后两个子列表项上，而不是第7和第8上面。所以，在最后两个列表项上，我们使用的 nth-last-child 而不是 nth-child。

2024-07-16 16:43:05 1121

原创 WordPress 主题技巧：给文章页增加“谁来过”模块。

给文章页增加一个“谁对本电影感兴趣”的功能模块可能会比较有趣，这个功能有点类似于‘足迹’的感觉，用户可以通过这个功能，发现与他兴趣相投的人。

2024-07-12 22:49:21 282

原创 CSS技巧专栏：一日一例 5-纯CSS实现背景色从四周向中心填充的按钮特效

 -ms- ： -ms-linear-gradient IE浏览器专属的CSS属性需添加-ms-前缀; -moz- ： -moz-linear-gradient 所有基于Gecko引擎的浏览器（如Firefox）专属的CSS属性需添加-moz-前缀; -o- ： -o–linear-gradient Opera浏览器专属的CSS属性需添加-o-前缀; -webkit-： -webkit–linear-gradient 所有基于Webkit引擎的浏览器（如Chrome、Safari）专属的CSS需

2024-07-12 19:34:37 899

原创 CSS技巧专栏：一日一例 4.纯CSS实现两款流光溢彩的酷炫按钮特效

​经过上一篇的案例：CSS技巧专栏：一日一例 3.纯CSS实现炫酷多彩按钮特效 我们已经知道，只要给彩色渐变增加blur滤镜，我们就可以得到一个扩散的模糊的炫彩的光。按照昨天的思路，我们就可以实现炫光效果：​

2024-07-11 22:14:24 1726

原创 前端必修技能：高手进阶核心知识分享 - 三万字帮你搞定CSS动画(形变动画、过渡动画、关键帧动画）

transform-Origin属性允许您更改转换元素的位置。2D转换元素可以改变元素的X和Y轴。3D转换元素，还可以更改元素的Z轴。注意： 使用此属性必须先使用transform属性。transition 属性允许你在元素状态改变时控制过渡效果。它可以让你在元素从一种样式变换到另一种样式时产生平滑的过渡效果，比如从一种颜色渐变到另一种颜色，或者从隐藏到显示。transition-property: 指定要过渡的 CSS 属性的名称。例如，color、background-color 等。

2024-07-11 18:23:29 2414

原创 CSS技巧专栏：一日一例 3.纯CSS实现炫酷多彩按钮特效

CSS的 box-shadow 属性可以用来给一个元素添加一个或多个阴影效果。如果你想要给一个div元素添加多种颜色的投影，你可以通过在box-shadow属性中用逗号分隔多个值对来实现。上面代码，我们分别给按钮增加了红，黄，蓝，绿四种颜色的投影，并且让投影扩散范围增大，我们看看效果是不是我们想要的。在浏览器中刷新我们的按钮页面，把鼠标移动到按钮上，我们得到了这样的按钮效果：

2024-07-10 23:34:24 1568 1

原创 前端入门知识分享：如何在HTML或CSS文件中引用CSS文件。

行内样式：使用 HTML 标签的 style 属性定义 CSS 样式；内嵌样式：使用 style 标签在 HTML 文档头部（ 通常在 head 之间）定义 CSS 样式；链接式：使用 link 标签引入外部 CSS 样式表文件。导入式：使用 @import 命令导入外部 CSS 样式表文件。

2024-07-09 19:08:21 1292

原创 CSS技巧专栏：一日一例 2.纯CSS实现 多彩边框按钮特效

content:attr(alt); 通过attr函数 获取本标签的alt值，之所以要这么做，是因为after生成的填充色的图层，会覆盖到按钮上面，导致按钮上写的文字不可见。所以，我们要通过content来输出按钮上的文字。这样写，也是为了让样式和内容脱离。这样我们在html的代码上，给 button 控件写上 alt文字，就可以通过css获取这个文字并输出了。这样，也方便后台程序通过程序动态修改 alt标签输出 的文字，达到修改按钮文字的目标，而不需要去手动修改css文件中的文字。

2024-07-09 18:45:02 1099

原创 CSS技巧专栏：一日一例 1.纯CSS实现 会讨好的热情按钮 特效

calc()函数：动态计算长度值需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；任何长度值都可以使用calc()函数进行计算；calc()函数支持 "+", "-", "*", "/" 运算；calc()函数使用标准的数学运算优先级规则；

2024-07-08 20:07:51 1464

CSS技巧专栏每日一例：6-纯CSS实现暧昧的X按钮特效.zip
资源介绍： 纯CSS实现的动态按钮特效，想知道按钮效果的朋友，可以去我的专栏查看。资源名就是文章名：CSS技巧专栏每日一例：6-纯CSS实现【暧昧的X】按钮特效 资源特点：代码短小、代码容易阅读、重点注释、方便扩展、样式美观、纯css实现。 适用人群：前端从业职，新手小白，有网站开发能力对美工有所欠缺的后端工程师。 提示：------------------------------------------------------------------------------------------------------------ 文件夹里包含预览图，源码有注释。没有任何广告和病毒，可放心下载，学习，使用。

2024-07-24

CSS技巧专栏每日一例：9-纯CSS实现按钮边框依次填充特效.zip
CSS技巧专栏每日一例：9-纯CSS实现按钮边框依次填充特效 资源介绍： 纯CSS实现的动态按钮特效，想知道按钮效果的朋友，可以去我的专栏查看。资源名就是文章名。 资源特点：代码短小、代码容易阅读、重点注释、方便扩展、样式美观、纯css实现。 适用人群：前端从业职，新手小白，有网站开发能力对美工有所欠缺的后端工程师。 提示：------------------------------------------------------------------------------------------------------------ 文件夹里包含预览图，源码有注释。没有任何广告和病毒，可放心下载，学习，使用。

2024-07-24

CSS技巧专栏每日一例：7-纯CSS实现两个炫光边框按钮特效.zip
CSS技巧专栏每日一例：7-纯CSS实现两个炫光边框按钮特效 资源介绍： 纯CSS实现的动态按钮特效，想知道按钮效果的朋友，可以去我的专栏查看。资源名就是文章名。 资源特点：代码短小、代码容易阅读、重点注释、方便扩展、样式美观、纯css实现。 适用人群：前端从业职，新手小白，有网站开发能力对美工有所欠缺的后端工程师。 提示：------------------------------------------------------------------------------------------------------------ 文件夹里包含预览图，源码有注释。没有任何广告和病毒，可放心下载，学习，使用。

2024-07-24

CSS技巧专栏每日一例：5-纯CSS实现背景色从四周向中心填充的按钮特效.zip
CSS技巧专栏每日一例：5-纯CSS实现背景色从四周向中心填充的按钮特效 资源介绍： 纯CSS实现的动态按钮特效，想知道按钮效果的朋友，可以去我的专栏查看。资源名就是文章名。 资源特点：代码短小、代码容易阅读、重点注释、方便扩展、样式美观、纯css实现。 适用人群：前端从业职，新手小白，有网站开发能力对美工有所欠缺的后端工程师。 提示：------------------------------------------------------------------------------------------------------------ 文件夹里包含预览图，源码有注释。没有任何广告和病毒，可放心下载，学习，使用。

2024-07-24

CSS技巧专栏每日一例：10-纯CSS实现伸缩按钮特效.zip
CSS技巧专栏每日一例：10-纯CSS实现伸缩按钮特效 资源介绍： 纯CSS实现的动态按钮特效，想知道按钮效果的朋友，可以去我的专栏查看。资源名就是文章名。 资源特点：代码短小、代码容易阅读、重点注释、方便扩展、样式美观、纯css实现。 适用人群：前端从业职，新手小白，有网站开发能力对美工有所欠缺的后端工程师。 提示：------------------------------------------------------------------------------------------------------------ 文件夹里包含预览图，源码有注释。没有任何广告和病毒，可放心下载，学习，使用。

2024-07-24

CSS技巧专栏每日一例：3 纯CSS实现炫酷多彩按钮的特效.zip
CSS技巧专栏每日一例：3 纯CSS实现炫酷多彩按钮的特效 资源介绍： 纯CSS实现的动态按钮特效，想知道按钮效果的朋友，可以去我的专栏查看。资源名就是文章名。 资源特点：代码短小、代码容易阅读、重点注释、方便扩展、样式美观、纯css实现。 适用人群：前端从业职，新手小白，有网站开发能力对美工有所欠缺的后端工程师。 提示：------------------------------------------------------------------------------------------------------------ 文件夹里包含预览图，源码有注释。没有任何广告和病毒，可放心下载，学习，使用。

2024-07-24

CSS技巧专栏每日一例：4-纯CSS实现两个流光溢彩的酷炫按钮特效.zip
CSS技巧专栏每日一例：4-纯CSS实现两个流光溢彩的酷炫按钮特效 资源介绍： 纯CSS实现的动态按钮特效，想知道按钮效果的朋友，可以去我的专栏查看。资源名就是文章名。 资源特点：代码短小、代码容易阅读、重点注释、方便扩展、样式美观、纯css实现。 适用人群：前端从业职，新手小白，有网站开发能力对美工有所欠缺的后端工程师。 提示：------------------------------------------------------------------------------------------------------------ 文件夹里包含预览图，源码有注释。没有任何广告和病毒，可放心下载，学习，使用。

2024-07-24

CSS技巧专栏每日一例：2-纯CSS实现多彩边框按钮的特效.zip
CSS技巧专栏每日一例：2-纯CSS实现多彩边框按钮的特效 资源介绍： 纯CSS实现的动态按钮特效，想知道按钮效果的朋友，可以去我的专栏查看。资源名就是文章名。 资源特点：代码短小、代码容易阅读、重点注释、方便扩展、样式美观、纯css实现。 适用人群：前端从业职，新手小白，有网站开发能力对美工有所欠缺的后端工程师。 提示：------------------------------------------------------------------------------------------------------------ 文件夹里包含预览图，源码有注释。没有任何广告和病毒，可放心下载，学习，使用。

2024-07-24

CSS技巧专栏每日一例：1-CSS实现会讨好的热情按钮.zip
资源介绍： 纯CSS实现的动态按钮特效，不知道资源样子的，可以去我的专栏看一下图片。文件名就是文章名：CSS技巧专栏每日一例：1-CSS实现会讨好的热情按钮.zip 资源特点：代码短小、代码容易阅读、重点注释、方便扩展、样式美观、纯css实现。 适用人群：前端从业职，新手小白，有网站开发能力对美工有所欠缺的后端工程师。 提示：------------------------------------------------------------------------------------------------------------ 文件夹里包含预览图，源码有注释。没有任何广告和病毒，可放心下载，学习，使用。

2024-07-24

CSS技巧：用css绘制漂亮的徽章缎带图形.zip
资源介绍： 从CSS画一个漂亮的徽章和缎带！适用所有需要给用户发徽章的场景啊，可以通过修改CSS，完成徽章颜色，徽章文字，徽章形状的修改。嗯，就是这些吧！很写实漂亮的徽章和缎带效果，推荐下载！ 资源特点：代码短小、代码容易阅读、重点注释、方便扩展、样式美观、纯css实现。 适用人群：前端从业职，新手小白，有网站开发能力对美工有所欠缺的后端工程师。 提示：------------------------------------------------------------------------------------------------------------ 文件夹里包含预览图，源码有注释。没有任何广告和病毒，可放心下载，学习，使用。

2024-07-06

实用代码：HTML+JS+CSS实现的全屏自动切换背景的登录窗与注册窗翻转切换 源码下载
资源介绍：这段代码实现了两个非常酷炫的功能： 1. 使用CSS3动画实现全屏图片背景自动切换。 2. 使用CSS3动画结合JS完成了卡片翻转效果，一个卡片是登录窗口，另一个卡片是注册窗口 资源特点：代码短小、代码容易阅读、重点注释、方便扩展、样式美观、案例代码使用HTML+CSS+JS完成，包含JQ库。 适用人群：前端从业职，新手小白，有网站开发能力对美工有所欠缺的后端工程师。 提示：------------------------------------------------------------------------------------------------------------ 文件夹里包含预览图，源码有注释。没有任何广告和病毒，可放心下载，学习，使用。

2024-07-03

前端必修技能：高手进阶核心知识分享 - CSS 滤镜详解
前端必修技能：高手进阶核心知识分享 - CSS 滤镜详解

2024-07-02

CSS太牛了！流光溢彩，极度惊艳！利用伪类before和CSS动画实现的非常酷炫的按钮效果.zip
资源介绍：这段代码实现了一组非常漂亮的流光溢彩的按钮，它使用伪类before和css实现。。 资源特点：代码短小、代码容易阅读、重点注释、方便扩展、样式美观、纯css实现。 适用人群：前端从业职，新手小白，有网站开发能力对美工有所欠缺的后端工程师。 提示：------------------------------------------------------------------------------------------------------------ 文件夹里包含预览图，源码有注释。没有任何广告和病毒，可放心下载，学习，使用。

2024-07-01

我有一枚淘气的金币：纯CSS实现金币缩放、跳跃、翻转、闪现、旋转动画.zip
资源介绍：这段代码通过CSS动画代码演示了一个金币可以实现的几个动画效果：缩放，跳跃，翻转，闪现，旋转。 资源特点：代码短小、代码容易阅读、重点注释、方便扩展、样式美观、纯CSS实现。 适用人群：前端从业者，新手小白，有网站开发能力对美工有所欠缺的后端工程师。 提示：------------------------------------------------------------------------------------------------------------ 文件夹里包含预览图，源码有注释。没有任何广告和病毒，可放心下载，学习，使用。

2024-07-01

基于JQuery实现电梯导航特效+页面滚动一定高度后固定头部导航.zip
资源介绍：这段代码实现了两个功能：1，页面滚动一定高度后，头部导航一部分固定在页面顶端。2.垂直电梯导航。这两个效果再制作网站时经常被用到。 资源特点：代码短小、代码容易阅读、重点注释、方便扩展、样式美观、使用JQ框架。 适用人群：前端从业职，新手小白，有网站开发能力对美工有所欠缺的后端工程师。 提示：------------------------------------------------------------------------------------------------------------ 文件夹里包含预览图，源码有注释。没有任何广告和病毒，可放心下载，学习，使用。

2024-06-29

纯CSS实现的很酷的光圈沿着按钮轮廓旋绕的按钮.zip
资源介绍：这段代码通过css伪类::before 和 after 实现了一个光条环绕按钮边框旋转的效果，非常的酷炫。纯css实现的按钮动态效果，代码逻辑清晰。 资源特点：代码短小、代码容易阅读、重点注释、方便扩展、样式美观、不使用js，不使用JQ框架。 适用人群：前端从业职，新手小白，有网站开发能力对美工有所欠缺的后端工程师。 提示：------------------------------------------------------------------------------------------------------------ 文件夹里包含预览图，源码有注释。没有任何广告和病毒，可放心下载，学习，使用。

2024-06-29

JS实现拖曳排序效果并输出新的排序结果
资源介绍：这段代码实现了一个简单的拖曳排序功能。用户可以通过拖动列表中的项来重新排列它们。每次排序后，新的排序结果将输出到页面上的#output元素中。这个例子不包括任何错误处理，并且假设列表中的data-index属性反映了当前项在列表中的正确索引。在实际应用中，你可能需要添加更多的错误处理和复杂性来处理不同的边界情况。 使用场景：通过少量代码实现的简单实用又具有时尚感的的拖曳排序效果。外部容器宽度可固定，内部菜单项数量可以任意增减。 资源特点：代码短小、代码容易阅读、重点注释、方便扩展、样式美观、原生Js实现，不使用JQ框架。 适用人群：前端从业职，新手小白，有网站开发能力对美工有所欠缺的后端工程师。 提示：------------------------------------------------------------------------------------------------------------ 文件夹里包含预览图，源码有注释。没有任何广告和病毒，可放心下载，学习，使用。

2024-06-28

html+css+js实现导航栏色块跟随滑动+点击后增加样式
资源介绍：当鼠标移动到其他菜单项时，会有个背景色块跟随鼠标横向平滑移动。当鼠标点击后，被点击的菜单名称文字字体会加粗（这个点击后的效果你也可以很方便的修改成你想要的效果）。 使用场景：通过少量代码实现的简单实用又具有时尚感的的页面主导航（菜单）效果，栏目底色会跟随鼠标移动到的分类滑动过去。外部容器宽度可固定，内部菜单项自动分配，数量可以任意增减。（若菜单过多会产生一定的审美影响）。 资源特点：代码短小、代码容易阅读、重点注释、方便扩展、样式美观、使用JQ框架。 适用人群：前端从业职，新手小白，有网站开发能力对美工有所欠缺的后端工程师。 提示：------------------------------------------------------------------------------------------------------------ 文件夹里包含预览图，源码有注释。没有任何广告和病毒，可放心下载，学习，适使用。

2024-06-28

JQ+CSS实现鼠标上移显示更多内容的排行列表
这是一个排行列表的效果，比较常用于各种资讯类，资源类的排行列表。例设计美观，非常实用。可用于各种排行的展示需求。 资源特点：代码非常短）、易读性强、重点注释、方便扩展、样式美观、使用JQ框架。 适用人群：前端从业职，新手小白，有网站开发能力对美工有所欠缺的后端工程师。 提示：---------------------------------------------------------------------------------------------------------------- 压缩包资源内包含：效果图，源码文件，jq库文件。无不良广告和病毒，可放心下载使用。

2024-06-26

纯CSS仿动态flash广告效果（可通过css随时修改底图，文字动画，颜色蒙版等，非常优于表现和易于修改）
使用场景：图片广告是一种非常常见的广告展现形式。但它存在着内容不易修改的弊端，每次改文字，更换颜色风格，更换底图，都需要重新作图。我设计的这种实用css实现的仿动画图片风格广告，不仅具有图片展示的优势，还可以轻松的使用css更换图片底图，修改广告文字，改变图片颜色风格，修改展现的动画效果等。 资源特点：代码短小、代码容易阅读、重点注释、方便扩展、样式美观、不使用JQ框架。 适用人群：前端从业职，新手小白，有网站开发能力对美工有所欠缺的后端工程师。 提示：---------------------------------------------------------------------------------------------------------------- 压缩包资源内包含：效果图，源码文件，jq库文件。无不良广告和病毒，可放心下载使用。

2024-06-26

CSS技巧专栏一日一例：21 -纯CSS实现拟真电器按钮特效.zip
这是一个CSS实现的拟真电器按钮特效.zip 需要看看效果的，可以移步到我的专栏去看看。文章名与资源名一致。 资源特点：代码短小、代码容易阅读、重点注释、方便扩展、样式美观、CSS+JS实现。 适用人群：前端从业职，新手小白，有网站开发能力对美工有所欠缺的后端工程师。

2024-08-09

JS+CSS案例：实时获取人民币与美元汇率+CNY与USD互换+单位转换成万元和亿元的汇率计算器
功能介绍 a.自动获取当前汇率，输入美元（USD）输出 人民币（CNY），点击文本框后的货币单位，可以交换兑换比率。 b.自动处理数字输入：文本框允许直接粘帖科学计数法形式的数字（自动过滤空格,逗号及其他字符），如：2,923,706,026 或 2 923 706 026 这样的数字。 c.对转换后的以元为单位的数值进行单位换算，可以换算为万元和亿元为单位的两种数值。 ------------------------------------------------------------------------------------------------------------------------ 需要看看效果的，可以移步到我的专栏去看看。文章名与资源名一致。 资源特点：代码短小、代码容易阅读、重点注释、方便扩展、样式美观、CSS+JS实现。 适用人群：前端从业职，新手小白，有网站开发能力对美工有所欠缺的后端工程师。

2024-08-09

JS+CSS案例：可适应上下布局和左右布局的菜单（含二级菜单）.zip
JS+CSS案例：可适应上下布局和左右布局的菜单（含二级菜单）。如题所述，这是一个可以通过前端页面的切换样式表改变菜单位置布局的一个案例。案例是非常时尚且实用的二级菜单。 --------------------------------------------------------------------------------------------------------- 需要看看效果的，可以移步到我的专栏去看看。文章名与资源名一致。 资源特点：代码短小、代码容易阅读、重点注释、方便扩展、样式美观、CSS+JS实现。 适用人群：前端从业职，新手小白，有网站开发能力对美工有所欠缺的后端工程师。

2024-08-07

CSS+js 做漂亮时钟.zip
CSS+js 做漂亮时钟。这是一个非常仿真的圆形时钟。通过js获取当前时间并调整时钟的指针旋转，完成时间的显示。样子也非常漂亮。 --------------------------------------------------------------------------------------------------------- 需要看看效果的，可以移步到我的专栏去看看。文章名与资源名一致。 资源特点：代码短小、代码容易阅读、重点注释、方便扩展、样式美观 适用人群：前端从业职，新手小白，有网站开发能力对美工有所欠缺的后端工程师。

2024-08-07

CSS技巧专栏一日一例：20 -纯CSS实现点击时会凹陷下去的按钮特效.zip
CSS技巧专栏一日一例：20 -纯CSS实现点击时会凹陷下去的按钮特效.zip --------------------------------------------------------------------------------------------------------- 需要看看效果的，可以移步到我的专栏去看看。文章名与资源名一致。 资源特点：代码短小、代码容易阅读、重点注释、方便扩展、样式美观、纯CSS实现。 适用人群：前端从业职，新手小白，有网站开发能力对美工有所欠缺的后端工程师。

2024-08-07

CSS技巧专栏一日一例：19 -纯CSS实现超酷的水晶按钮特效.zip
CSS技巧专栏一日一例：19 -纯CSS实现超酷的水晶按钮特效.zip --------------------------------------------------------------------------------------------------------- 需要看看效果的，可以移步到我的专栏去看看。文章名与资源名一致。 资源特点：代码短小、代码容易阅读、重点注释、方便扩展、样式美观、纯CSS实现。 适用人群：前端从业职，新手小白，有网站开发能力对美工有所欠缺的后端工程师。

2024-08-07

CSS技巧专栏一日一例：18 -纯CSS实现l背景流光溢彩变幻的按钮特效.zip
CSS技巧专栏一日一例：18 -纯CSS实现l背景流光溢彩变幻的按钮特效 --------------------------------------------------------------------------------------------------------- 需要看看效果的，可以移步到我的专栏去看看。文章名与资源名一致。 资源特点：代码短小、代码容易阅读、重点注释、方便扩展、样式美观、纯CSS实现。 适用人群：前端从业职，新手小白，有网站开发能力对美工有所欠缺的后端工程师。

2024-08-02

CSS技巧专栏一日一例：17 -纯CSS实现抖音故障风按钮特效.zip
需要看看效果的，可以移步到我的专栏去看看。文章名与资源名一致。 资源特点：代码短小、代码容易阅读、重点注释、方便扩展、样式美观、纯CSS实现。 适用人群：前端从业职，新手小白，有网站开发能力对美工有所欠缺的后端工程师。

2024-08-02

CSS换肤小demo.zip
资源说明：这是一个可以帮你实现网站换肤功能的小demo。它由javascript语言编写，使用了JQ库和JQ的cookie.js 。当用户前端选择了某个样式，它会在cookie中记录用户的选择，使他在下次登录时候，依然使用他最近一次选择的网站皮肤风格。你不需要关注更多的功能，只要把页面样式表准备好就可以了。非常简单实用。 资源特点：代码短小、代码容易阅读、重点注释、方便扩展、样式美观。 适用人群：前端从业职，新手小白，有网站开发能力对美工有所欠缺的后端工程师。

2024-08-02

CSS技巧专栏一日一例：16 -纯CSS实现黑色背景炫光按钮特效.zip
CSS技巧专栏一日一例：16 -纯CSS实现黑色背景炫光按钮特效需要看看效果的，可以移步到我的专栏去看看。 资源特点：代码短小、代码容易阅读、重点注释、方便扩展、样式美观、纯CSS实现。 适用人群：前端从业职，新手小白，有网站开发能力对美工有所欠缺的后端工程师。

2024-07-31

CSS技巧专栏一日一例：15 -纯CSS实现立体形状的按钮特效.zip
资源介绍：CSS技巧专栏一日一例：15 -纯CSS实现立体形状的按钮特效 ，需要看看效果的，可以移步到我的专栏去看看。 资源特点：代码短小、代码容易阅读、重点注释、方便扩展、样式美观、纯CSS实现。 适用人群：前端从业职，新手小白，有网站开发能力对美工有所欠缺的后端工程师。

2024-07-30

CSS技巧专栏：一日一例 14 -纯CSS实现模拟水波波动填充按钮特效.zip
资源介绍：CSS技巧专栏：一日一例 14 -纯CSS实现模拟水波波动填充按钮特效 资源特点：代码短小、代码容易阅读、重点注释、方便扩展、样式美观、纯CSS实现。 适用人群：前端从业职，新手小白，有网站开发能力对美工有所欠缺的后端工程师。 提示：------------------------------------------------------------------------------------------------------------ 文件夹里包含预览图，源码有注释。没有任何广告和病毒，可放心下载，学习，使用。

2024-07-29

从图床获取的html代码中提取IMG标签并提取图片复制到剪贴板.zip
资源介绍：本例使用原生js写的从图床获取的html代码中提取IMG标签并提取图片复制到剪贴板 资源特点：代码短小、代码容易阅读、重点注释、方便扩展、样式美观、。 适用人群：前端从业职，新手小白，有网站开发能力对美工有所欠缺的后端工程师。 提示：------------------------------------------------------------------------------------------------------------ 文件夹里包含预览图，源码有注释。没有任何广告和病毒，可放心下载，学习，使用。

2024-07-27

CSS技巧专栏：一日一例 13 -纯CSS实现晃晃悠悠背景不停滚动的按钮特效.zip
CSS技巧专栏：一日一例 13 -纯CSS实现晃晃悠悠背景不停滚动的按钮特效 资源介绍： 纯CSS实现的动态按钮特效，想知道按钮效果的朋友，可以去我的专栏查看。资源名就是文章名。 资源特点：代码短小、代码容易阅读、重点注释、方便扩展、样式美观、纯css实现。 适用人群：前端从业职，新手小白，有网站开发能力对美工有所欠缺的后端工程师。 提示：------------------------------------------------------------------------------------------------------------ 文件夹里包含预览图，源码有注释。没有任何广告和病毒，可放心下载，学习，使用。

2024-07-26

CSS技巧专栏每日一例：12-纯CSS实现边框上下交错的按钮特效.zip
CSS技巧专栏每日一例：12-纯CSS实现边框上下交错的按钮特效 资源介绍： 纯CSS实现的动态按钮特效，想知道按钮效果的朋友，可以去我的专栏查看。资源名就是文章名。 资源特点：代码短小、代码容易阅读、重点注释、方便扩展、样式美观、纯css实现。 适用人群：前端从业职，新手小白，有网站开发能力对美工有所欠缺的后端工程师。 提示：------------------------------------------------------------------------------------------------------------ 文件夹里包含预览图，源码有注释。没有任何广告和病毒，可放心下载，学习，使用。

2024-07-26

CSS+JS实现 用UL和li标签模拟select控件.zip
CSS+JS实现 用UL和li标签模拟select控件 资源介绍： 纯CSS实现的动态按钮特效，想知道按钮效果的朋友，可以去我的专栏查看。资源名就是文章名。在前端的工作中，经常会遇到 selcet控件，但我们用css来写它的样式时候，总是不那么令人满意，各种浏览器不兼容啊有没有？ 那么，我本篇文章就给大家提供一个思路：用UL 和li 模拟 select 控件，让我们用起来可以避免令人心烦的调整样式问题。 资源特点：代码短小、代码容易阅读、重点注释、方便扩展、样式美观、纯css实现。 适用人群：前端从业职，新手小白，有网站开发能力对美工有所欠缺的后端工程师。 提示：------------------------------------------------------------------------------------------------------------ 文件夹里包含预览图，源码有注释。没有任何广告和病毒，可放心下载，学习，使用。

2024-07-24

HTML+JS+CSS 实现精致的带二级菜单的头部菜单.zip
资源介绍：HTML+JS+CSS 实现精致的带二级菜单的头部菜单。 资源特点：代码短小、代码容易阅读、重点注释、方便扩展、样式美观、使用HTML+JS+CSS。 适用人群：前端从业职，新手小白，有网站开发能力对美工有所欠缺的后端工程师。 提示：------------------------------------------------------------------------------------------------------------ 文件夹里包含预览图，源码有注释。没有任何广告和病毒，可放心下载，学习，使用。

2024-07-24

HTML+ CSS+JS 实现全屏图片平铺+Lightbox效果,可查看前后（不依赖外部库）.zip
资源介绍：HTML+ CSS+JS 实现全屏图片平铺+Lightbox效果,可查看前后（不依赖外部库） 资源特点：代码短小、代码容易阅读、重点注释、方便扩展、样式美观、采用CSS+JS实现。 适用人群：前端从业职，新手小白，有网站开发能力对美工有所欠缺的后端工程师。 提示：------------------------------------------------------------------------------------------------------------ 文件夹里包含预览图，源码有注释。没有任何广告和病毒，可放心下载，学习，使用。

2024-07-24

CSS技巧专栏每日一例：8-纯CSS实现按钮边框对称包围特效.zip
CSS技巧专栏每日一例：8-纯CSS实现按钮边框对称包围特效 资源介绍： 纯CSS实现的动态按钮特效，想知道按钮效果的朋友，可以去我的专栏查看。资源名就是文章名。 资源特点：代码短小、代码容易阅读、重点注释、方便扩展、样式美观、纯css实现。 适用人群：前端从业职，新手小白，有网站开发能力对美工有所欠缺的后端工程师。 提示：------------------------------------------------------------------------------------------------------------ 文件夹里包含预览图，源码有注释。没有任何广告和病毒，可放心下载，学习，使用。

2024-07-24

CSS技巧专栏每日一例：11-纯CSS实现多彩渐变按钮特效.zip
CSS技巧专栏每日一例：11-纯CSS实现多彩渐变按钮特效 资源介绍： 纯CSS实现的动态按钮特效，想知道按钮效果的朋友，可以去我的专栏查看。资源名就是文章名。 资源特点：代码短小、代码容易阅读、重点注释、方便扩展、样式美观、纯css实现。 适用人群：前端从业职，新手小白，有网站开发能力对美工有所欠缺的后端工程师。 提示：------------------------------------------------------------------------------------------------------------ 文件夹里包含预览图，源码有注释。没有任何广告和病毒，可放心下载，学习，使用。

2024-07-24

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章？
取消 删除