CSS
文章平均质量分 76
1
Justin0223
I will be okay
展开
-
纯CSS实现横向滚动条
*(一)前言基于大部分场景,我们需要使用横向滚动,这种时候,大部分会选择swiper来实现,但是其实,我们也可以通过纯CSS的方式实现一个滚动条*(二)实现大家都知道overflow 可以单独设置// 横向滚动overflow-x: scroll;// 纵向滚动overflow-y: scroll;基于上面知识,我们首先来实现一个滚动,<!DOCTYPE html>...原创 2019-12-14 18:16:50 · 4940 阅读 · 1 评论 -
Flexbox在button/fieldset/legend中(比如safair)失效问题
(一)前言常规flex布局,之前就已经介绍过了,那么,其实之前,在封装项目button的问题中,我几乎都是基于div,为其提供loading,disabled,这些效果,但是比较麻烦是,在onClick事件中,我必须为其loading和disbaled的拦截,然后,我尝试了,使用button的disable来为其提供禁用,但是噩梦也由此而来,在使用flex定位内部元素居中时候,测试提供ios 9...原创 2019-11-10 18:31:15 · 277 阅读 · 1 评论 -
在React项目中集成动画库
(一)前言其实,对于常用动画,大部分基于css的transition 和animation实现,在总结目前react动画使用时候,大概发现类似本文 React组件动画方案,我们以目前css-module的方式在加载scss文件,并配置了css支持,css不会提供module功能(二)集成animate.css本身,我们最方便是直接集成animate.css,所以大部分场景,我们做入场动画,其...原创 2019-10-21 19:53:22 · 824 阅读 · 0 评论 -
React-sticky的吸顶效果实现
(一)前言相信大多数和我一样,对于postion的属性,依然保留在static,relative,absolute和fixed。而且在这篇文章之前,如果我要实现一个悬浮效果,解决方案监听scroll的位置,动态修改需要定位的元素postion为fixed,以达到定位的效果。但是在了解到react-sticky后,我发现作者提到了postion:sticky,吓得我马上查阅下sticky是什么。...原创 2019-09-07 01:22:08 · 10613 阅读 · 0 评论 -
CSS动画开启硬件加速
(一)前言在需要高频交互的css动画时候,我们就需要考虑使用CSS3 硬件加速。首先,CSS3 硬件加速又叫做 GPU 加速,是利用 GPU 进行渲染,减少 CPU 操作的一种优化方案。由于 GPU 中的 transform 等 CSS属性不会触发 repaint,所以能大大提高网页的性能。现在,像Chrome, FireFox, Safari, IE9+和最新版本的Opera都支持硬件...原创 2019-09-05 03:38:04 · 2042 阅读 · 0 评论 -
当过渡/底色为背景图怎么使用transiton
(一)前言最近UI大佬那边,开始重视视觉交互和设计图还原程度,然后加上很多渐变效果出现我们会使用渐变作为按钮底色,如果我们直接使用transiton设置background-color,会发现过渡效果其实不能生效,我们如果使用背景图片作为按钮状态切换,当首次加载时候,比如从选中切到未选中,会在未加载图片,出现瞬间闪屏效果,这也是直接使用transiton设置background-image...原创 2019-09-02 01:14:18 · 758 阅读 · 0 评论 -
TweenMax.js 专业动画插件
(一)前言当我们要做网页动画时候,不管是css还是js控制,其实在复杂连续动画下,都很难保证连续和流畅性,那么,我们就需要一个能给出的简单的解决方案,正好,TweenMax.js 就能解决这件事(二)TweenMax初探...原创 2019-08-10 02:41:23 · 2636 阅读 · 0 评论 -
CSS3新属性 蒙版 Mask属性, 剪切文本以及用CSS绘制表格
(一)前言工作中遇到需要实现一个视觉交互师的移动框,内容区域显示的内容,需要随这圆,边缘逐渐淡化,差不多类似如下效果我尝试过使用渐变,过滤,内阴影都没办法处理,知道后面发现了mask,才得以解决这个问题, 所以现在将基本属性整理下(二)CSS mask语法语法:-webkit-mask-image:url(circle.svg);和background的样式语法是一样的,蒙版的al...原创 2019-08-04 02:55:59 · 1628 阅读 · 0 评论 -
H5端禁止蒙层底部页面跟随手势滚动
(一) 前言说来真是搞笑,之前很多交互都是依赖UI库的modal实现,之前也遇到过类似天猫商品列表页面那种下拉筛选,也解决过相关手势问题,但是,后面一个同事再次问起这个问题,回头去总结下,发现之前通过选取dom并为背景和内容分别处理touchmove事件,但是这仅仅是对于h5的一个解决方案,所以总结常见在pc/h5上面分别的处理方案。(二) PC处理方案打开蒙层时,给body添加样式:ov...原创 2019-06-25 01:15:39 · 2590 阅读 · 0 评论 -
Vue 在sass中的主题切换方案
(一) 前言主题切换,是目前很多产品需要定制的功能,常见的比如需要给用户提供两套主题,日间和夜间模式,那么我们需要找出一种在实际项目中使用的方案(二) 切换方案已知道的主题切换方案有如下几种DWZ富客户端实现方式:将不同主题的样式抽取出来。生成多份不同的主题样式文件。动态引入。比如// theme1.css.demo { color: red;}// the...原创 2019-05-27 00:53:37 · 6705 阅读 · 4 评论 -
使用rem构建web h5应用 处理chart 和 app webview 在安卓下错乱问题
前言最早基于手淘做过一次H5 rem适配, 当时基于Hybrid APP。后面使用antd-mobile后,使用 阿里的高清方案。css 新增calc 函数 可以处理边框 配合 flex布局。但是字体大小要额外处理,并且部分安卓机型不支持calc。so,最后我还是决定采用阿里的rem。这也是踩坑的开始内嵌rn webview。我们为三方提供一个H5授权页,用于oAuth2 认证流程。在...原创 2018-09-08 16:48:12 · 1412 阅读 · 0 评论 -
Flex布局(三:Flex计算规则)
与弹性盒子计算相关的属性有:margin:外边距flex-grow: 定义项目的放大比例,默认为0flex-shrink: 定义项目的缩小比例,默认为1flex-basis: 定义了在分配多余空间之前,项目占据的主轴空间(main size)。flex: 是flex-grow, ...原创 2018-04-18 00:05:56 · 7156 阅读 · 1 评论 -
css实现单行和多行文本溢出显示省略号点点点...
一、单行文本溢出显示省略号点点点..overflow: hidden;text-overflow:ellipsis;white-space: nowrap;二、多行文本溢出显示省略号点点点…display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3; //这里是在第二行有省略号ove...原创 2018-04-02 23:52:38 · 2701 阅读 · 0 评论 -
Flex布局(二:项目属性)
前言flex项目常用属性为6个order: 定义项目的排序顺序,默认为0flex-grow: 定义项目的放大比例,默认为0flex-shrink: 定义项目的缩小比例,默认为1flex-basis: 定义了在分配多余空间之前,项目占据的主轴空间(main size)。flex: 是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 aut...原创 2018-01-06 15:39:49 · 1348 阅读 · 0 评论 -
Flex布局(一:基本概念和容器属性)
前言算上来快2个月没写博客呢,一是赶项目,二是中途接到一个朋友公司需要帮忙,周末都在TA们公司兼职,然后空下来就快12月初(1)Flex传统的布局方案,基于css盒子模型,float+display+position,...原创 2017-12-24 00:02:25 · 20963 阅读 · 9 评论