记录一个多行文本收起展开demo
摘要：最近的一个需求，当文本过多时显示省略，并显示展开按钮，点击展开，展开后可收起。 本demo参考：https://juejin.cn/post/6963904955262435336?utm_source=gold_browser_extension 本帖子只做个人使用记录，没有发布到首页 掘金小伙伴
阅读全文
posted @ 2021-05-21 17:57
随笔分类 - CSS
锚点定位向下偏移
摘要：正常写一个锚点定位的元素，点击锚点元素，默认是到页面的顶部，但是如果顶部有fixed定位，就会被遮住，这时就希望锚点区域距离上面有一个距离。 因此就需要使用css或者js来让锚点定位向下偏移。 方法一、 使用 margin-top 和 padding-top 来解决。 利用padding 将定位向下
阅读全文
posted @ 2019-06-26 10:13
css实现文字渐变
摘要：css文件渐变虽然兼容性比较差，但是用在移动端和chrome中还是没有问题的。 实现文件渐变的方法有两种 1. 使用 background 的属性 2. 使用 mask 属性 方式一、 效果如下 代码也是非常简单： background: liner-gradient(to right, red,
阅读全文
posted @ 2019-06-20 18:43
css多行省略
摘要：单行省略就不用说了，用css实现非常简单，兼容性还非常好。但是多行省略一直都是前端的痛点，在css3之前，可以用js去算两行能放多少个字，把多余的字用 。。。 代替，且不说好不好，万一哪天PM说要改成3行，UI说这个字体改大一点，又得去算一遍，可谓是苦不堪言。 好在有css3，css3提供了实现完美
阅读全文
posted @ 2019-04-28 16:25
如何用原生js开发一个Chrome扩展程序
摘要：原文地址：How to Build a Simple Chrome Extension in Vanilla JavaScript 开发一个Chrome扩展程序非常简单，只需要使用原生的js就可以完成，在本文中，我将在几分钟内引导你完成一个简单的扩展程序 关于Chrome扩展程序 Chrome 扩展
阅读全文
posted @ 2018-09-13 10:47
CSS背景渐变支持transition过渡效果
摘要：background-image 是不支持 CSS3 的transition过渡效果的，而CSS3 gradient 渐变作为背景图片存在的时候， 下面的CSS不会有过渡效果 当鼠标hover划过的时候，会发现变化很唐突，一点过渡效果都没有，你可以 点击这里查看 那么，如果我们希望实现当hover的
阅读全文
posted @ 2018-08-22 10:52
深入理解 content 计数器
摘要：计数器可以说是content的重点, 因为此功能非常强大, 实用, 并且不具有可替代性, 甚至可以实现连JavaScript都不好实现的效果. 所谓css计数器效果, 就是使用CSS代码实现随元素的数目增多, 数值也跟着变大的效果, 有点类似于<ol>, 但是比ol更灵活 CSS计数器有两个属性 (
阅读全文
posted @ 2018-07-05 15:17
touch-action 解决移动端300ms延迟问题
摘要：CSS3 新属性, touch-action: manipulation; 可以有效的解决移动端300ms延迟的问题 移动端300ms延迟问题一直都是h5APP的痛点, 有很多库或者方法都可以解决, 比如用onstouchstart和ontouchend已经 ontouchmove来实现点击, 这样
阅读全文
posted @ 2018-04-24 19:49
解决IOS移动端 Safari浏览器 onclick无法触发的问题
摘要：在移动端布局的时候, 在底部有一个button, 页面超过两屏, 是一个可滚动的的网页, 当运行在移动端Safari浏览器上的时候, 向下滑动页面, 浏览器的头部和尾部会自动隐藏, 这样可视区域就会变大, 本来这个设计是很好的, 但是这也跟前端工程师带来麻烦, 当头部和尾部隐藏掉之后, 再点击底部的
阅读全文
posted @ 2018-04-20 09:50
30-seconds-of-css
摘要：你可以再30秒或者更短的时间内读懂的有用的CSS代码片段的精选. github地址 不过代码不在github上面 官网地址 上面有详细的介绍和演示 下面是我读到的一些个人认为比较实用的片段 1. 等宽高比 给定一个可变宽度的元素, 它确保其高度以响应的方式与宽度保持成比例, 即宽度与高度的比例保持一
阅读全文
posted @ 2018-04-12 09:04
