less通用pc移动库
// less 文件 (移动端通用less文件)
// 作者 marchen
// 时间 2014/9/1
// 协议 MIT
// 只考虑webkit内核手机浏览器和火狐内核浏览器 // 自定义less 混合函数
/*********** CSS3样式合集 *************/
//盒子模型 边框计算
.border-box() {
box-sizing:border-box;
-webkit-box-sizing:border-box;
} //圆角
.border-radius(@radius:2px) {
-moz-border-radius:@radius;
-webkit-border-radius:@radius;
border-radius:@radius;
} //变形
.transform(@all) {
-moz-transform:@all;
-webkit-transform:@all;
transform:@all;
} //过渡
.transition(@all) {
-moz-transition:@all;
-webkit-transition:@all;
transition:@all;
}
//常用过渡
.transiton() {
-moz-transition:all .7s .1s ease;
-webkit-transition:all .7s .1s ease;
transition:all .7s .1s ease;
} /*可以自定义修改*/ //动画
.animation(@all) {
-moz-animation:@all;
-webkit-animation:@all;
animation:@all;
}
//常用动画
.animation(@name) {
-moz-animation:@name 1s 0s 1 ease both;
-webkit-animation:@name 1s 0s 1 ease both;
animation:@name 1s 0s 1 ease both;
} //字体特效
.text-shadow-light(@blur:2px) {
text-shadow: 0px 0px @blur white;
}/*可发挥想象定义常用字体特效*/ //盒子阴影
.box-shadow(@all) {
-moz-box-shadow:@all;
-webkit-box-shadow:@all;
box-shadow: @all;
}
//常用盒子阴影
.box-shadow-light(@blur) {
-moz-box-shadow:0px 0px @blur white;
-webkit-box-shadow:0px 0px @blur white;
box-shadow: 0px 0px @blur white;
} //文字旋转
.text-rotate(@angle:45deg) {
-webkit-transform: rotate(@angle);
-moz-transform: rotate(@angle);
transform:rotate(@angle);
} //字体
.font-face(@fontname,@fontdir) { //字体名称 string 字体文件目录
@font-face {
font-family: @fontname;
src: url('@{fonturl}/@{fontname}.eot');
src: url('@{fonturl}/@{fontname}.eot?#iefix') format('embedded-opentype'),
url('@{fonturl}/@{fontname}.woff') format('woff'),
url('@{fonturl}/@{fontname}.ttf') format('truetype'),
url('@{fonturl}/@{fontname}.svg#@{fontname}') format('svg');
font-weight: normal;
font-style: normal;
}
} //渐变 (简单的二种颜色的渐变)
.linear-gradient(@angle:45deg,@start-color:rgba(0,0,0,1),@stop-color:rgba(255,255,255,1) {
background: -moz-linear-gradient(@angle, @start-color 0%, @stop-color 100%); /* ff3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, @start-color), color-stop(100%, @stop-color)); /* safari4+,chrome */
background: -webkit-linear-gradient(@angle, @start-color 0%, @stop-color 100%); /* safari5.1+,chrome10+ */
background: linear-gradient(@angle, @start-color 0%, @stop-color 100%); /*w3c*/
} /******************************************* 小工具 *********************************************/
//长单词强制换行
.wrap() {
text-wrap: wrap;
white-space: -moz-pre-wrap;
white-space: pre-wrap;
word-wrap: break-word;
}
/******************************************* 各种移动端bug修复 **********************************/ //去掉手持设备点击时出现的透明层(一般在头部做格式化)
.delete-highlight(){
a,button,input{
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent; /* For some Androids */
}
} //去掉苹果浏览器自带input[submit/reset/button]的ui渲染效果
.delete-appearance() {
input[type="submit"],
input[type="reset"],
input[type="button"],
button {
-webkit-appearance: none;
}
} //移动端bug汇总
//bug一:现象:
//android4.0以上一部分手机的webview中,当canvas小于屏幕大小时,绘图时会出现重影,就是说一个图只绘制了一遍,却出现了两个解决方案:canvas外层的div需要设定属性style="overflow:visible;-webkit-transform: translateZ(0);*/ //bug二:
//现象:android4.x中一部分手机,在改变canvas大小的时候有时会卡死。大家可能都知道,重新设定canvas的大小可以实现canvas的完全刷新,但是也会导致一部分4.x手机卡死。
//解决方案:用clearRect刷新canvas。*/ //欢迎更新更多的bug
上面的一旦定义好的话,下次就直接.border-box()这样调用就行了.省了不少时间.感觉很棒.当然做事不能只做不一般.是吧.这个 在上一道pc端的兼容less代码.
/**
* author marchen
* time 2014/8/20
* MIT
* style 编译为css后在运行
*/ /////////////////////less maxmin will be delete ////////////////////////////////
//border-radius
.border-radius(@width:2px) {
border-radius: @width; -moz-border-radius: @width; -webkit-border-radius: @width; -o-border-radius: @width; -ms-border-radius: @width; }
//transform-origin
.transform-origin(@x:center,@y:center) {
transform-origin: @x @y; -webkit-transform-origin: @x @y; -moz-transform-origin: @x @y; -o-transform-origin: @x @y; -ms-transform-origin: @x @y; }
//perspective-origin
.perspective-origin(@x:center,@y:center) {
perspective-origin: @x @y; -webkit-perspective-origin: @x @y; -moz-perspective-origin: @x @y; -o-perspective-origin: @x @y; -ms-perspective-origin: @x @y; }
//transform-style
.transform-style(@style:flat) {
transform-style: @style; -moz-transform-style: @style; -webkit-transform-style: @style; -o-transform-style: @style; -ms-transform-style: @style; }
//transform
.transform(@rotate:0deg,@scale:0,@skew:0deg,@translate:0px) {
transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate); -webkit-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate); -moz-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate); -o-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate); -ms-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate); }
//animate
.animate(@all) {
animation: @all; -webkit-animation: @all; -moz-animation: @all; -o-animation: @all; -ms-animation: @all; }
.animate(@name,@duration:1s,@delay:0s,@ease:ease,@count:1,@direction:normal,@end:both) {
animation: @name @duration @delay @count @ease @end @direction; -webkit-animation: @name @duration @delay @count @ease @end @direction; -moz-animation: @name @duration @delay @count @ease @end @direction; -o-animation: @name @duration @delay @count @ease @end @direction; -ms-animation: @name @duration @delay @count @ease @end @direction; }
//transition
.transition(@all) {
transition: @all; -webkit-transition: @all; -moz-transition: @all; -o-transition: @all; -ms-transition: @all; }
.transition(@property,@duration:0.7s,@delay:0.1s,@ease:ease) {
transition: @arguments; -webkit-transition: @arguments; -moz-transition: @arguments; -o-transition: @arguments; -ms-transition: @arguments; }
//text-shadow text effect
.text-shadow(@all) {
text-shadow: @all; }
.text-shadow(@color:black,@x:1px,@y:1px,@offset:2px) {
text-shadow: @arguments; }
.text-light(@color:white,@blur:15px) {
text-shadow: 0px 0px@blur @color; }
.text-apple(@tcolor:#000,@x:0,@y:1px,@blur:1px,@color:#fff) {
color: @tcolor; text-shadow: @x @y @blur @color; }
.text-emboss() {
color: #ccc;
text-shadow: -1px -1px 0 #fff, 1px 1px 0 #333, 1px 1px 0 #444;
}
.text-blur(@color:black,@blur:5px) {
color: transparent;
text-shadow: 0 0@blur @color; }
//box-shadow
.box-shadow(@all) {
box-shadow: @all; -moz-box-shadow: @all; -webkit-box-shadow: @all; -o-box-shadow: @all; -ms-box-shadow: @all; }
.box-shadow(@x:0px,@y:0px,@blur:2px,@color:#605F5F) {
box-shadow: @arguments; -moz-box-shadow: @arguments; -webkit-box-shadow: @arguments; -o-box-shadow: @arguments; -ms-box-shadow: @arguments; }
//text-rotation
.text-rotation(@rotate:0deg) {
transform: rotate(@rotate); -webkit-transform: rotate(@rotate); -moz-transform: rotate(@rotate); -o-transform: rotate(@rotate); -ms-transform: rotate(@rotate); writing-mode: lr-tb;
}
//备用动画
less通用pc移动库的更多相关文章
- MVC通用控件库展示-MVC4.0+WebAPI+EasyUI+Knockout--SNF快速开发平台3.0
在我们开发中怎么才能提高效率,就是要有大量的公共组件(控件)可以直接使用而不用自己再开发一遍,既然是公共控件那也得简单实用才行.下面就介绍一下SNF-MVC当中的控件库. 总体控件库展示: 1.通用用 ...
- C++通用框架和库
C++通用框架和库 来源 https://www.cnblogs.com/skyus/articles/8524408.html 关于 C++ 框架.库和资源的一些汇总列表,内容包括:标准库.Web应 ...
- iphone开发之用lipo合并模拟器库和真机库,发布一个通用的静态库
转载自:http://blog.csdn.net/arthurchenjs/article/details/6044616 lipo lipo –create Release-iphoneos/lib ...
- DiscuzX /source/function/function_core.php通用核心函数库文件分析
... <?php /** * [Discuz!] (C)2001-2099 Comsenz Inc. * This is NOT a freeware, use is subject to l ...
- Yoshino: 一个基于React的可定制化的PC组件库
Github: https://github.com/Yoshino-UI... Docs: https://yoshino-ui.github.io/#/ Cli-Tool: https://git ...
- Golang 通用连接池库 Golang-Pool
Golang 实现的连接池 功能: * 连接池中连接类型为interface{},使得更加通用 * 链接的最大空闲时间,超时的链接将关闭丢弃,可避免空闲时链接自动失效问题 * 使用channel处理池 ...
- kaldi通用底层矩阵运算库——CBLAS
matrix/cblas-wrappers.h 该头文件对CBLAS与CLAPACK的接口进行了简单的封装(将不同数据类型的多个接口封装为一个). 比如 cblas_scopy和cblas_dcopy ...
- 通用shell函数库
1.输出字体颜色库 #!/bin/bash export black='\E[0m\c' export boldred='\E[1;31m\c' export boldgreen='\E[1;32m\ ...
- kaldi通用底层矩阵运算库——CUDA
cudamatrix/cublas-wrappers.h 该头文件对cuBLAS的接口进行了简单的封装(函数名的简化和部分kaldi函数的封装). 比如 cublasSgemm_v2封装为cublas ...
随机推荐
- java 学习原生jdbc
public class App { public static void main( String[] args ) { //JDBC驱动 String driverName = "com ...
- 06-图2 Saving James Bond - Easy Version (25 分)
This time let us consider the situation in the movie "Live and Let Die" in which James Bon ...
- day23 模块
1. 模块 1. 首先,我们先看个老生常谈的问题. 什么是模块. 模块就是一个包含了python定义和声 明的文件, 文件名就是模块的名字加上.py后缀. 换句话说我们目前写的所有的py文件都可以 看 ...
- sysbench 安装、使用和测试
摘要: sysbench是一个开源的.模块化的.跨平台的多线程性能测试工具,可以用来进行CPU.内存.磁盘I/O.线程.数据库的性能测试.目前支持的数据库有MySQL.Oracle和Post ...
- 9.ORM数据访问
1.Spring对ORM的支持 ORM : 对象关系映射(Object Relational Mapping)是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术基于ORM的数据持久层框架有: ...
- ubuntu14.04&matlab2015b 测试caffe的Matlab接口
Step1: 修改caffe-master中的Makefile.config 提示:可以到文件中直接“ctrl+f”,键入相应大写字母即可查找到相应位置. Step2:编译接口.如果之前编译caffe ...
- thinkPHP5.0验证码不显示
1.使用composer安装时,验证码无法正常显示 主要是因为验证码扩展库的版本安装不正常,官方的5.0版本的扩展库版本号都是1.*,默认安装的是2.0版本,2.0版本均为ThinkPHP5.1版本专 ...
- my.梦幻手游_XP
1.http://my.netease.com/thread-459708-1-1.html 2. 3.
- linux在命令符界面如何浏览网页
1.介绍 w3m是个开放源代码的命令行下面的网页浏览器. 它支持表格.框架.SSL连线.颜色.如果是在适当的terminal上,甚至还支持"inline image". 这个软件通 ...
- 【Java】Java中的Collections类——Java中升级版的数据结构【转】
一般来说课本上的数据结构包括数组.单链表.堆栈.树.图.我这里所指的数据结构,是一个怎么表示一个对象的问题,有时候,单单一个变量声明不堪大用,比如int,String,double甚至一维数组.二维数 ...