記錄下最近寫前端的一些小技巧

純CSS實現鼠標指向文字上下滑動

HTML代碼
<span data-title="首頁">首頁</span>

CSS代碼
span{position:relative;display:inline-block;transition:all ease-out .3s}
span:after{position:absolute;left:0;width:100%;color:#00C0FF;content:attr(data-title);transform:translateY(100%)}

 

透明背景png8圖片格式消除鋸齒神器

PNGOUT：使用方法，photoshop儲存png24格式，而後使用PNGOUT導入轉換png8格式

 

經常使用到的css片斷

li:nth-child(3n){margin:0}   li的個數*3的樣式
查看更多屬性：http://www.w3school.com.cn/cssref/selector_nth-of-type.asp

margin-left:calc(100% - 60% - 20px);  根據瀏覽器寬度計算偏移量

rgba(0,0,0,.5)　　透明度顏色

 

設置input、textarea下placeholder預覽文字顏色

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder{color: rgba(255,255,255,.5)}
input:-moz-placeholder, textarea:-moz-placeholder{color: rgba(255,255,255,.5)}
input::-moz-placeholder, textarea::-moz-placeholder{color: rgba(255,255,255,.5)}
input:-ms-input-placeholder, textarea:-ms-input-placeholder{color: rgba(255,255,255,.5)}

 

消除input、textarea點擊後出現藍色邊框

input, textarea{outline:none}

 

瀏覽器滾動條設置

::-webkit-scrollbar-track-piece{width:8px;background-color:#f0f0f0}
::-webkit-scrollbar{width:8px;background-color:#00C0FF}
::-webkit-scrollbar-thumb{width:8px;background-color:#333}
::-webkit-scrollbar-thumb:hover{width:8px;background-color:#00C0FF}

 

經常使用的js/jquery插件

jquery.bxslider    輪播
wow        頁面動畫
placeholder    生成佔位圖jquery.countup　　數字滾動jquery.countdown　　倒計時jquery.laydate　　時間選擇jquery.customSelect　　下拉列表jquery.easing　　動畫擴展jquery.prettyPhoto　　圖片插件jquery.raty　　評分插件jquery.validate　　表單驗證
html5shiv 解決ie9如下瀏覽器對html5新增標籤的不識別，並致使CSS不起做用的問題。
respond.min  讓不支持css3 Media Query的瀏覽器包括IE6-IE8等其餘瀏覽器支持查詢。