随笔分类 - css3 效果收集

左右半透明的无缝滚动

摘要：列表左右的无缝滚动在网页中是一个很常见的效果了。但是为了给使用者一个更好的体验感受，我们会需要做到如下效果：就是左右两边会有种半透明的效果。今天我们就来说一下如何实现它。 1.写静态页面，大致的页面布局如下: 2.写 CSS: 要实现左右半透明的效果就是通过伪类 + 渐变来实现的。渐变的兼容性不阅读全文

posted @ 2018-01-26 22:37 前端[色色] 阅读(527) 评论(0) 推荐(0) 编辑

如何实现两列等高效果？

摘要：先看下面的效果图：难点：里面内容不确定，不能定高的同时要让左右两个div的高度保持一致。解决方案：利用 display:table 和 display:table-cell。因为display:table之后对margin不敏感，所以如果要调整两者之间的间距，需要用到border-spaci 阅读全文

posted @ 2017-07-14 13:22 前端[色色] 阅读(940) 评论(0) 推荐(0) 编辑

CSS3实现0.5px的边框

摘要：前端页面细节处理好了才会显得精致。边框在网页中是常见的一种样式了。虽然不把它处理为0.5px看上去没毛病，但是想让你做的东西征服更多的人，这些细节处理是必须的。今天主要说一下如何让边框显示0.5px的方法：方法一：利用渐变关于渐变可以看下面两篇文章做深入了解： CSS3 渐变（Gradient 阅读全文

posted @ 2017-06-23 00:47 前端[色色] 阅读(22259) 评论(0) 推荐(1) 编辑

文字收缩下面半透明效果

摘要：废话不多说，直接看效果图~ 实现的思路：文字收缩的时候，给它下面添加一个渐变的遮罩层，当展开的时候，把那个遮罩层给去掉。主要代码：阅读全文

posted @ 2017-02-13 10:40 前端[色色] 阅读(858) 评论(0) 推荐(0) 编辑

css 3 制作水波状进度条

摘要：效果图如下：代码如下：阅读全文

posted @ 2017-01-18 16:40 前端[色色] 阅读(1151) 评论(0) 推荐(0) 编辑