前端开发

CSS 变量传值给JS

2020-02-25284次阅读javascriptcss模块css
CSS变量出现前,从CSS传值给JS非常困难,甚至需要借助一些Hack的手法。现在使用CSS变量,你可以直接通过JS获取变量值并进行修改:
前端开发

CSS3中border-radius实现椭圆角还可以这样写

2020-02-19288次阅读css模块css
CSS3中border-radius实现椭圆角,常规写法是border-radius:元素高度的一半。如果高度未知,请选择任意大的值(例如99em)。
前端开发

纯CSS加载中动画

2020-02-17210次阅读csscss模块
纯CSS加载中动画,看源码
前端开发

css3实现渐变背景色文字

2020-01-16326次阅读css模块
css3实现渐变背景色文字,关于渐变有新老两种写法。-webkit-linear-gradient是新写法,-webkit-gradient是老式写法。
前端开发

CSS自定义属性实现按钮与气泡动画

2020-01-14276次阅读css模块
这样的动画应该很实用,推荐一下!
前端开发

使用伪元素增加可点击区域

2019-12-07461次阅读HTMLcss模块css
根据网页无障碍阅读指南(WCAG)准则WCAG 2.1,触摸或鼠标的最小目标尺寸应为44×44像素。大小不是固定的,可能会根据使用情况而改变。但是,44×44像素是一个很好的起点。UX设计中要遵循的重要定律。简单地说,触摸或点击目标越大,越接近,用户与其进行交互的时间越短。仅通过更改元素的宽度和高度或使用填充,并不一定总是可以增大可点击区域。好吧,不妨使用伪元素增加可点击区域。因此当我们创建具有特定宽度和高度的伪元素时,它将充当其父元素的单击/触摸/悬停区域。
前端开发

CSS伪类:placeholder-shown实践

2019-12-07345次阅读css模块
CSS伪类:placeholder-shown在或元素显 placeholder text时生效。例如:通过:not(:placeholder-shown)来实现当用户输入搜索按钮高亮等
前端开发

移动端点击元素产生背景或边框怎么去掉

2019-11-06350次阅读css模块
-webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-user-modify:read-write-plaintext-only; //-webkit-user-modify有个副作用,就是输入法不再能够输入多个字符
前端开发

移动端select下拉选择设置问题

2019-11-06492次阅读css模块IOS
移动端select下拉选择设置direction: rtl;右对齐实现,select::-ms-expand { display:none; }禁用select默认箭头
前端开发

CSS元素重叠并交织在一起的视觉效果

2019-11-06388次阅读csscss模块
在本文中,我们将使用CSS创建两个元素重叠并交织在一起的视觉效果。