WordPress添加动态彩虹渐变字特效

WordPress添加动态彩虹渐变字特效-青鹿云

效果预览

青鹿云 – 畅游网络IT科技视界(www.milubk.com)

整体代码

<style>.qly{background-image:-webkit-linear-gradient(30deg,#32c5ff 25%,#b620e0 50%,#f7b500 75%,#20e050 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;-webkit-background-size:200% 100%;-webkit-animation:maskedAnimation 4s infinite linear;font-size:16px}@keyframes maskedAnimation{0%{background-position:0 0}100%{background-position:-100% 0}}</style>
<div class="qly">青鹿云 – 畅游网络IT科技视界(www.milubk.com)</div>

加入后台按钮

  • 1.添加自定义CSS
.qly{background-image:-webkit-linear-gradient(30deg,#32c5ff 25%,#b620e0 50%,#f7b500 75%,#20e050 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;-webkit-background-size:200% 100%;-webkit-animation:maskedAnimation 4s infinite linear;font-size:16px}@keyframes maskedAnimation{0%{background-position:0 0}100%{background-position:-100% 0}}
  • 2.找到主题functions.php加入下面代码:
/*文本编辑器添加彩虹文字按钮开始*/
 add_action('after_wp_tiny_mce', 'bolo_after_wp_tiny_mce');
 function bolo_after_wp_tiny_mce($mce_settings) {
 ?>
 <script type="text/javascript"> 
 QTags.addButton( 'qly', '彩虹文字', '<div class="qly">彩虹文字</div>', "" ); 
 function bolo_QTnextpage_arg1() {
 }
 </script>
 <?php
 }
/*文本编辑器添加彩虹文字按钮结束*/
  • 3.添加完成 在文本编辑器中
WordPress添加动态彩虹渐变字特效-青鹿云
© 版权声明
THE END
喜欢就支持一下吧
点赞265 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容