html
文章平均质量分 69
zxf_CN
这个作者很懒,什么都没留下…
展开
-
可移动的侧边栏
还是老样子,学习 CodingStartup起码课的 实现可调侧栏 (点击传送门,可以观看 哔哩哔哩up 的视频),就来写文章了,虽然不是什么很好的文章,但我就是要写 ,哈哈哈。今天实现的效果是 可移动的侧栏,鼠标点击拖动,页面重新加载时,可以记录上一次调整的大小,让侧栏保持和上一次调整的大小一致 。以下是修改图:开始吧!关键代码:鼠标点击 mousedown;鼠标移动 mousemove;鼠标松开 mouseup;让页面元素,不能被鼠标选中的样式:user-select:none;转载 2021-05-14 09:11:29 · 758 阅读 · 0 评论 -
文字的背景划过效果
文章中的效果模仿的是 CodePen 网站中的效果: 传送门 。原理: 给 h1 的前面添加一个 伪元素,设置他的收缩比例为 0,收缩中心在 右下角 (right、 bottom; 在鼠标移上时,设置 收缩中心在 左下角 (left、 bottom ;并设置 伪元素 收缩比较为 1,还原为原来的样子; 这样,鼠标在移上时,伪元素 从左边进入,鼠标移出时,伪元素从 右边移出 。代码:<style> html { font-size:原创 2021-05-07 15:40:24 · 100 阅读 · 0 评论 -
翻转的卡片
前言:第二篇 CodingStartup起码课 的视频练习,这几天都在看他的视频,然后跟着做出效果来 。HTML+CSS 制作翻牌效果效果图:要点:使用 position 设置 2 个卡片重叠;正为 正面,反为 背面( transform: roateY(-180deg),待会旋转时,正 旋转 180,变为 背面, 反 旋转 0,回到 正面;设置 正 在上面(不是使用 z-index, 而是使用 backface-visibility: hidden 让处于背面的 div 隐藏 ;转载 2021-04-28 11:37:00 · 206 阅读 · 0 评论 -
塞雷的 汉堡按钮
引用:在哔哩哔哩有一个 up,他是 CodingStartup起码课,他是讲 粤语的哦;他的视频很多都是实现 页面 的一些功能,其中就包括这个 汉堡按钮,这是一个苹果官方网站的按钮 :苹果官方传送门 。这个是视频的地址,感兴趣的小伙伴,可以看看哦 使用 HTML+CSS 制作动态 Hamburger Menu ,不知道之前有没有小伙伴 分享了。下面的展示图 :现在...转载 2021-04-27 08:37:59 · 230 阅读 · 0 评论 -
script 标签的 async 和 defer 属性
提问:我们平时都是把 script 标签放到 body 的底部,这是为什么呢?回答: 因为 html 页面是从上而下进行渲染的,遇到 script 标签的话,会进入,去 下载 相应的资源,直到下载好后就会 执行, html 页面才开始继续向下执行,这样会拖慢 html 页面的渲染速度,还有如果一些脚本文件需要操作 DOM,但此时 html 页面还没有加载好,就会报错了;所以一般我们把 script 放到 body 的底部;(总结:放在底部是要等待 html 加载好后,才进行加载);提问: 那 ..原创 2020-12-28 14:47:07 · 372 阅读 · 0 评论 -
搭建静态的响应式个人官网
这几天看到了一个视频(哔哩哔哩 up: 峰华前端工程师)的一个教程,是做一个响应式的官网,用到了好多的 js 包,虽然说使用别人的包,但是效果是很好看的。项目所用到的库有: anime: 动画库,里面有各种动画实现,链接:http://www.animejs.cc/ 。 glide: 轮播图库, 链接:https://glidejs.com/ 。 isotope: 筛选排版库, 链接:https://isotope.metafizzy.co/ 。 scrollreveal:滚动动画库, 链接:h.原创 2020-12-03 16:45:49 · 899 阅读 · 0 评论 -
2020-08-24
你拿到了一张设计稿是基于 苹果6 的,他为(750px),他里面有个 div 有一个边框,量取为 1px,但在 移动端 的情况下,苹果6 的渲染像素 是 375(pc 端的一半),那么我们实际的 div 的边框就是要 0.5px,不是 1px 变宽了,而是实际上只需要 0.5px 而已 。原创 2020-08-24 09:58:32 · 134 阅读 · 0 评论