第五届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等值,又不是数值什么的,怎么有动画效果呢??
一番查阅研究,发现,这玩意还是有些作料的……