- 博客(56)
- 收藏
- 关注
RSS订阅原创 解决移动端动画卡顿问题
1、开启translateZ或 translate3dwebkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0);web
2017-04-11 11:10:48
9022
原创 14（高级）CSS动画之：旋转星球
方法：#earth{ width: 800px; height: 800px; clear: both; background:url("earth.png") center center no-repeat; background-color:#ffbb33 ; border-radius: 50%; position:
2017-02-15 15:31:42
1161
原创 13.（高级）CSS用户体验之：滚动提示
方法：ul{ overflow: auto; width: 10em; height: 8em; padding: .3em .5em; border: 1px solid silver;/*用于挡住顶部滚动提示，并使用background-attachment: local，固定在顶部*/ background: linear-
2017-02-15 15:30:05
835
原创 12.（高级）CSS用户体验之：自定义复选框
方法：/*隐藏浏览器自带复选框*/input[type="checkbox"]{ position: absolute;/*设置可见范围*/ clip: rect(0,0,0,0);}input[type="checkbox"]+label::before{ content: "\a0"; display: inline-block;
2017-02-15 15:28:33
362
原创 11.（高级）CSS用户体验之：扩大点击区域
方法： border:10px solid transparent;/*导致按钮变大，通过background-clip修改*/ background-clip:padding-box; border-shadow:0 0 0 1px rgba(0,0,0,.3) inset; 声明：以上方法参考《CSS揭秘》
2017-02-15 15:25:58
1693
原创 10.（高级）CSS形状之：梯形标签
一、等腰梯形 方法：#o{ width: 100px; height: 25px; padding: .5em 1em .35em; position: relative; color: #fff;}#o::before{ content: ""; position: absolute; top:
2017-02-14 14:46:31
13776
原创 9.（高级）CSS形状之：切角效果
一、单切角 方法：background: #58a;background: linear-gradient(-45deg,transparent 15px,#58a 0);二、双切角 方法：background: #58a;/*right设置切角放置在右下角*/background: linear-gradient(-45deg,transparent 15
2017-02-14 14:42:50
1958
原创 8.（高级）CSS形状之：菱形图片
一、正方形菱形 方法：HTML CSS#picture{ width: 400px; transform: rotate(45deg); overflow: hidden; height: 400px;}#picture img{ max-width: 100%; transform: rot
2017-02-14 14:39:01
1727
原创 7.（高级）CSS形状之：平行四边形
一、平行四边形 方法一：2个HTMLHTML Click meCSS.button{transform:skew(-45deg);}.button div{transform:skew(45deg);}方法二：伪元素HTMLClick meCSS.button::before{ content:’’; positio
2017-02-14 14:38:23
2897
原创 6.（高级）CSS形状之：自适应椭圆
一、椭圆 border-radius: 50%/50%;分析：border-radius: width/height;二、半椭圆 border-radius: 100% 0 0 100%/50%;分析： 三、1/4椭圆 border-radius: 100% 0 0 0;分析： 声明：以上方法参考《CSS揭秘》
2017-02-14 10:26:13
458
原创 5.（高级）CS效果之：边框border
一、实现半透明边框方法：border:10px solid hsla(0,0%,100%,.5);background:#fff;background-clip:padding-box; 二、实现多重边框方法一：box-shadowbackground:yellowgreen;box-shadow:0 0 0 10px #655,0 0 0 15
2017-02-13 17:28:54
1820
原创 3.（高级）CSS编码技巧之：尽量避免不必要的媒体查询
媒体查询技术，实际上是CSS上设置断点，实现不同设备显示不同网页布局，但会增加CSS维护成本。 正确思路应该是媒体查询的断点不应该有具体设备觉得的，而是根据设计本身，也就是说网页自身应具有弹性布局，再此基础上应用少量的媒体查询，具体建议如下： 1、使用百分比长度代替固定长度，也可以使用相关单位vw/vh/vimn/vmax； 2、在较大分辨率下使用固定宽度时，建议使用
2017-02-13 15:49:35
375
原创 2.（高级）CSS编码技巧之：相信自己的眼睛
有时候人的眼睛会产生视觉错觉，就算精确的尺寸或定位看起来却不精确，对于网页，用户体验极其重要，应以视觉为准，而不是尺寸，因为使用的是用户，一切应以用户体验为准。举例如下： 此处设置相同内边距，但看起来内边距并不相同。解决方法： 减小顶部和底部的内边距，效果如下：
2017-02-13 15:20:33
249
原创 1.（高级）CSS编码技巧之：减少重复代码
一、使尺寸具有关联性举例如下：button{ padding:6px 16px; border:1px solid #446d88; background:#58a linear-gradient(#77a0bb,#58a); border-radius:4px; box-shadow: 0 1px 5px gray; color
2017-02-13 14:57:31
1194
原创 4.（中级）CSS隐藏标题文字方法
一、text-indenttext-indent:-9999px;二、font-sizefont-size:0px;
2017-02-13 11:03:26
791
原创 3.（中级）CSS让元素居中方法
一、水平居中1、行内元素text-align:center;2、块级元素margin:0 auto;3、多行块级元素display: flex;justify-content:center;二、垂直居中1、单行文本line-height:;2、多行文本（1）padding:;（2）table中，使用vertical-align:middle;
2017-02-13 11:02:47
214
原创 2.（中级）CSS让页面背景完全铺满方法
html, body{ height:100%;}body { background:url(xxxx.jpg) center center; background-size:cover;}
2017-02-13 11:01:38
688
原创 1.（中级）CSS行高line-height：1.5与150%的区别
line-height:150%;先计算父元素line-height值，再继承给子元素。line-height:1.5;子元素先继承1.5这个系数，再计算。
2017-02-13 11:00:44
862
原创 滑动边导航
一、HTML Menu Off-canvas menu Off-canvas menus are positioned outside of the viewport and slide in when activated. Setting up an off-canvas layout in HTML5 is super easy.
2017-02-13 10:05:34
251
原创 刮奖效果
一、HTML刮一刮 请在以上的刮奖区刮奖二、CSSbody { background:#F39C12; text-align:center; margin:40px; color:#FFF; font-family:sans-serif;}img{ width:200px;}h1{ font-
2017-02-12 21:14:11
768
原创 滑块拖动验证
一、HTML Success!二、CSSbody { background:#006b9d;}#verify{ width:508px; height:523px; background:url(bg.png); margin:50px auto; position:relativ
2017-02-12 18:34:48
12873
2
原创 5.CSS图像绘制之：条纹背景
CSSbody { background:linear-gradient(#51B0E7 50%, #006084 50%); background-size:100% 20px;} CSSbody { background:#FFF; margin:50px; background:linear-gradient(45d
2017-02-12 17:39:22
1764
1
原创 4.CSS图像绘制之：字渐变按钮
一、HTMLBUTTON二、CSSa{font-size:5em; /*渐变背景*/background: linear-gradient(to right, #79f296, #27AE60); /*背景裁剪区域为文字区域*/-webkit-background-clip: text;color:transparent;}
2017-02-12 14:26:26
198
原创 3.CSS图像绘制之：三角图标
一、HTML Lorem ipsum Ne maluisset sententiae qui, mucius epicuri reprimique et cum, sumo saperet laboramus et pri. An ignota incorrupte quo, ex his dicta nominavi, erat consulatu eum cu. Eum ea
2017-02-12 14:18:41
376
3
原创 2.CSS图像绘制之：菜单按钮
一、HTMLMenu二、CSS/*使页面背景显示为绿色*/body {margin:50px;font-family:arial;background:#fbfbfb;}a{text-decoration:none;color:#999;/*使文字右移，为图标腾出显示空间*/text-indent:1.2em; font-size:32px
2017-02-12 14:02:40
624
原创 1.CSS图像绘制之：关闭按钮
一、HTMLClose Me二、CSS/*使页面背景显示为绿色*/body { background:#2ECC71; margin:50px;}.close{ font-size:0px; display:block;}/*绘制上下2个白色长方形*/.close::before, .close::after{ conten
2017-02-12 13:50:01
2109
原创 雪花效果
一、HTML二、CSSbody { background:#45aad7; margin:0; padding:0;}html, body{ height:100%; width:100%;}#myCanvas{ height:100%; width:100%; display: block;}三、
2017-02-12 13:06:13
346
原创 各类加载loading动画效果
效果一： 一、HTMLLoading...二、CSS/*绿色背景*/body { background:#4ea980; margin:50px;}/*纯白色圈*/.loader { text-indent: -9999em; position: relative; width: 200px; height: 20
2017-02-12 11:10:17
41630
2
原创 图标元素动画效果
一、HTMLHomeSearchUserMailChat一、CSS@font-face { font-family: 'icon-font'; src: url('font/flat-ui-icons-regular.ttf'), url('font/flat-ui-icons-regular.eot'), url('font/fla
2017-02-11 19:23:04
1336
原创 1.Touch事件
一、touchstart、touchmove、touchendxxx.addEventListener("touchstart",functionName);二、触摸点event.touches1、触摸点个数event.touches.length2、触摸点x、y位置属性event.touches[0].pageXevent.touches[0].pageY三、IO
2017-02-10 15:52:20
313
原创 2.移动设备技巧
一、去除IOS元素周围橙色外框CSS:{ -webkit-tap-heightlight-color:rgba(0,0,0,0);}二、避免横竖屏切换时，移动设备字体大小自动修改CSS:html{ -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; text-size-a
2017-02-10 15:51:50
206
原创 1.多列等高布局
一、问题由于浮动元素的高度一般由里面的内容决定导致，有背景色的元素高度不同 一、解决方法1、使用table布局2、使用背景图background平铺.col{background:url(xxx.xxx) repeat-y left top;}3、方法三 ..... ..... .....
2017-02-10 15:47:28
233
原创 2.CSS文字内浮雕效果
普通效果 h1{ text-shadow: 1px 1px 0 rgba(255, 255, 255, .7); } 深色自内浮雕效果 h1{ text-shadow: -1px -1px 0 rgba(0, 0, 0, .7); } 浅色字内浮雕效果
2017-02-10 15:46:35
4449
原创 17.（初级）CSS弹性盒flex
一、弹性盒子基础结构 ------->弹性容器 1 ------->弹性项1 2 ------->弹性项2 3 ------->弹性项3二、弹性容器属性1、设置元素变成弹性盒display:flex;2、flex-flow值一：设置弹性项控制弹性项目的排列方向（行或列），值二：控制弹性项能否换行flex-flow:
2017-02-10 10:19:19
379
原创 16.（初级）CSS布局定位相关问题
一、浮动溢出问题解决方案方案一：在外层元素的底部添加一个元素，并清除浮动。方案二：浮动外层元素，后续元素清除浮动。方案三：设置overflow:hidden;。方案四：设置伪元素:before、:after。 div:before/after{ content:” ”; display:table;
2017-02-10 10:17:46
160
原创 15.（初级）CSS的float与position
一、浮动floatfloat特点： 1、浮动，相对定位的，它根据一个元素的大小和其父节点容器的大小来构造这个元素在排版中与其他元素之间的关系，整个页面会随着浏览器的大小和分辨率的变化而改变。 2、float:right/left是子块级元素流集合面向父级元素的定位，定位的关键词使用margin/padding。兄弟块元素之间进行相对的定位均基于移动后的新位置
2017-02-10 10:16:55
218
原创 14.（初级）CSS表格table注意点
一、控制单元格之间的间隙border-spacing:px二、去掉双重边框border-collapse:separate/collapse说明：separate：单元格之间有间隙，而且边框叠加collapse：去掉间隙及边框叠加三、隐藏空单元格empty-cells:hide;
2017-02-10 10:15:21
255
原创 13.（初级）CSS变形transform、过度transition、动画animation注意点及如何让动画更流畅方法
一、变形transform1、倾斜skew()skew(水平倾角,垂直倾角)例如：skew(20deg,30deg) 2、移动变形原点transform-origintransform-origin:left/right/px/% top/bottom/px/%;例如：transform-origin:left top;相当于transform-ori
2017-02-07 14:53:21
5184
原创 12.（初级）CSS背景background
一、定义背景起点background-origin:border-box/padding-box（默认）/content-box;border-box：起点设置为border左上角padding-box：起点设置为padding左上角content-box：起点设置为content左上角例如：注意黑点 二、定义背景显示区域background-clip:border
2017-02-07 10:33:27
243
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人