摘要:
下文讲述使用css脚本实现一个非常炫酷的字体，如下所示；

css3提供了一个动画功能，使用此功能我们可以制作非常炫酷的字体动画，
下文讲述使用线性渐变背景和css动画,实现一个字体动画

实现思路:
     采用css的动画，
   为字体绘制变化的动画，达到炫酷的效果

例:
超美字体效果
实验环境:chrome

 <p>
maomao365.com<br />
css实现一个非常酷的字体效果
</p>
<hr />
<style>
#spanTest {
 font-weight:800;
 font-size:32x;
 font-family: "黑体";
 color: #8c888b;
 background: -webkit-linear-gradient(45deg, red, green, blue,black, yellow);
 -moz-linear-gradient(45deg,red, green, blue,black, yellow);
 -ms-linear-gradient(45deg, red, green, blue,black, yellow);
 color: transparent;
 /*设置字体颜色透明*/
 -webkit-background-clip: text;
 /*背景裁剪为文本形式*/
 animation: dongHua 10s linear infinite;
 /*动态10s展示*/
 }

@keyframes dongHua {
  from {
    backgroud-position: 0 0;
       }
  to {
   background-position:1800px 0;
  }
}
</style>

<span id="spanTest">猫猫教程-世界第一棒的教程</span>

摘要:
下文讲述使用css脚本修改input文本框中的光标颜色，如下所示；

 实现思路: 
   使用text-shadow
   (fillcolor设置为transparent后)-作为字体颜色
   使用color设置颜色作为光标颜色

例:
设置input光标颜色
实验环境:Chrome

 <meta charset='utf-8' /> 
<p>
 maomao365.com <br />
css修改光标颜色的示例分享
</p>
<hr />
<style>
.a{
  color:blue;
  }
.b{ 
 color: red;/*光标颜色 */
 text-shadow: 0px 0px 0px blue;/*字体颜色*/
 -webkit-text-fill-color: transparent;
}
</style>
<div>
光标颜色和字体颜色同时设置：
</div>
<div>
<input class="a" type="text"/>
</div>
<div>
 光标颜色和
字体颜色分别设置
</div>
<div>
<input class="b" type="text"/>
</div>

摘要:
下文讲述使用css脚本实现一个转圈的加载等待样式的方法说明，如下所示；

例:
环形加载等待框的示例分享

  <meta charset="utf-8"> 
<style>
.spinner{
  width:70px;
  height:70px;
  position:relative;
  left:100px;
  top:100px;
  color:white;
}
.spinner .top, .spinner .bottom{
  width:70px;
  height:35px;
  position:relative;
  -webkit-backface-visibility:hidden;
  -webkit-transform:translateZ(0) scale(1.0, 1.0);
  overflow:hidden;
}
.spinner::before, .spinner .top::before, .spinner .bottom::before{
  content: '';
  width: 70px;
  height: 70px;
  display: inline-block;
  border-style: solid;
  border-top-color: #FFF;
  border-right-color: #FFF;
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  border-width: 5px;
  box-sizing: border-box;
}
  
/* 使用spinner::before来覆盖空隙*/
.spinner::before {
  position: absolute;
  border-right-color: transparent;
  border-top-color: transparent;
  transform: rotateZ(47deg);
  -webkit-animation: fix-gap 2s ease-in infinite;
}
.spinner .top::before {
  transform: rotateZ(-225deg);
  -webkit-animation: rotate-top 2s ease-in infinite;
  /*-webkit-animation-delay: 0.3s;*/
}
.spinner .bottom::before {
  border-bottom-color: #fff;
  border-top-color: transparent;
  position: relative;
  bottom: 35px;
  transform: rotateZ(-135deg);
  -webkit-animation: rotate-bottom 2s  ease-out infinite;
  /*-webkit-animation-delay: 0.3s;*/
}
  
@-webkit-keyframes fix-gap {
  49% {
    border-top-color: transparent;
  }
  50% { 
    border-top-color: white;
  }
  100% { 
    border-top-color: white; 
  }
}
  
@-webkit-keyframes rotate-top {
  50% { 
    transform: rotateZ(-45deg); 
  }
  100% {  
    transform: rotateZ(-45deg); 
  }
}
@-webkit-keyframes rotate-bottom {
  50% { 
    transform: rotateZ(-135deg);
  }
  100% {  
    transform: rotateZ(45deg); 
  }
}
body {
  background:green;
}
p{
  color:white;
}
</style> 
<p>
maomao365.com<br />
转动圈圈的加载样式
</p>
<hr />
<div class="spinner">
  <div class="top"></div>
  <div class="bottom"></div>
</div>