记录下最近写前端的一些小技巧

Posted 2021-02-04 inzens

纯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等其他浏览器支持查询。