- 博客(7)
- 收藏
- 关注
RSS订阅原创 css特效：clip-path
直到上一个特效发布后我才注意到这个功能强大的一个clip-path属性，但是在这里我就不多介绍了，感兴趣可以自行搜索其他博主关于clip-path的文章。这次更新内容主要在于耳朵效果和全新的波纹效果，这些新的效果全是使用clip-path属性制作的最新版本资源视频clip新增的类选择器pulseClip：所有使用clip-path制作小耳朵的新样式使用的类，不使用其他选择器默认直边心形clipStar：五角星clipSixStar：六角星clipDownArrow：下箭头。
2023-04-07 20:19:35
1384
原创 css特效2：流光边框
作为流光系列之一，流光边框和流光背景只有在::after上设置存在区别，所以本文中将不会有与流光背景相同的代码，如果您还没有看流光背景时怎么做的话，建议先看我前面的文章。可以看到与之前流光背景的区别就在于按钮内部的颜色并不是流光效果，那是因为我们在按钮上又添加了伪元素::after，遮住了在::before中的流光效果。.streamerLightBorder选择器就是流光边框需要单独用到的代码，加上上一篇的全部代码就会显示出流光边框的效果。css特效1：流光背景？好了，下面我们看一下效果图。
2022-12-15 18:49:20
2269
原创 css特效：流光背景+动态边框+滑动效果+聚集效果+小耳朵+阴影流光效果
好了，从视频中我们能看到每种效果都带有三个不同样式展示，这三种样式是制作的三种默认主题：确定、取消、删除，匹配所有效果。同时镜面反光效果由于兼容性问题，可以进行单独设置（视频中都带有镜面反光）。
2022-12-14 20:33:26
7690
3
原创 css特效1：流光背景？我不允许你还不会
不过因为添加了伪元素，导致标签内部的文字被覆盖掉了，无法显示，因此设置自定义标签，让文本内容始终悬浮于伪元素之上。这时候鼠标移入就会发现背景颜色动起来了，但是并没有光影效果，所以我们接下来设置一个伪元素。这里我在button里添加一个自定义标签的原因之后再说。话不多说先贴图（忽略页面杂乱的背景）同样让鼠标移入后伪元素也能触发动画。然后让鼠标移动上去后背景移动起来。首先设置一个基本按钮样式。现在内容已经能正常显示了。
2022-12-14 19:08:04
2275
1
原创 使用Animate让元素移动
Animate是封装类似于Jq的animate效果，操作简单，对于只需要对页面进行简单动画处理比较友好。Animate可以操作元素的left，top，witdh，height，opacity属性
2022-11-29 13:21:09
1088
原创 js实现滑块拖动更改div颜色
思路：首先既然是滑块拖动，那就必须要先把小滑块做出来。接着我们可以通过设置三条滑块，对应颜色中的rgb，然后通过js设置div的background-color就可以了。而滑块拖动本质上来说就是div的拖动，话不多说直接上代码：let line = 0; //确定鼠标按下，防止滑块在鼠标未按下时移走let oldB = 0; //滑块的原位置let oldM = 0; //鼠标的原位置let oObj ; //获取滑块对象（原谅我起变量名字随意了一点）//鼠标
2022-02-15 02:26:47
1863
原创 js实现div拖动
大致思路：鼠标按下并且移动的时候，使得鼠标点击的div跟随鼠标移动，松开按键或者鼠标移开div时，div不跟随移动。而图层跟随鼠标移动只需要计算出鼠标的移动位置相对于鼠标按下时的原位置，就可以得到偏移量，再用图层的原位置减去偏移量，就是图层的移动后位置。所以大致分为三个步骤。首先，鼠标的按下事件let flag = 0; //确定该图层是否鼠标处于按下状态let oldMX = 0 //鼠标的原X位置let oldMY = 0 //鼠标的原Y...
2022-02-13 11:19:32
4107
轻量级的js颜色处理工具
2023-07-26
鼠标点击移动等触发事件之后的动画特效效果
2023-04-19
css按钮、div等元素的流光+边框+滑动+文字覆盖+聚焦效果+水波样式
2023-04-07
css按钮、div等元素的流光+边框+滑动+文字覆盖+聚焦效果
2022-12-14
元素移动动画Animate.js
2022-11-28
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人