10 2023 档案

摘要:效果: 代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=devic 阅读全文
posted @ 2023-10-19 10:58 芝麻小仙女 阅读(115) 评论(0) 推荐(0) 编辑
摘要:记录一个很酷的动画,效果如图: 是基于html+css3+anime.js实现的,看了眼代码,其实是默认文字的div中定位了几个相同的文字块,利用clip-path这个属性去裁剪展示其中的一部分,用于展示故障的效果,动画则是使用anime.js去循环改变X与Y轴的位置,同时调整绘制的颜色,demo代 阅读全文
posted @ 2023-10-19 10:08 芝麻小仙女 阅读(99) 评论(0) 推荐(0) 编辑
摘要:第一种 俺写在index.html中的head标签与body标签中间(2560是pc端设计稿的宽度): <script> //设置 webview 字体大小不受系统修改而改变 (function () { if (window.HiSpaceObject) { window.HiSpaceObjec 阅读全文
posted @ 2023-10-13 09:26 芝麻小仙女 阅读(322) 评论(0) 推荐(1) 编辑
摘要:效果(进入预约里程碑模块后,小人从第一个台阶逐个闪烁出现在当前预约等级之前的台阶并消失,最终停留在当前预约等级的台阶上): 虽然很low但是!就是这么设计的!于是在原本静态的代码上稍加了些修改(为什么,为什么,想问天问大地) 首先是台阶部分的代码: <div :class="$style.reser 阅读全文
posted @ 2023-10-12 17:57 芝麻小仙女 阅读(216) 评论(0) 推荐(0) 编辑
摘要:<span :class="[$style.wxCode, isShow && $style['show']]" @touchstart="touchStart()" @touchend="touchEnd()" ></span> ps.span元素为图片元素,我这里把图片设置为元素背景了,可以直接 阅读全文
posted @ 2023-10-08 16:47 芝麻小仙女 阅读(472) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示