![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
样式
KatyLight
前端工程师
展开
-
【css】固定图片背景制作出高级效果
【css】固定图片背景制作出高级效果原创 2022-10-25 15:29:15 · 278 阅读 · 0 评论 -
【css3】神奇的3*3根据父节点宽度自适应的盒子
神奇的3*3盒子根据父节点自适应宽度。原创 2022-10-17 09:09:02 · 201 阅读 · 0 评论 -
【vue】图片加载动画效果
vue组件,图片加载时原创 2022-09-19 15:09:10 · 1663 阅读 · 0 评论 -
【css】加载中的光影特效
有的时候图片需要加载时间,速度慢的话图片可能会卡住,这个时候用这个css样式让其好看点。原创 2022-08-05 14:47:33 · 551 阅读 · 1 评论 -
【css】flex-shrink:0的方法让div横向滚动。
【css】flex-shrink:0的方法让div横向滚动。原创 2022-08-05 14:45:08 · 720 阅读 · 0 评论 -
【css】svg动画动态骷髅旋转html
这个是我在哪个网站上抄的笔记。原创 2022-08-02 10:59:01 · 193 阅读 · 0 评论 -
【css】动画彩色条纹。
【css】动画彩色条纹。原创 2022-08-02 10:55:23 · 225 阅读 · 0 评论 -
【css】子div会变形父div的外观以及一些奇怪的div交互效果。
奇怪交互效果一些合集原创 2022-08-02 10:52:39 · 193 阅读 · 0 评论 -
【css】在环境所有内容模糊下hover变得清晰。
【css】在环境所有内容模糊下hover变得清晰。原创 2022-08-02 10:50:03 · 173 阅读 · 0 评论 -
【css】字体比背景图片更加亮和发光图层偏移效果
文字饱和度滤镜原创 2022-08-02 10:47:19 · 149 阅读 · 0 评论 -
【css】纯css实现动态边框
【css】纯css实现动态边框原创 2022-08-02 10:42:39 · 1590 阅读 · 0 评论 -
【html】用iframe在服务器环境下跨域单张图片或者视频
【html】用iframe在服务器环境下跨域单张图片或者视频原创 2022-08-02 10:37:35 · 639 阅读 · 0 评论 -
【css】禁止拖拽选择图片
【css】禁止拖拽选择图片原创 2022-08-02 10:32:58 · 1227 阅读 · 1 评论 -
【css+js】彩色书签
唯美彩色的书签原创 2022-07-21 16:50:35 · 462 阅读 · 0 评论 -
【纯css】实现无限滚动循环组件,无js
无限滚动组件,无需js原创 2022-06-30 11:03:13 · 628 阅读 · 0 评论 -
【css】用渐变模拟边框制作四周切角的div
【css】用渐变模拟边框制作四周切角的div原创 2022-06-24 14:01:20 · 430 阅读 · 0 评论 -
【html】静态页面:订阅页
极简订阅页面。原创 2022-06-02 16:29:36 · 229 阅读 · 0 评论 -
【css】炫酷半边边框效果div
这个效果很炫酷,在hover的时候,线条会靠近文本中心。用到了两个伪类实现。原创 2022-06-02 15:23:56 · 1416 阅读 · 0 评论 -
【css】光雾边框动画
动画效果原创 2022-06-02 15:03:44 · 250 阅读 · 0 评论 -
【css】丝滑波浪按钮一半流动覆盖字体和背景颜色
丝滑波浪按钮原创 2022-06-02 14:56:10 · 293 阅读 · 0 评论 -
【css】图片的内容阴影处理
图片阴影为内容原创 2022-06-02 09:53:46 · 846 阅读 · 0 评论 -
【css】纯CSS的好看跳舞镜像发光加载动画
纯css的加载中样式原创 2022-06-01 17:57:55 · 202 阅读 · 0 评论 -
【css】简单大气css玻璃滤镜样式
按钮会比背景饱和度更高,点击时候更高。代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .back { background: inherit; filter: saturate(0); position:...原创 2022-05-31 14:23:21 · 261 阅读 · 0 评论 -
【css】手把手教你写QQ动画可爱气泡
我们在看到QQ商城里面的气泡发现很贵,买不起,怎么办呢?不需要钱,直接画一个Gif,然后再这么操作,一个css的动画气泡就出来了。原创 2022-02-26 14:05:44 · 760 阅读 · 0 评论 -
【css】伪类实现幻影方块按钮样式
伪类实现,无JS。在鼠标放上去的时候,会出现一个水波一样的幻影。原创 2022-02-26 10:45:26 · 184 阅读 · 0 评论 -
【css】仅用伪类实现闪光玻璃按钮
仅用伪类实现闪光玻璃按钮,移植方便!原创 2022-02-26 10:08:06 · 404 阅读 · 0 评论 -
【纯css】实现线条幻影按钮
仅仅需要添加类名,无需任何JS即可实现!原创 2022-02-25 16:01:18 · 83 阅读 · 0 评论 -
【js组件】上条排队提示
按照某些游戏的顶部显示成就,但是同时多个事件不会同时显示,而是派对提示,每个停留1s,添加的时候要等前面的队列完成。以下是下载地址,切割一下即可使用:KatyLightMsgSingle/index.html · KatyLight/组件库 - Gitee.comhttps://gitee.com/KatyLight/Tools/blob/master/KatyLightMsgSingle/index.html...原创 2022-02-24 10:02:53 · 3282 阅读 · 0 评论 -
【JS组件库】拖拽排序组件
使用原生的drageable字段以及ondrag和ondrop的效果导致的透明看不清楚无法捕获位置。写的模拟方法可以解决上述问题。竖向排列依然可以替换。原创 2022-01-24 16:16:29 · 645 阅读 · 0 评论 -
Canvas随机冒泡背景
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> @font-face { } body{ padding: 0; margin: 0; background-color: black; col...原创 2022-01-19 16:58:58 · 332 阅读 · 0 评论 -
vue渐变加载条
可以暂停进度条.vue<template> <div :class="['pro',active?'':'loading']"> <div class="cube"></div> </div></template><script>export default { name: "loading", props:['active']}</script><...原创 2021-12-28 15:01:34 · 244 阅读 · 0 评论 -
纯css炫酷动态加载条
模仿windows风格的动态加载条,目前颜色更宽度是写死的,没有用clac的原因是因为它会跑得太原获取的100%是窗口宽度而不是父div宽度。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .pro{ backgrou..原创 2021-12-28 14:19:56 · 572 阅读 · 0 评论