资源

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

正文

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

• 效果

• 源码 ``` / 给 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/cursor@2x.png) 2x) 6 6,auto;

####2.  设置网站中文字被选中时的样式
- 效果图
> ![文字被选中时的效果图](https://upload-images.jianshu.io/upload_images/9064013-ae70fbc11699f682.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 源码

::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); }

```