css3 - 随笔分类 - xiaoleilei

如何实现两行内容增多和一行内容增多，多余的内容显示省略号

摘要：最近工作经常会遇到这样的UI设计图，两行内容增多出现省略号，一般这样的解决方法我总会直接overflow:hidden隐藏，可是这样他不会出现三个省略号，下面给大家想到一个很easy的方法分享一下；方法一：适合PC和移动端，最主要的就是这段js，大概是这样的原理： 1）获取所有的元素.txt,通过遍历循环，判断他的内容个数，如果他的内容大于20（这个数值可以随意定义，大概范围在你的一行是多少... 阅读全文

posted @ 2016-06-15 15:44 xiaoleilei 阅读(701) 评论(0) 推荐(0)

改变CSS世界纵横规则的writing-mode属性

摘要：改变CSS世界纵横规则的writing-mode属性这篇文章发布于 2016年04月27日，星期三，23:12，归类于 css相关。阅读 8292 次, 今日 71 次by zhangxinxu from http://www.zhangxinxu.com本文地址：http://www.zhan 阅读全文

posted @ 2016-06-06 16:35 xiaoleilei 阅读(3013) 评论(0) 推荐(0)

zoom和transform:scale的区别

摘要：小tips: zoom和transform:scale的区别这篇文章发布于 2015年11月3日，星期二，00:52，归类于 css相关。阅读 7876 次, 今日 8 次by zhangxinxu from http://www.zhangxinxu.com本文地址：http://www.zh 阅读全文

posted @ 2016-06-06 15:12 xiaoleilei 阅读(1460) 评论(0) 推荐(0)

CSS3发光字动画

摘要：<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style>*{ margin:0; padding:0}img{ width:200px; height:200px; border:2px solid #0 阅读全文

posted @ 2014-11-10 13:45 xiaoleilei 阅读(2221) 评论(0) 推荐(0)

淘宝三角做法防CSS2D转换

摘要：淘宝三角做法css2D转换 transform/transition我的淘宝阅读全文

posted @ 2014-04-25 10:03 xiaoleilei 阅读(282) 评论(0) 推荐(0)

CSS3 @font-face

摘要：CSS3@font-face(2012-04-19 09:00:49)转载▼标签：it分类：技术分享@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体，你们当中或许有许多人会不自然的问，这样的东西IE能支持吗？当我告诉大家@font-face这个功能早在IE4就支持了你肯定会感到惊讶。我的Blog就使用了许多这样的自定义Web字体，比如说首页的Logo，Tags以及页面中的手写英文体，很多朋友问我如何使用，能让自己的页面也支持这样的自定义字体，一句话这些都是@f. 阅读全文

posted @ 2014-03-19 13:41 xiaoleilei 阅读(226) 评论(0) 推荐(0)

线性渐变--linear-gradient

摘要：deg0 deg45 deg90 deg135 deg180 deg360pics 阅读全文

posted @ 2013-11-15 13:11 xiaoleilei 阅读(388) 评论(0) 推荐(0)

镜像渐变-radio-gradient

摘要：2013年11月15日13:08:37 closest-side最近端 farthest-corner最远角 closest-side farthest-side最远端正常 contain包含下面这个实例应用的是Positioned, Sized 重复渐变-moz-repeating-linear-gradient和-moz-repeating-radial-gradient 阅读全文

posted @ 2013-11-15 13:10 xiaoleilei 阅读(782) 评论(0) 推荐(0)

css3导航-磊哥

摘要：阅读全文

posted @ 2013-08-15 11:30 xiaoleilei 阅读(192) 评论(0) 推荐(0)

3D旋转动画

摘要：css3 3D广告阅读全文

posted @ 2013-08-15 10:41 xiaoleilei 阅读(293) 评论(0) 推荐(0)

css3 keyframes animation

摘要：html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,address,big,cite,code,del,em,font,img,ins,small,strong,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend{margin:0;padding:0;}ol,ul{list-style:none;}:focus{outline:0;}a img{border:0;}img{vertical-align:top;}table{empty-cells:. 阅读全文

posted @ 2013-08-09 11:12 xiaoleilei 阅读(447) 评论(0) 推荐(0)

Animation同时改变多个属性的动画

摘要：Animation同时改变多个属性的变化鼠标悬停，开始动画阅读全文

posted @ 2013-06-30 20:32 xiaoleilei 阅读(821) 评论(0) 推荐(0)

Animation鱼眼效果

摘要：鱼眼效果小蕾1 小蕾2 小蕾3 小蕾4 小蕾5 阅读全文

posted @ 2013-06-30 20:04 xiaoleilei 阅读(348) 评论(0) 推荐(0)

Animation动画

摘要：Animation动画鼠标悬停，开始动画阅读全文

posted @ 2013-06-30 13:32 xiaoleilei 阅读(387) 评论(0) 推荐(0)

transition多个属性同时渐变(width,height,background)

摘要：Transition动画放大缩小恢复小蕾阅读全文

posted @ 2013-06-27 22:50 xiaoleilei 阅读(5026) 评论(0) 推荐(0)

transition多个属性同时渐变(left/top)

摘要：多个属性同时渐变阅读全文

posted @ 2013-06-27 22:08 xiaoleilei 阅读(4598) 评论(1) 推荐(0)

CSS3提供的transition动画

摘要：背景色变化 1 transition-property:指定对HTML元素的那个CSS属性进行平滑渐变处理。该属性可以指定background-color、width、height等各种标准的CSS属性 2 transition-duration:指定属性平滑渐变的持续时间 3 transition-time-function:指定渐变的速度鼠标移上来会发生颜色渐变 linear:线性速度。动画开始的速度到结束的速度保持不变 ease:动画开始时较慢，然后速度加快，到达最大的速度之后再减速 ease-in:动画开始时速度较慢，然后速度加快 ease-out:动画开始时很快，然后速... 阅读全文

posted @ 2013-06-26 22:00 xiaoleilei 阅读(310) 评论(0) 推荐(0)

指定变形中心点CSS3

摘要：指定变形中心点为变换之前左上角为变形中心为变换之前右下角为变形中心为变换之前右边界中间为变形中心点阅读全文

posted @ 2013-06-25 22:09 xiaoleilei 阅读(4416) 评论(0) 推荐(0)

应用多种变形CSS3

摘要：应用多种变形文字文字阅读全文

posted @ 2013-06-25 22:02 xiaoleilei 阅读(261) 评论(0) 推荐(0)

变形CSS3

摘要：变形文字未变形文字文字旋转30度文字文字位移100px,-10px文字文字缩放1.9,0.5文字文字缩放0.3,1.8文字文字缩放1.8文字文字倾斜X轴30度文字文字倾斜Y轴30度文字7 文字倾斜X10度,倾斜Y40度文字8 阅读全文

posted @ 2013-06-25 21:51 xiaoleilei 阅读(268) 评论(0) 推荐(0)

随笔分类 - css3