2019年06月10日 by 张 鑫旭 阅读 32307 次, 今日 16 次
第4届中国前端开发者千人峰会上我做了名为“滤镜与混合模式”主题分享，这里我把分享内容，尤其一些案例和源码整理成文，给需要的人，末尾有分享PPT文件的下载，内容较多，请提前预留足够学习时间。
阅读全文…
标签： background-blend-mode, blur, contrast, darken, difference, drop-shadow, filter, hue-rotate, lighten, mix-blend-mode, screen, soft-light, 我，
发布在 CSS相关 | 12 条评论 »
2019年06月9日 by 张 鑫旭 阅读 43488 次, 今日 14 次
第五届CSS大会主题分享之“CSS创意与视觉表现”文字版完全整理，共有10个纯CSS实现的创意案例，旨在展现CSS的潜力，同时激发你的CSS创意思维。每个案例都有demo，原理讲解，文末还有分享文档，希望对你CSS学习有所帮助。
阅读全文…
标签： animation, background-blend-mode, box-shadow, calc, content, CSS Shapes, CSSgram, filter, hue-rotate, linear-gradient, mask, mask-composite, mix-blend-mode, opacity, outline, perspective, radial-gradient, resize
发布在 CSS相关 | 11 条评论 »
2019年06月8日 by 张 鑫旭 阅读 35923 次, 今日 23 次
我们可以使用纯CSS显示页面滚动百分比进度，传统实现是在body标签上做文章，但有致命缺陷，后来我借助混合模式实现了一种新方法，此方法可以规避传统实现的不足，使纯CSS滚动指示器效果在实际项目中应用成为了可能。
阅读全文…
标签： body, css相关, darken, lighten, mix-blend-mode, pointer-events, z-index, 滚动, 进度条
发布在 CSS相关 | 21 条评论 »
2019年06月7日 by 张 鑫旭 阅读 25526 次, 今日 16 次
本文介绍一个CSS项目CSSgram，借助css滤镜和混合模式实现Instagram中的26种滤镜效果，不仅可以作用于图片，还可以作用于视频。
阅读全文…
标签： CSSgram, filter, foreignObject, github, mix-blend-mode, video
发布在 CSS相关 | 10 条评论 »
2019年06月3日 by 张 鑫旭 阅读 42480 次, 今日 22 次
本文介绍HTML中33个rel属性值及其对应的含义，这33个属性值各有千秋，涵盖web开发方方面面，或SEO或功能开发或性能优化等，阅读前请预留足够的时间。
阅读全文…
标签： a, area, dns-prefetch, form, html, link, manifest, nofollow, noopener, noreferrer, OpenSearch, preconnect, prefetch, preload, prerender, referrer, rel, shortlink
发布在 HTML相关 | 13 条评论 »
2019年05月28日 by 张 鑫旭 阅读 32043 次, 今日 17 次
借助CSS计数器，我们可以巧妙地实现CSS var变量值在页面中呈现的效果。这是一个所有CSS开发人员都必须要掌握的一个小技巧。
阅读全文…
标签： content, counter-reset, CSS计数器, var, 伪元素, 变量
发布在 CSS相关 | 10 条评论 »
2019年05月28日 by 张 鑫旭 阅读 39250 次, 今日 20 次
无论在哪个语言中，无论是什么设计工具，滤色混合模式都是非常基础，非常常见的一种混合模式，如果你致力于在图形表现领域有所作为，一定要把这种模式的混合算法、特效以及应用场景记得滚瓜烂熟。
阅读全文…
标签： css相关, mix-blend-mode, screen, video, 混合模式, 滤色
发布在 CSS相关 | 12 条评论 »
2019年05月27日 by 张 鑫旭 阅读 61503 次, 今日 22 次
本文主要介绍N多种全新的动画过场效果，实现简单，体验俱佳，主要用到的技术是clip-path和mask遮罩，以及CSS变量和animation的创新实现方法，一定会有所收获的。
阅读全文…
标签： clip-path, conic-gradient, dialog, linear-gradient, mask, mask-size, radial-gradient, var, 渐变, 遮罩
发布在 CSS相关 | 24 条评论 »
2019年05月17日 by 张 鑫旭 阅读 25183 次, 今日 14 次
有些CSS属性，例如background-image渐变不能使用CSS animation动画，那有没有什么办法可以让渐变支持设置动画呢？本文就将介绍我最近研究的一个小成果，可以实现background-image渐变的动画效果。
阅读全文…
标签： @keyframes, animation, calc, css相关, linear-gradient, radial-gradient, var, 变量
发布在 CSS相关 | 13 条评论 »
2019年05月16日 by 张 鑫旭 阅读 79606 次, 今日 33 次
有一些非常幸福的复杂动向，或者一些场景特效使用视频来实现是非常简单的，但是视频有一个严重的问题，那就是背景它不是透明的，无法跟底部图像很好的融合在一起，那有没有什么解决方法可以让它的背景变透明呢？
阅读全文…
标签： mix-blend-mode, mp4, screen, video, 混合模式, 滤色, 视频
发布在 CSS相关 | 14 条评论 »
我的应用
我的应用