Fork me on GitHub

随笔分类 -  css3

1 2 下一页
仿苹果原生头部动画
摘要：/*头部动画*/ .header-from-center-to-left .ui-header-title { -webkit-animation: headerFromCenterToLeft 400ms ease 1; animation: headerFromCenterToLeft 400ms ease 1; } .header-from-righ... 阅读全文
posted @ 2016-07-29 17:26 半亩花田 阅读(324) 评论(0) 推荐(0)
物体position:absolute后设置left:50%发生的有趣小事
摘要：今天在重构ui控件中3秒hint提示框样式,发现了一个有趣的小事,特发个文章记录一下,方便自己日后看一下 一 准备知识 ①一个已设置宽高的块状元素设置position:absolute后会保持他原来宽高 ②一个内联元素设置position:absolute会自动转为一个块状元素 那么我提出三个问题: 阅读全文
posted @ 2016-07-05 15:54 半亩花田 阅读(6435) 评论(1) 推荐(3)
CSS动画硬件加速
摘要：http://zencode.in/14.CSS%E5%8A%A8%E7%94%BB%E7%9A%84%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96.html http://www.html5rocks.com/zh/tutorials/speed/layers/ 阅读全文
posted @ 2016-07-05 14:26 半亩花田 阅读(212) 评论(0) 推荐(0)
Retina屏幕下image-set
摘要：实现Retina屏幕下图像的显示方法，还特别给我截取了一段代码： 这段代码让我吃惊了，真心佩服大公司前端开发人员的本事，膜拜呀。奉承的话不多说，我们一起先来看看qq.com使用的方法吧。 打开qq.com页面，在其logo的地方使用Firebug查看其源码（这个大家都懂的）： 这个时候在源码中就能看 阅读全文
posted @ 2016-06-30 10:20 半亩花田 阅读(313) 评论(0) 推荐(0)
防苹果原生加载中
摘要：一 html结构 二 css样式 阅读全文
posted @ 2016-06-19 13:17 半亩花田 阅读(213) 评论(0) 推荐(0)
animation steps属性实现帧动画
摘要：参考说明文档：https://idiotwu.me/understanding-css3-timing-function-steps/ 阅读全文
posted @ 2016-05-27 13:42 半亩花田 阅读(278) 评论(0) 推荐(0)
margin在块元素、内联元素中的区别 padding
摘要：（1）margin在块元素、内联元素中的区别 HTML（这里说的是html标准，而不是xhtml）里分两种基本元素，即block和inline。顾名思义，block元素就是以”块”表现的元素（block-like elements），inline元素即是以”行”表现的元素（character lev 阅读全文
posted @ 2016-05-20 14:47 半亩花田 阅读(1326) 评论(0) 推荐(1)
Gradients渐变属性
摘要：一个很不错的网站http://www.w3schools.com/css/css3_gradients.asp http://www.w3cplus.com/css3/new-css3-linear-gradient.html 阅读全文
posted @ 2016-05-18 21:18 半亩花田 阅读(161) 评论(0) 推荐(0)
-webkit-mask-box-image给框架加个同样大小的遮罩
摘要：很棒的css属性，可以在div上方建个同大小的遮罩，配合线性变化gradient可以实现很酷的样式，比如：时间选择的UI组件，里面有个模糊的上方遮罩 手册地址：https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-box-imag 阅读全文
posted @ 2016-05-18 21:09 半亩花田 阅读(759) 评论(0) 推荐(0)
input表单元素的默认padding不一致问题
摘要：最近做的项目，发现一堆问题，input type=“text”和type=“button” （1）在无文字的时候高度是一致的，分别写入相同大小的文字type=“button”高度>type=“text”，查找的资料是padding在不同浏览器的表现不一致，尤其是chrome，具体文章见http:// 阅读全文
posted @ 2016-05-18 20:39 半亩花田 阅读(774) 评论(0) 推荐(0)
css样式表中的样式覆盖顺序
摘要：有时候在写CSS的过程中，某些限制总是不起作用，这就涉及了CSS样式覆盖的问题，如下 Css代码 #navigator { height: 100%; width: 200; position: absolute; left: 0; border: solid 2 #EEE; } .current_ 阅读全文
posted @ 2016-05-16 14:10 半亩花田 阅读(403) 评论(0) 推荐(0)
html body div height: 100%;
摘要：最近做了测试 html{ height: 100%;//全部内容高度，包括滚动出现的内容 background-color:#000;} body{height: 100%;//只一页屏幕，用作滚动的标准，不包括滚动出现的内容} body div{height: 100%;//继承body高度，也只 阅读全文
posted @ 2016-05-09 19:03 半亩花田 阅读(687) 评论(0) 推荐(0)
父，子层的position
摘要：http://www.tuicool.com/articles/QRjQJn 阅读全文
posted @ 2016-04-26 16:52 半亩花田 阅读(123) 评论(0) 推荐(0)
css position弹性盒子测试
摘要：总结： 1.利用样式height:100%设置div高度为全屏时候必须设置所有的父元素，但是父元素那么多，不可控，所以此法不可行； 2.设置父框架的padding为100px，div进行float，padding有效；但div进行position，并配合left：0，padding失效； 3.弹性盒 阅读全文
posted @ 2016-04-18 21:13 半亩花田 阅读(900) 评论(0) 推荐(1)
flex平分测试
摘要：111111111111111111 22222222222222222222222222222222 33333333333 阅读全文
posted @ 2016-04-18 14:28 半亩花田 阅读(539) 评论(0) 推荐(0)
rem单位
摘要：一、使用方法： 1、头部添加<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 2、设置根元素html的font- 阅读全文
posted @ 2016-04-17 17:37 半亩花田 阅读(402) 评论(0) 推荐(0)
CSS控制文本的长度，超过一行显示省略号
摘要：代码如下： text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）。只有这样才能实现溢出文本显示省 阅读全文
posted @ 2016-04-15 11:46 半亩花田 阅读(1542) 评论(1) 推荐(1)
CSS3学习笔记（5）—页面遮罩效果
摘要：CSS3做的页面遮罩效果 阅读全文
posted @ 2015-10-16 13:36 半亩花田 阅读(2636) 评论(6) 推荐(0)
CSS3学习笔记（4）—上下滑动展开的按钮
摘要：css3中上下滑动展开的按钮动画 阅读全文
posted @ 2015-10-15 15:19 半亩花田 阅读(3314) 评论(5) 推荐(0)
CSS3学习笔记（3）—左右飞入的文字
摘要：前几天看到一个企业招聘的动画觉得很炫，里面有个企业介绍的文字是用飞入的效果做出来的，今天尝试了写了一下，感觉还不错~\(≧▽≦)/~啦啦啦下面来看我做的动态效果：其实上面的效果很简单的，我的截图软件有问题，所以不是很清晰，但是大概的效果出现了~~~屏幕颜色从红变白是因为我把鼠标从页面上移到截图软件上... 阅读全文
posted @ 2015-10-08 19:14 半亩花田 阅读(4483) 评论(2) 推荐(0)

1 2 下一页