WordPress集成一言（文字流光渐变）

代码以“一言”JS脚本部署到WP为例：

在主题根目录下的 footer.php 底部 </body> 前添加以下代码，并对style样式部分做修改，实现动态流光文字效果。

用到的CSS3属性

background-image: 设置颜色变化范围
color: 设置字体颜色透明
background-size:设置背景尺寸
background-clip: 按照文字来裁剪背景颜色, 针对不同的浏览器添加前缀，如:-webkit-background-clip
animation: 更改时间来设置合适的流光速度，
background-position：设置合适的参数实现视觉上流畅的循环效果。

<pre class="wp-block-syntaxhighlighter-code"><script type="text/javascript" src="https://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script type='text/javascript'>
$.get("https://v1.hitokoto.cn/",function(data,status){
  if (status == 'success'){
    $('.hitokoto').text(data.hitokoto);
  }else{
    $('.hitokoto').text('永远相信美好的事情将要发生！');
  }
});
</script>
<style>
 .hitokoto {
    vertical-align:bottom;
    width:500px; height:160px; 
    line-height: 280px;
    padding: 0px;
    text-align:center;
    font-size:22px;
    font-weight:bold;
    margin: 0px 0 0px 0;
    text-overflow:ellipsis; 
    white-space:nowrap;
    overflow:hidden;
    margin: auto;
    background-image:-webkit-linear-gradient(left,#ffcccc 0%,#cccccc 10%,#cc9999 20%,#999999 30%,#996666 40%,#666666 50%,#996666 60%,#999999 70%,#cc9999 80%,#cccccc 90%,#ffcccc 100%); /*渐变背景*/
  color:transparent;
  background-size:200% 100%;
  -webkit-background-clip:text;
  animation: move 6s infinite linear;
}
@keyframes move{
  0%{
    background-position:0 0;
  }
  100%{
    background-position:-200% 0;
  }
}
</style></pre>

代码调用

在需要展示的地方添加以下代码调用：本例将代码放入header.php以实现在Banner区显示：

<div class='hitokoto'  align="center" ></div>

打赏