第五届CSS大会主题分享之“CSS创意与视觉表现”文字版完全整理，共有10个纯CSS实现的创意案例，旨在展现CSS的潜力，同时激发你的CSS创意思维。每个案例都有demo，原理讲解，文末还有分享文档，希望对你CSS学习有所帮助。
文章关键字 ‘opacity’
第五届CSS大会主题分享之CSS创意与视觉表现
2019年06月9日，星期日CSS前景背景自动配色技术简介
2018年11月18日，星期日
CSS越来越强，现在已经可以实现根据不同的背景色显示不同的前景色进行匹配了，例如右图GIF图片所示，背景色一开始深色，文字颜色为白色，当背景色逐渐变淡的时候，文字颜色也从原来的白色变成黑色了，同时边框也显示出来了，以便有更好的识别度。如何实现的呢？去文中一探究竟吧~
几种CSS渐变背景图片transtion动画方法
2018年03月25日，星期日background-image不支持CSS3 transition，因此，当CSS3 gradient渐变作为背景图片存在的时候，直接设置transition是不会有过渡效果的，那该怎么办呢？
Chrome opacity非1时border-radius圆角边框剪裁问题
2017年10月19日，星期四border-radius:50%可以让元素正方形元素表现为正圆，如果元素设置了border边框，则会表现为一个正圆圈圈，但有时候，border边框的这个圈圈会在边缘处发生剪裁，不是一个完美的圈圈了，这是如何发生的呢？
使用canvas实现和HTML5 video交互的弹幕效果
2017年09月10日，星期日本文展示两个使用canvas实现弹幕效果的案例。其中一个效果是静态的弹幕数据固定的无限循环的效果，适合在个人博客或者运营页面，这种非视频场景使用；另外一个效果是动态的弹幕数据可变的和真实HTML5 <video>交互的弹幕效果，也就是真视频弹幕效果。
jquery.guide.js新版上线操作向导镂空提示jQuery插件
2017年05月18日，星期四网站上线或者改版的时候，常常会做一个操作向导，告诉用户一些重要操作到了哪里，或者什么地方隐藏了什么好玩的东西，等等，虽然我都是直接关掉的，或者快速跳过，但是对有部分用户而言还是很有用的。
这种提示比较好的交互效果是采用镂空的半透明遮罩，视觉重点一目了然，类似这样……
深入理解CSS中的层叠上下文和层叠顺序
2016年01月9日，星期六
border-collapse与table td边框opacity透明度诡异解析
2015年03月3日，星期二年前遇到此现象，在Chrome浏览器下，起初，我还以为是Chrome浏览器的bug.
今日原型重现，在各个现代浏览器下一测，乖乖隆地咚，都是一个尿性，看来是规范使然，不是bug啊！但是，由于现象实在诡异，到目前也想不通是个怎么回事，故在这里演示并询问在座的小伙伴们，为什么会有此现象？
现象描述……
小tip: transition与visibility
2013年05月14日，星期二这里的transition指的就是CSS3中的那个过渡动画属性transition. 如果我们仔细查看其支持的CSS属性值，会发现竟然有一个visibility.
此时，我的脑袋上立马冒出了3个大大的问号：visibility不就visibile/hidden/collapse等值，又不是数值什么的，怎么有动画效果呢？？
一番查阅研究，发现，这玩意还是有些作料的……
我的应用