井井客

搜索

[半转载]css揭秘的例子

最近在看《CSS揭秘》,过了一遍后感觉书是好书,但是现在很多东西不常用,不过未来肯定有用上的时候,所以备份转载了一份。例子部分是自己练习,部分是照搬的~已说明出处

[半转载]css揭秘的例子

内容不完全来自http://play.csssecrets.io,感谢作者~

链接汇总如下:
http://jingjingke.com/web/csssecrets/01半透明边框[background-clip].html
http://jingjingke.com/web/csssecrets/02多重边框[box-shadow].html
http://jingjingke.com/web/csssecrets/02多重边框[outline].html
http://jingjingke.com/web/csssecrets/03背景定位[background-position].html
http://jingjingke.com/web/csssecrets/04边框内圆角[outline,boxs-hadow].html
http://jingjingke.com/web/csssecrets/05条纹背景[linear-gradient].html
http://jingjingke.com/web/csssecrets/06复杂背景[linear-gradient].html
http://jingjingke.com/web/csssecrets/07伪随机背景[质数].html
http://jingjingke.com/web/csssecrets/08连续的图像边框[border-image].html
http://jingjingke.com/web/csssecrets/08蚂蚁行军[background].html
http://jingjingke.com/web/csssecrets/09自适应椭圆[border-radius].html
http://jingjingke.com/web/csssecrets/10平行四边形[skew].html
http://jingjingke.com/web/csssecrets/11菱形图片[rotate].html
http://jingjingke.com/web/csssecrets/12切角效果[background].html
http://jingjingke.com/web/csssecrets/13梯形标签页[perspective].html
http://jingjingke.com/web/csssecrets/14饼图[transform].html
http://jingjingke.com/web/csssecrets/15单双侧投影[box-shadow].html
http://jingjingke.com/web/csssecrets/16不规则投影[filter].html
http://jingjingke.com/web/csssecrets/17图片染色[filter].html
http://jingjingke.com/web/csssecrets/18毛玻璃[blur].html
http://jingjingke.com/web/csssecrets/19折角效果[伪类].html
http://jingjingke.com/web/csssecrets/20连字符断行[hyphens].html
http://jingjingke.com/web/csssecrets/21插入换行[伪类].html
http://jingjingke.com/web/csssecrets/22文本行的斑马条纹[background].html
http://jingjingke.com/web/csssecrets/23调整tab的宽度[tab-size].html
http://jingjingke.com/web/csssecrets/24连字[font-variant-ligatures].html
http://jingjingke.com/web/csssecrets/25华丽的and符号[@font-face].html
http://jingjingke.com/web/csssecrets/26自定义下划线[background].html
http://jingjingke.com/web/csssecrets/27现实中的文字效果[text-shadow].html
http://jingjingke.com/web/csssecrets/28环形文字[svg].html
http://jingjingke.com/web/csssecrets/29选用合适的鼠标光标[cursor].html
http://jingjingke.com/web/csssecrets/30扩大可点击区域[伪类].html
http://jingjingke.com/web/csssecrets/31自定义复选框[label].html
http://jingjingke.com/web/csssecrets/31自定义开关按钮[label].html
http://jingjingke.com/web/csssecrets/32通过阴影来弱化背景[多方案].html
http://jingjingke.com/web/csssecrets/33通过模糊来弱化背景[blur].html
http://jingjingke.com/web/csssecrets/34滚动提示[background-attachment].html
http://jingjingke.com/web/csssecrets/35交互式图片对比[resize].html
http://jingjingke.com/web/csssecrets/36自适应内部元素[inherit].html
http://jingjingke.com/web/csssecrets/37精确控制表格列宽[table-layout].html
http://jingjingke.com/web/csssecrets/38根据兄弟元素的数量来设置样式[nth-XXX].html
http://jingjingke.com/web/csssecrets/39满幅背景定宽内容[padding,calc].html
http://jingjingke.com/web/csssecrets/40垂直居中[translate等].html
http://jingjingke.com/web/csssecrets/41紧贴底部的页角[flex].html
http://jingjingke.com/web/csssecrets/41紧贴底部的页角[视口-calc].html
http://jingjingke.com/web/csssecrets/42缓动效果[css弹性过渡].html
http://jingjingke.com/web/csssecrets/42缓动效果[css过渡动画].html
http://jingjingke.com/web/csssecrets/43逐帧动画[steps(x)].html
http://jingjingke.com/web/csssecrets/44闪烁效果[steps].html
http://jingjingke.com/web/csssecrets/45打字动画[steps].html
http://jingjingke.com/web/csssecrets/46状态平滑的动画[linear].html
http://jingjingke.com/web/csssecrets/47沿环形路径平移转动的图片[animation-direction].html
http://jingjingke.com/web/csssecrets/47沿环形路径平移转动的图片[rotate].html

讲的CSS技巧虽然现在用的不一定多,但是细细品来还是能感觉到CSS的魅力~

前端不止是JS也不止是CSS,两者结合,融会贯通。这也是一件具有挑战的事~

文章TAG:CSS

作者:井井客整理来源:互联网
本文标题:[半转载]css揭秘的例子
本文链接:http://www.jingjingke.com/c/21279.html

上一篇:webpack+vue中使用别名路径引用静态图片地址
下一篇:原生JS自制九九乘法表

文章分类

相关阅读

随便看看