几种CSS3常用动画效果和样式

自从gulp、wewbpack工具出现后，写样式更为便捷了，像-webkit、-moz、-o等多浏览器兼容部分可以通过插件自动补齐，这里兼容部分写法就不一一例举出来了。

一、360旋转 修改rotate旋转度数，代码如下：

* {
    transition:All 0.4s ease-in-out;
}
*:hover {
    transform:rotate(360deg);
}

二、放大 修改scale放大的值，代码如下：

* {
    transition:All 0.4s ease-in-out;
}
*:hover {
    transform:scale(1.2);
}

三、旋转放大 修改rotate旋转度数和scale放大值，代码如下：

* {
    transition:All 0.4s ease-in-out;
}
*:hover {
    transform:rotate(360deg) scale(1.2);
}

四、上下左右移动 修改translate的x轴和y轴，代码如下：

* {
    transition:All 0.4s ease-in-out;
}
*:hover {
    transform:translate(0,-10px);
}

五、动画延迟

animation-delay: 2s;

六、背景渐变色

background: linear-gradient(top, #ffffff,  #d8ffae);   

七、修改默认浏览器滚动条效果

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}
::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #fff;
}

::-webkit-scrollbar{
    width: 6px;
    background-color: #fff;
}
::-webkit-scrollbar:horizontal{
    height: 6px;
}
::-webkit-scrollbar-thumb {
    background-color: #8A8A8A;
    border-radius: 2px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
}

八、苹果手机自定义滚动条滑动不流畅

overflow-x: hidden; 
overflow-y: auto;
-webkit-overflow-scrolling : touch; 

九、禁用浏览器鼠标选中文本

user-select:none;