前言
好久没有写博客啦,高亮文字和图片一闪而过的特效,用CSS3来写
先看文字吧,
就上代码了
.shadow { /* 背景颜色线性渐变 */ /* 老式写法 */ /* linear为线性渐变,也可以用下面的那种写法。left top,right top指的是渐变方向,左上到右上 */ /* color-stop函数,第一个表示渐变的位置,0为起点,0.5为中点,1为结束点;第二个表示该点的颜色。所以本次渐变为两边灰色,中间渐白色 */ background: -webkit-gradient( linear, left top, right top, color-stop(0, #4d4d4d), color-stop(0.4, #4d4d4d), color-stop(0.5, white), color-stop(0.6, #4d4d4d), color-stop(1, #4d4d4d) ); /* 设置为text,意思是把文本内容之外的背景给裁剪掉 */ -webkit-background-clip: text; /* 设置对象中的文字填充颜色 这里设置为透明 */ -webkit-text-fill-color: transparent; /* 每隔2秒调用下面的CSS3动画 infinite属性为循环执行animate */ -webkit-animation: animate 1.5s infinite; animation: animate 1.5s infinite; } @keyframes animate { from { background-position: -100px; } to { background-position