随笔分类 - CSS
摘要:一、CSS3 mask CSS3 mask默认是基于透明度实现遮罩效果的。也就是实色区域显示,透明区域隐藏。因此,我们只需要把目标图标颜色#f4615c作为背景色,然后原始图标(无论什么颜色都可以)作为遮罩图片,效果就出来了。 效果: <!DOCTYPE html> <html> <head> <m
阅读全文
摘要:js日历插件 实现思路:获取每个月的第一天是星期几,然后把前面的天数填充为空,在获取每个月有多少天,循环填充,判断并给给当前时间添加单独样式,点击上一月,和下一月时改变月份。 获取当前月第一天:返回值是 0(周日) 到 6(周六) 之间的一个整数 var date = new Date(); var
阅读全文
摘要:实现方法:1.先写好5个框 2.input输入框定位到5个框上并把背景颜色设为透明(transparent),3.input输入框中内容加上字间距(letter-spacing)来调整让输入框中的字符刚好在5个框中间。 最终效果: 全部代码 <!DOCTYPE html><html> <head>
阅读全文
摘要:方法:用scss的函数动态计算rem值 $rem : 75px;基准值 设计图是750的宽 设为$rem变量设为75,设计图是350的宽 设为$rem变量设为35,老的写法 需要用js来配合来动态改变font-size大小 //以iPhone6作为基准屏幕宽度 @function px2rem($p
阅读全文
摘要:css彩色文字也称渐变文字 在张鑫旭博客首页看到这效果,就自己研究了一下。 实现方法加个背景然后在根据文本剪切,再把文本填充为透明色让之前设置的背景颜色显示出来即可。 -webkit-background-clip: text;根据文本剪切 -webkit-text-fill-color: tran
阅读全文
摘要:cursor可以自定义鼠标,写法是cursor:url(“图片路径”),pointer; url:需使用的自定义光标的 URL。图片类型需要是.cur或.ani和jpg,png等格式的(.cur或.ani的兼容性会更好一些,现在一般也不用考虑兼容性了)。 pointer: 默认的鼠标光标样式,当没有
阅读全文
摘要:input选择框是无法直接修改样式,我们只能间接来改变它样式。 原理:用图片来代替原来的input选择框,原来的input选择框定位到图片上方并让它opacity为0,鼠标点击时用js来改变图片,这样从视觉上就完成了input选择框样式的修改 HTML CSS JS 用js来改变背景图片
阅读全文
摘要:用JavaScript实现页面滚动效果,以及用wow.js二种方式实现网页滚动效果 要实现效果是页面滚动到一块区域,该区域以动画方式出现。 这个效果需要二点: 一:我们要先写好一个css动画. 二:用js的监听页面滑动的距离在div刚出现时给div添加动画。 css动画 /*设置动画*/ @keyf
阅读全文