码农-编程小子

2023年7月19日

摘要： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document< 阅读全文

posted @ 2023-07-19 02:12 码农-编程小子阅读(4) 评论(0) 推荐(0) 编辑

css3 loading 效果2

摘要：使用了css自定义属性var <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> < 阅读全文

posted @ 2023-07-19 01:48 码农-编程小子阅读(7) 评论(0) 推荐(0) 编辑

2023年7月18日

loading

摘要： <div class="loading"> <div class="clockwise"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> < 阅读全文

posted @ 2023-07-18 18:01 码农-编程小子阅读(6) 评论(0) 推荐(0) 编辑

2023年7月17日

动画时间函数-非线性函数step

摘要： steps(n, <jumpterm>) 按照 n 个定格在过渡中显示动画迭代，每个定格等长时间显示。例如，如果 n 为 5，则有 5 个步骤。动画是否在 0%、20%、40%、60% 和 80% 处或 20%、40%、60%、80% 和 100% 处暂停，或者在动画的 0% 和 100% 之间设置阅读全文

posted @ 2023-07-17 01:17 码农-编程小子阅读(63) 评论(0) 推荐(0) 编辑

认识css动画相关属性animation

摘要： transtion属性需要触发条件，比如hover animation属性可以立即执行 transform属性不是动画，但是对动画起到至关重要的作用过渡属性transtion <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF 阅读全文

posted @ 2023-07-17 00:20 码农-编程小子阅读(14) 评论(0) 推荐(0) 编辑

2023年7月9日

最简单模拟swiper功通的代码

摘要： <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">slider1</div> <div class="swiper-slide">slider2</div> <div class 阅读全文

posted @ 2023-07-09 18:26 码农-编程小子阅读(34) 评论(0) 推荐(0) 编辑

2023年7月3日

异形的slide

摘要：居中幻灯片。设定为true时，当前的active slide 会居中，而不是默认状态下的居左。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Swiper demo</title> <meta name= 阅读全文

posted @ 2023-07-03 00:15 码农-编程小子阅读(210) 评论(0) 推荐(0) 编辑

2022年7月26日

实现自定义react hooks

摘要： 1:实现简版的 useState 每次调用顺序索引必须一样返回初始状态变量，和更改状态方法调用更改状态方法，更新状态并重新渲染let lastStates = []let index;function useState(initValue) { let state = lastStates[inde 阅读全文

posted @ 2022-07-26 09:51 码农-编程小子阅读(101) 评论(0) 推荐(0) 编辑

2022年6月28日

实现简版redux和中件间

摘要： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content 阅读全文

posted @ 2022-06-28 15:24 码农-编程小子阅读(11) 评论(0) 推荐(0) 编辑

2022年6月23日

自定义reducer,pipe,compose函数

摘要： Array的reducer方法; //1:自定義reducer函數 Array.prototype.myReduce = function ( fn = (pre, curr, index, arr) => {}, initValue ) { let acc; for (let i = 0; i < 阅读全文

posted @ 2022-06-23 11:03 码农-编程小子阅读(25) 评论(0) 推荐(0) 编辑