CSS文字条纹阴影动画

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 free
only 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前端开发技术,分享网页相关资源。
---------------------------------------------------------------

相关推荐
文字原版,高清,带书签,学习css的好资源 译者序 ix 序 xi 前言 xiii 致谢 xv 本书是怎样炼成的 xviii 关于本书 xx 第 1 章 引言 1 Web 标准:是敌还是友 2 CSS 编码技巧 7 第 2 章 背景与边框 17 1 半透明边框 18 2 多重边框 20 3 灵活的背景定位 22 4 边框内圆角 25 5 条纹背景 27 6 复杂的背景图案 33 7 随机背景 43 8 连续的图像边框 46 第 3 章 形状 51 9 自适应的椭圆 52 10 平行四边形 57 11 菱形图片 60 12 切角效果 63 13 梯形标签页 71 14 简单的饼图 75 第 4 章 视觉效果 86 15 单侧投影 87 16 不规则投影 90 17 染色效果 93 18 毛玻璃效果 97 19 折角效果 105 目录 vii 本书赞誉 viii 第 5 章 字体排印 112 20 连字符断行 113 21 插入换行 115 22 文本行的斑马条纹 119 23 调整 tab 的宽度 121 24 连字 123 25 华丽的 & 符号 125 26 自定义下划线 129 27 现实中的文字效果 132 28 环形文字 138 第 6 章 用户体验 143 29 选用合适的鼠标光标 144 30 扩大可点击区域 147 31 自定义复选框 149 32 通过阴影来弱化背景 153 33 通过模糊来弱化背景 157 34 滚动提示 159 35 交互式的图片对比控件 164 第 7 章 结构与布局 172 36 自适应内部元素 173 37 精确控制表格列宽 175 38 根据兄弟元素的数量来设置样式 178 39 满幅的背景,定宽的内容 182 40 垂直居中 185 41 紧贴底部的页脚 191 第 8 章 过渡与动画 195 42 缓动效果 196 43 逐帧动画 205 44 闪烁效果 209 45 打字动画 212 46 状态平滑的动画 217 47 沿环形路径平移的动画 221 按规范分 230
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页