从网站 https://zipl.pro 中学到的 css 使用技巧

资源

参考网站--ZIPL Web Studio 一个设计和交互效果都很好的网站

正文

1. 修改cursor鼠标样式和使用一倍、两倍图的方法

• 效果

zipl.pro.gif

• 源码

/* 给 body 加的样式，是页面上的鼠标展示为一张图片 */
cursor: url(../img/cursors/cursor.png) 6 6,auto;
cursor: url(../img/cursors/cursor.svg) 6 6,auto;
cursor: -webkit-image-set(url(../img/cursors/cursor.png) 1x,url(../img/cursors/[email protected]) 2x) 6 6,auto;

2. 设置网站中文字被选中时的样式

• 效果图

文字被选中时的效果图

• 源码

::selection {
    background: #000;
    color: #fff
}

::-moz-selection {
    background: #000;
    color: #fff
}

3. 设置输入框提示文字的样式

• 源码

/*设置文本颜色*/
.formWrapper .form-group ::-webkit-input-placeholder {
    color: #000
}

.formWrapper .form-group :-moz-placeholder {
    color: #000
}

.formWrapper .form-group ::-moz-placeholder {
    color: #000
}
/*自动将字母转换为大写*/
.formWrapper .form-group ::-webkit-input-placeholder {
    text-transform: uppercase
}

.formWrapper .form-group :-moz-placeholder {
    text-transform: uppercase
}

.formWrapper .form-group ::-moz-placeholder {
    text-transform: uppercase
}

4. 给容器加 3d 转换，开启硬件加速 GUI，使得动画更加的流畅

.scroll-content{
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}