- 博客(66)
- 收藏
- 关注
原创 CSS技巧专栏:一日一例 21 -纯CSS实现拟真电器按钮特效
上面是按钮本体层的变化,它改变了文字颜色,按钮背景色变亮些,然后给按钮增加了投影。上述样式表,修改了文字颜色,让它稍微比鼠标悬停状态更暗些,然后增加了蓝色的文字阴影,模拟了文字外发光的效果。黑色的层,包在按钮外面,当鼠标悬浮到按钮上时,它的颜色变为蓝色,常态下还有颜色稍深一点点的投影,也放在这个层。首先是按钮本体层,它包括按钮文字,鼠标悬浮状态时候的按钮内发光也写在按钮本体上,按钮按下去时候的内阴影也可以写在本体上。到此,这个按钮的全部样式就完成了。这时候,按钮就变化成了我们看到的常态的按钮样式了。
2024-08-09 20:47:41
980
原创 JS+CSS案例:实时获取人民币与美元汇率+CNY与USD互换+单位转换成万元和亿元的汇率计算器
自动获取当前汇率,输入美元(USD)输出 人民币(CNY),点击文本框后的货币单位,可以交换兑换比率。自动处理数字输入:文本框允许直接粘帖科学计数法形式的数字(自动过滤空格,逗号及其他字符),如:2,923,706,026 或 2 923 706 026 这样的数字。对转换后的以元为单位的数值进行单位换算,可以换算为万元和亿元为单位的两种数值。
2024-08-09 20:26:21
268
原创 CSS技巧专栏:一日一例 20-纯CSS实现点击会凹陷的按钮
这是一个非常简单但实用的按钮,乍一看就是个平面,当鼠标移动上去时候,按钮显示白色的圆形按钮。当按钮点下去时候,出现按钮凹陷的效果。
2024-08-07 22:35:34
348
原创 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
1218
原创 CSS技巧专栏:一日一例 19 -纯CSS实现超酷的水晶按钮特效
我们观察一下按钮动作,鼠标移动到按钮上时,发生了两个变化:1.按钮本体向下滑动了几个像素。但按钮的高光没有动。2.按钮下面的深色投影,在按钮向下移动的时候,阴影没有了。我们可以把按钮本体那个投影层的透明度降低看看效果:
2024-08-06 21:02:26
1173
原创 JS+CSS案例:JS+CSS 实现漂亮时尚的样式表切换(换肤)功能
在页面前端给用户提供网站换肤的选择,并利用cookie记录用户访问网站时候选择的网站风格(样式表文件)。
2024-08-02 18:32:53
516
原创 CSS技巧专栏:一日一例 18 -纯CSS实现背景浮光掠影的按钮特效
按钮是好几种颜色的背景色组成的,使用css的话,应该会有几个不同颜色的层,在按钮后面移动。每个层互相叠加,大概还会用到图片混合模式产生了更多的叠加的颜色,然后边缘过渡的话,就是用模糊滤镜了。
2024-08-02 16:40:39
1034
原创 JS+CSS案例:实现点击展开隐藏答案的帮助列表
要实现点击一个问题后关闭其他所有被展开的答案,你需要在JavaScript中添加一些逻辑来跟踪当前展开的答案,并在需要时关闭它们。我们首先通过querySelectorAll获取了所有的问题和答案元素,并将它们分别存储在questions和answers数组中。然后,我们为每个问题元素添加了一个点击事件监听器。在监听器的回调函数中,我们首先遍历所有的答案元素,并将它们的display样式设置为'none'来关闭它们。之后,我们找到当前被点击问题元素的下一个元素(即答案),并将其display样式设置为'bl
2024-08-01 18:41:52
248
原创 CSS技巧专栏:一日一例 16 纯CSS实现黑色背景炫光按钮特效
按钮层:放置文字,定位按钮,在最上面。背景层:黑色,用于遮挡彩色背景层,在中间。 用伪元素 after 来实现底层:彩色渐变层,在下面。用伪元素 before 来实现
2024-07-31 17:59:51
620
原创 前端入门知识分享:HTML 页面中 head 标签之间的代码详解
head元素内的内容不会直接显示在网页上,但会影响网页的渲染和功能。为了提高页面加载速度,通常建议将CSS样式表放在使用meta标签可以优化搜索引擎对网页的索引和理解。
2024-07-31 17:50:06
1109
原创 JS小应用:从图床获取的html代码中提取IMG标签并提取图片复制到剪贴板
自己做站长,为了节省银子,难免要用到图床。有的图床可以直接给你URL,这当然是最好的情况:而有的图床,却禁用了鼠标右键,甚至复制一张图片地址的机会都不给(偏偏它其他的功能还挺好,你又舍不得放弃它),它给的:这时候就比较烦了。所以,我自己写了一段js来把自己解放出来。
2024-07-30 17:21:05
284
原创 CSS技巧专栏:一日一例 15 纯CSS写立体按钮特效
鼠标移动到按钮上,按钮本体要升高起来,但按钮的阴影不要升高。毕竟,你见过哪个人跳起来的时候,影子也会跟着跳起来了呢 😊,但位移是写在按钮本体上的,所以,按钮的阴影在这个动画里,要同时调整与本体的距离。按钮升高后,按钮的阴影需要看起来变小、边缘更模糊,这才符合现实。至于按钮改变颜色什么的,那就不是个事儿了。
2024-07-30 17:12:34
827
原创 CSS技巧专栏:一日一例 14-纯CSS实现模拟水波波动填充按钮特效
我们先做复杂的水波滚动效果,先修改一下HTML,给按钮增加一个 行内元素 span,它会有1个本体和两个伪元素层,用来实现上面我们说过的水波波动效果。
2024-07-29 19:45:00
309
原创 前端必修技能:高手进阶核心知识分享 - css盒的before、after和子元素的层叠关系解析及应用
一个盒子 它的 ::before伪类在最底层, ::after 伪元素在最上层, 其所有子元素在中间叠放。盒子的 子元素堆叠关系,按照书写顺序自下而上排序:先写的叠放在下面,后写的在上面。父元素在最下面。
2024-07-29 15:16:06
1310
原创 CSS技巧专栏:一日一例 13 -纯CSS实现晃晃悠悠背景不停滚动的按钮特效
间隔的灰色条和白色的条纹布滚动效果,以及鼠标移动上去后,变成了醒目的荧光绿。仔细观察发现,那个滚动的条纹布并没有超过按钮上灰色的边框,而这个按钮,居然在灰色的边框外面还有一层白色的边框。那么,我们把这些样式分解一下:两个边框,可以都写在按钮上,一个用真的边框border,一个用box-shadow来模拟。三个动画:条纹滚动动画,采用背景色渐变位移动画,绑定在after层上。像个摇头摆尾的小狗狗一样时不时晃一晃的动画,绑定在按钮上。响应鼠标悬浮:条纹灰色变荧光绿色,可以用颜色变化,也可以用灰度滤镜。
2024-07-26 21:01:28
856
原创 CSS技巧专栏:一日一例 12 -纯CSS实现边框上下交错的按钮特效
虽说这按钮给人的感觉就是上下两个边框交错变换了位置,但我们都知道border是没法移动的。那么这个按钮是如何实现的呢?你想到了吗?没错,还是伪元素。利用before和after,可以绘制两个蓝色的边,然后,只要让他们动起来就行了。
2024-07-25 18:01:17
799
原创 WordPress 后台开发技巧:向文章发布页右侧添加自定义菜单项
这个案例向你介绍了如何在文章发布页的右侧边栏增加一个新的自定义菜单项。具体用它实现什么功能,就看你的需要了
2024-07-25 17:20:56
297
原创 玩转CSS:用ul li +JS 模拟select,避坑浏览器不兼容。
在前端的工作中,经常会遇到 selcet控件,但我们用css来写它的样式时候,总是不那么令人满意,各种浏览器不兼容啊有没有?那么,我本篇文章就给大家提供一个思路:用UL 和li 模拟 select 控件,让我们用起来可以避免令人心烦的调整样式问题。
2024-07-24 20:18:42
472
原创 CSS技巧专栏:一日一例 11 -纯CSS实现多彩渐变按钮系列特效
这是一个系列的按钮,它们具有共同的特点:底层按钮层,具有一个彩色的渐变边框,上层是依据hover效果需要,可以是渐变,可以时白色。鼠标hover效果都是一样的:背景色位移或变化。本篇文章仅介绍第三个按钮的做法,其他的做法,我会写在源文件里,但不写在本篇里。
2024-07-24 20:05:33
644
原创 CSS技巧专栏:一日一例 10 -纯CSS实现表爱心的小可爱按钮特效
这个按钮的常态效果有一个 为爱发电一样的光影扩散的效果,这个效果我考虑可以使用 动画 + 阴影 实现。当鼠标移到按钮上,两边突然滑出两个翅膀和翅膀上一样可爱的闪动的表白文字,这个可以使用before和after两个伪元素来实现。
2024-07-22 16:16:40
759
原创 前端必修技能:高手进阶核心知识分享 - CSS 选择器
CSS(层叠样式表)提供了多种选择器,用于选择要应用样式的 HTML 元素。CSS 选择器用于选择你想要的元素的样式的模式。看了上面的图,你发现就算你不知道选择器名字叫什么,属于哪一种,但不知不觉的,你其实已经习惯了其中的很多种选择器的使用。嘿嘿,这就是我现在的状态。看了这图之后,你是不是有一种感慨呢?选择器太多了,到底该怎么用呢?
2024-07-22 16:02:58
931
原创 前端必修技能:高手进阶核心知识分享 - CSS伪类和伪元素
伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到,这也是为什么他们一个称为伪类,一个称为伪元素的原因。伪类选择器和伪元素选择器虽然不是真正的元素,但它们在CSS中扮演着极其重要的角色。了解并熟练运用它们,可以让你的网页更加生动、互动性更强,同时也能更好地控制页面的布局和内容的表现。
2024-07-19 22:22:29
1039
原创 CSS技巧专栏:一日一例 9 -纯CSS实现按钮边框依次填充特效
在这个按钮的样式表里没有写border,而是利用box-shadow内阴影属性弄模拟了边框。其实使用border也是可以实现同样效果的,只是要稍微调整一下before 和 after 层的位置。接着再写用来响应鼠标悬停动画的边框,还是老办法,利用它的 before 和 after 两个伪元素。
2024-07-19 17:24:07
1111
原创 给Wordpress评论列表的用户昵称增加个性化角色称号和注册年数
这篇文章介绍了如何在 wordpress 默认的评论列表的用户名后面增加:个性化用户角色(基于调用用户组的代码)和增加 用户注册年数 的功能。
2024-07-18 18:24:15
449
原创 CSS技巧专栏:一日一例 8 - 纯CSS利用mask属性实现按钮边框对称包围特效
在前一篇文章的最后,给各位看官留了一个作业,如上图所示。本篇文章,我们来公布一下它的源码。
2024-07-18 17:41:41
717
原创 给Wordpress添加评分功能到评论表单
在前端页面展示分值时,从后台获取的是一个数值。但并不是小星星。通常做法是使用js获取用户的评分数值,然后使用js+CSS实现输出与分值相等的五角星数量。但是:能用CSS解决的问题就不要用JS。所以,在这里我使用了 css 的自定义属性 data-* 直接获取了每个评价的评分。然后利用CSS的伪类,对应输出不同数量的五角星。完美躲过了js。
2024-07-17 16:33:07
345
原创 CSS技巧专栏:一日一例 7 - 纯CSS实现炫光边框按钮特效
相信你可能已经在网络见过类似这样的流光的按钮,在羡慕别人做的按钮这么酷的时候,你有没有扒一下它的源代码的冲动?或者你当时有点冲动,却转眼忘却了。今天,刚巧,你又看到它了,今天跟我一起扒一扒它的源代码。左边按钮分析:1. 圆角按钮的光线效果,这个稍微费劲些。难点:动画层的路径移动2. 倒影。
2024-07-17 16:26:33
1595
原创 CSS技巧专栏:一日一例 6 - 纯CSS实现粉红色跳出来的立体按钮特效
我说它简单,因为它实际上并没有使用什么特别的动画效果,只是几个简单的动画组合:利用伪类before和after,制作按钮后面两个透明的粉色填充层,左右移动。给文字层单独增加span,以实现它跳出来的旋转动画。利用多层文字阴影,实现文字的立体外描边效果。
2024-07-16 16:55:43
934
原创 JS+CSS特效:HTML+JS+CSS 实现精致的带二级菜单的头部菜单
既然a标签把它填满导致了原来的内圆角没有了,而去掉了a标签的背景色依然没有出现圆角。那么我不妨把第一行的两个菜单项和最后一行的两个菜单项写个圆角。这里利用子选择器实现。为了避免菜单项数量改变而导致样式的变化,需要把样式写在最后两个子列表项上,而不是第7和第8上面。所以,在最后两个列表项上,我们使用的 nth-last-child 而不是 nth-child。
2024-07-16 16:43:05
855
原创 WordPress 主题技巧:给文章页增加“谁来过”模块。
给文章页增加一个“谁对本电影感兴趣”的功能模块可能会比较有趣,这个功能有点类似于‘足迹’的感觉,用户可以通过这个功能,发现与他兴趣相投的人。
2024-07-12 22:49:21
250
原创 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
830
原创 CSS技巧专栏:一日一例 4.纯CSS实现两款流光溢彩的酷炫按钮特效
经过上一篇的案例:CSS技巧专栏:一日一例 3.纯CSS实现炫酷多彩按钮特效 我们已经知道,只要给彩色渐变增加blur滤镜,我们就可以得到一个扩散的模糊的炫彩的光。按照昨天的思路,我们就可以实现炫光效果:
2024-07-11 22:14:24
1035
原创 前端必修技能:高手进阶核心知识分享 - 三万字帮你搞定CSS动画(形变动画、过渡动画、关键帧动画)
transform-Origin属性允许您更改转换元素的位置。2D转换元素可以改变元素的X和Y轴。3D转换元素,还可以更改元素的Z轴。注意: 使用此属性必须先使用transform属性。transition 属性允许你在元素状态改变时控制过渡效果。它可以让你在元素从一种样式变换到另一种样式时产生平滑的过渡效果,比如从一种颜色渐变到另一种颜色,或者从隐藏到显示。transition-property: 指定要过渡的 CSS 属性的名称。例如,color、background-color 等。
2024-07-11 18:23:29
1513
原创 CSS技巧专栏:一日一例 3.纯CSS实现炫酷多彩按钮特效
CSS的 box-shadow 属性可以用来给一个元素添加一个或多个阴影效果。如果你想要给一个div元素添加多种颜色的投影,你可以通过在box-shadow属性中用逗号分隔多个值对来实现。上面代码,我们分别给按钮增加了红,黄,蓝,绿四种颜色的投影,并且让投影扩散范围增大,我们看看效果是不是我们想要的。在浏览器中刷新我们的按钮页面,把鼠标移动到按钮上,我们得到了这样的按钮效果:
2024-07-10 23:34:24
1301
原创 前端入门知识分享:如何在HTML或CSS文件中引用CSS文件。
行内样式:使用 HTML 标签的 style 属性定义 CSS 样式;内嵌样式:使用 style 标签在 HTML 文档头部( 通常在 head 之间)定义 CSS 样式;链接式:使用 link 标签引入外部 CSS 样式表文件。导入式:使用 @import 命令导入外部 CSS 样式表文件。
2024-07-09 19:08:21
845
原创 CSS技巧专栏:一日一例 2.纯CSS实现 多彩边框按钮特效
content:attr(alt); 通过attr函数 获取本标签的alt值,之所以要这么做,是因为after生成的填充色的图层,会覆盖到按钮上面,导致按钮上写的文字不可见。所以,我们要通过content来输出按钮上的文字。这样写,也是为了让样式和内容脱离。这样我们在html的代码上,给 button 控件写上 alt文字,就可以通过css获取这个文字并输出了。这样,也方便后台程序通过程序动态修改 alt标签输出 的文字,达到修改按钮文字的目标,而不需要去手动修改css文件中的文字。
2024-07-09 18:45:02
953
原创 CSS技巧专栏:一日一例 1.纯CSS实现 会讨好的热情按钮 特效
calc()函数:动态计算长度值需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);任何长度值都可以使用calc()函数进行计算;calc()函数支持 "+", "-", "*", "/" 运算;calc()函数使用标准的数学运算优先级规则;
2024-07-08 20:07:51
1364
CSS技巧专栏每日一例:6-纯CSS实现暧昧的X按钮特效.zip
2024-07-24
CSS技巧专栏每日一例:9-纯CSS实现按钮边框依次填充特效.zip
2024-07-24
CSS技巧专栏每日一例:7-纯CSS实现两个炫光边框按钮特效.zip
2024-07-24
CSS技巧专栏每日一例:5-纯CSS实现背景色从四周向中心填充的按钮特效.zip
2024-07-24
CSS技巧专栏每日一例:10-纯CSS实现伸缩按钮特效.zip
2024-07-24
CSS技巧专栏每日一例:3 纯CSS实现炫酷多彩按钮的特效.zip
2024-07-24
CSS技巧专栏每日一例:4-纯CSS实现两个流光溢彩的酷炫按钮特效.zip
2024-07-24
CSS技巧专栏每日一例:2-纯CSS实现多彩边框按钮的特效.zip
2024-07-24
CSS技巧专栏每日一例:1-CSS实现会讨好的热情按钮.zip
2024-07-24
CSS技巧:用css绘制漂亮的徽章缎带图形.zip
2024-07-06
实用代码:HTML+JS+CSS实现的全屏自动切换背景的登录窗与注册窗翻转切换 源码下载
2024-07-03
CSS太牛了!流光溢彩,极度惊艳!利用伪类before和CSS动画实现的非常酷炫的按钮效果.zip
2024-07-01
我有一枚淘气的金币:纯CSS实现金币缩放、跳跃、翻转、闪现、旋转动画.zip
2024-07-01
基于JQuery实现电梯导航特效+页面滚动一定高度后固定头部导航.zip
2024-06-29
纯CSS实现的很酷的光圈沿着按钮轮廓旋绕的按钮.zip
2024-06-29
JS实现拖曳排序效果并输出新的排序结果
2024-06-28
html+css+js实现导航栏色块跟随滑动+点击后增加样式
2024-06-28
JQ+CSS实现鼠标上移显示更多内容的排行列表
2024-06-26
纯CSS仿动态flash广告效果(可通过css随时修改底图,文字动画,颜色蒙版等,非常优于表现和易于修改)
2024-06-26
CSS技巧专栏一日一例:21 -纯CSS实现拟真电器按钮特效.zip
2024-08-09
JS+CSS案例:实时获取人民币与美元汇率+CNY与USD互换+单位转换成万元和亿元的汇率计算器
2024-08-09
JS+CSS案例:可适应上下布局和左右布局的菜单(含二级菜单).zip
2024-08-07
CSS+js 做漂亮时钟.zip
2024-08-07
CSS技巧专栏一日一例:20 -纯CSS实现点击时会凹陷下去的按钮特效.zip
2024-08-07
CSS技巧专栏一日一例:19 -纯CSS实现超酷的水晶按钮特效.zip
2024-08-07
CSS技巧专栏一日一例:18 -纯CSS实现l背景流光溢彩变幻的按钮特效.zip
2024-08-02
CSS技巧专栏一日一例:17 -纯CSS实现抖音故障风按钮特效.zip
2024-08-02
CSS换肤小demo.zip
2024-08-02
CSS技巧专栏一日一例:16 -纯CSS实现黑色背景炫光按钮特效.zip
2024-07-31
CSS技巧专栏一日一例:15 -纯CSS实现立体形状的按钮特效.zip
2024-07-30
CSS技巧专栏:一日一例 14 -纯CSS实现模拟水波波动填充按钮特效.zip
2024-07-29
从图床获取的html代码中提取IMG标签并提取图片复制到剪贴板.zip
2024-07-27
CSS技巧专栏:一日一例 13 -纯CSS实现晃晃悠悠背景不停滚动的按钮特效.zip
2024-07-26
CSS技巧专栏每日一例:12-纯CSS实现边框上下交错的按钮特效.zip
2024-07-26
CSS+JS实现 用UL和li标签模拟select控件.zip
2024-07-24
HTML+JS+CSS 实现精致的带二级菜单的头部菜单.zip
2024-07-24
HTML+ CSS+JS 实现全屏图片平铺+Lightbox效果,可查看前后(不依赖外部库).zip
2024-07-24
CSS技巧专栏每日一例:8-纯CSS实现按钮边框对称包围特效.zip
2024-07-24
CSS技巧专栏每日一例:11-纯CSS实现多彩渐变按钮特效.zip
2024-07-24
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人