随笔分类 - 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
阅读全文
