欢迎来到361模板(www.ke361.com),原创精品织梦模板提供商。QQ快速注册登录 网站托管 VIP 网站定制

361模板网

当前位置:361模板网 > 技术文档 > 程序代码 > CSS小课堂:彩色文字代码定义
这篇文章主要为大家详细介绍了CSS小课堂:彩色文字代码定义,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

这两天总有机个用户在咨询361模板小编,如何用CSS书写一些彩色的文字效果,如下图:

QQ截图20181023092746.png

效果比较好看,该如何用CSS来实现呢?下面我们给出代码

1、CSS代码

body,html%{ height:100%}
body {
  color: #FFF;
  background: #000;
  font-weight: 100;
  font-family: "Segoe UI", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
}
a{ text-decoration:none}
h1 {
  font-size: 2.5em;
  line-height: 1em;
  font-weight: 100;
  text-align: center;
  vertical-align: bottom;
  margin: 0;
  padding: 0;
  color: #FFF;
  letter-spacing: 0.075em;
  text-transform: capitalize;
}
nav {
  position: relative;
  top: 0.5em;
  margin: 0 auto;
  height:100%;
}
nav ul {
  background: rgba(255, 255, 255, 0.1);
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 0;
}
nav ul li {
  font-size: 16px;
  cursor: pointer;
  line-height: 1.6em;
  padding: 0 0.6em;
  margin: 0 0;
  display: inline-block;
  list-style-type: none;
  letter-spacing: 1px;
  /*text-transform: uppercase;*/
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
nav ul li:hover {
  color: #FFF;
}
.a1{
  color: #bbe006;
}
.a1:hover {
  background-color: #bbe006;
  color: #fff;
}
.a2 {
  color: #11d452;
}
.a2:hover {
  background-color: #11d452;
  color: #fff;
}
.a3 {
  color: #11b4d4;
}
.a3:hover {
  background-color: #11b4d4;
  color: #fff;
}
.a4 {
  color: #308ce8;
}
.a4:hover {
  background-color: #308ce8;
  color: #fff;
}
.a5 {
  color: #516dfb;
}
.a5:hover {
  background-color: #516dfb;
  color: #fff;
}
.a6 {
  color: #8c5af2;
}
.a6:hover {
  background-color: #8c5af2;
  color: #fff;
}
.a7 {
  color: #cd2bee;
}
.a7:hover {
  background-color: #cd2bee;
  color: #fff;
}
.a8 {
  color: #e619a1;
}
.a8:hover {
  background-color: #e619a1;
  color: #fff;
}
.a9 {
  color: #cf171a;
}
.a9:hover {
  background-color: #cf171a;
  color: #fff;
}
nav .indicator {
  pointer-events: none;
  position: fixed;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}

2、HTML代码

<ul style="padding:20px;">
        <li><a class="a2" href="http://www.ke361.com" title="素材中国">361模板网素材</a></li>
        <li><a class="a3" href="http://www.ke361.com" title="素材天下">www.ke361.com</a></li>
    </ul>
    <ul style=" padding-bottom:20px;">
        <li><a class="a1" href="http://www.ke361.com/sucai/pic/" title="图片代码">图片代码</a></li>
        <li><a class="a2" href="http://www.ke361.com/sucai/mobile/" title="手机代码">手机代码</a></li>
        <li><a class="a3" href="http://www.ke361.com/sucai/Plug/" title="网站插件">网站插件</a></li>
        <li><a class="a4" href="http://www.ke361.com/sucai/css3/" title="CSS3素材">CSS3素材</a></li>
        <li><a class="a5" href="http://www.ke361.com/sucai/html5/" title="html5素材">html5素材</a></li>
        <li><a class="a6" href="http://www.ke361.com/sucai/tool/" title="站长工具">站长工具</a></li>
        <li><a class="a7" href="http://www.ke361.com/sucai/div/" title="提示框、悬浮框、弹出层">提示框、悬浮框、弹出层</a></li>
        <li><a class="a8" href="http://www.ke361.com/sucai/table/" title="滑动门选项卡">滑动门、选项卡</a></li>
        <li><a class="a9" href="http://www.ke361.com/sucai/form/" title="表单代码">表单代码</a></li>
        <li><a class="a1" href="http://www.ke361.com/sucai/wenzi/" title="文字特效">文字特效</a></li>
        <li><a class="a2" href="hhttp://www.ke361.com/sucai/daohang/" title="导航菜单">导航菜单</a></li>
        <li><a class="a3" href="http://www.ke361.com/sucai/qita/" title="其他素材">其他素材</a></li>
        <li><a class="a4" href="" title="图片放大镜">图片放大镜</a></li>
        <li><a class="a5" href="" title="juqery焦点图">juqery焦点图</a></li>
        <li><a class="a6" href="" title="瀑布流">瀑布流</a></li>
        <li><a class="a7" href="" title="广告悬浮代码">广告悬浮代码</a></li>
        <li><a class="a5" href="" title="在线客服">在线客服</a></li>
        <li><a class="a9" href="" title="网页导航菜单">网页导航菜单</a></li>
        <li><a class="a1" href="" title="时间倒计时">时间倒计时</a></li>
        <li><a class="a2" href="" title="Jquery教程">Jquery教程</a></li>
        <li><a class="a4" href="" title="wap手机网站教程">wap手机网站教程</a></li>
        <li><a class="a5" href="" title="javascript教程">javascript教程</a></li>
        <li><a class="a6" href="" title="CSS3教程">CSS3教程</a></li>
        <li><a class="a7" href="" title="网页基础">网页基础</a></li>
        <li><a class="a8" href="" title="php">php</a></li>
        <li><a class="a9" href="" title="html">html</a></li>
        <li><a class="a1" href="" title="图片表情">图片表情</a></li>
        <li><a class="a2" href="" title="手机网站模板">手机网站模板</a></li>
        <li><a class="a3" href="" target="_blank" title="CSS3动画">CSS3动画</a></li>
        <li><a class="a4" href="" target="_blank" title="CSS3html5 Canvas画布">html5 Canvas画布</a></li>
    </ul>
</nav>

整体效果演示

以上就是CSS小课堂:彩色文字代码定义的全部内容,希望对大家的学习和解决疑问有所帮助,也希望大家多多支持361模板网。

感谢打赏,我们会为大家提供更多优质资源!

热词标签: css 彩色文字代码

上一篇CSS小课堂:CSS边框类样式代码书写介绍

下一篇PHP实例教程:PHP获取网站根目录 PHP获取网站文件路径

取消

感谢您的支持,我们会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by361模板网,分享从这里开始,精彩与您同在