CSS文字条纹阴影动画

来源：互联网发布：梦里花落知多少txt三毛编辑：程序博客网时间：2024/04/28 01:42

See the Pen shadow text by haiqing wang (@whqet) onCodePen.

今天给大家推荐个动画条纹阴影效果，效果如下图所示。

好的，让我们开工吧，首先是so easy的html。

<!--  data-text属性用来指定阴影内容--><span class="shadow" data-text="Hello">Hello</span>

来看看关键的CSS怎么写，写东西之前弄好注释，养成好习惯。

/*with less hat & prefix freeonly for webkit*//*导入字体*/@import "http://fonts.googleapis.com/css?family=Dancing+Script:400,700";/*居中对齐的less mixin*/.center{  position:absolute;  top:50%;  left:50%;  .translate(-50%,-50%);}

这里的效果仅仅限于webkit的内核，仅仅是实验效果用于研究CSS3，哈哈，大家不要见笑。基于less hat和prefix free，为了简化操作代码里没有列出。

然后我们进入正题。

body{    background-color:#27ae60;}.shadow{  font-size: 12em;  font-family: 'Dancing Script', cursive;  color:#DC554F;  .center;  z-index:5;  &:before{    content:attr(data-text);    position:absolute;    top:6px;    left:4px;    .opacity(.4);    background-image:      linear-gradient(        45deg,        transparent 45%,        hsla(48,20%,90%,1) 45%,        hsla(48,20%,90%,1) 55%,        transparent 0        );    background-size: .05em .05em;    .background-clip(text);    /*Webkit Only，key code for the effect*/    -webkit-text-fill-color: transparent;    z-index:-1;    animation: shadowGo 15s linear infinite;  }}@keyframes shadowGo{ 0% {background-position: 0 0}0% {background-position: -100% 100%}};

大家可以到我的codepen在线修改、体验，或是下载收藏本效果。

---------------------------------------------------------------
前端开发whqet，关注web前端开发技术，分享网页相关资源。
---------------------------------------------------------------

8 0