CSS3 页面滚动时填充图标颜色

Icon fill on scroll，通过改变伪元素的颜色以及SVG矢量图来达到这样的填充效果。

fill,scroll

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2490
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url(http://fonts.googleapis.com/css?family=Signika);
*, *:after, *:before {
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

html {
  height: 100%; }

body {
  color: white;
  height: 100%;
  background: #3e253c;
  font-size: 16px;
  font-family: 'Signika', sans-serif; }

body:before, body:after {
  content: '';
  position: fixed;
  width: 89.8%;
  max-width: 1170px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  right: auto;
  height: 50%;
  z-index: -1; }

body:before {
  top: 0;
  background-color: #f4bd89;
  -webkit-transition: all 0.8s;
  transition: all 0.8s; }

body:after {
  top: 50%;
  background-color: #71495b; }

h1, h2, p {
  margin-bottom: 20px; }

h1 {
  font-size: 3em; }

h2 {
  font-size: 2.3em; }

p {
  font-size: 1.25em; }

header {
  position: relative;
  background-color: #3e253c;
  height: 50%;
  text-align: center; }

.contain li {
  position: relative;
  z-index: 2;
  min-height: 525px;
  margin-left: 420px;
  background-color: #3e253c;
  padding: 6em 2em; }

.contain li:before, .contain li:after {
  content: '';
  position: absolute;
  width: 420px;
  right: 100%;
  z-index: 2; }

.contain li:before {
  top: 0;
  height: 325px;
  background-repeat: no-repeat; }

.contain li:after {
  top: 325px;
  bottom: 0;
  background-image: url(http://codyhouse.co/demo/icons-filling-effect/img/cd-pattern-large.svg); }

.icon-1:before {
  background-image: url(http://codyhouse.co/demo/icons-filling-effect/img/cd-icon-1-large.svg); }

HTML

Icon fill on scroll，通过改变伪元素的颜色以及SVG矢量图来达到这样的填充效果。

fill,scroll

编辑器支持Emmet

快捷键

Icon fill on scroll，通过改变伪元素的颜色以及SVG矢量图来达到这样的填充效果。

fill,scroll

SVG 在鼠标悬停时填充花瓣的颜色

CSS3文章页面滚动时顶部和底部的模糊特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：