交互设计中心|72色交互设计、用户体验

css3颜色渐变、动画特效效果演示：

CSS3颜色渐变的文字特效,利用css3的animation属性还能做出动感十足的特效。上面的效果大家看到了把，那就是用下面的css3代码实现的，很简单的几行代码就能实现文字颜色渐变和动态效果，以前不是flash就是要用javascript脚本语言。

<code>
<style type=”text/css”>
p.color_shine
{
font-size: 3em;
margin: 0 auto;
padding:20px 0;
}

.color_shine
{
background: #222 -webkit-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff)) 0 0 no-repeat;
-webkit-background-size: 125px;

color: rgba(255, 255, 255, 0.1);
-webkit-background-clip: text;

-webkit-animation-name: color_shine;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes color_shine
{
0%
{
background-position: top left;
}
100%
{
background: top right;
}
}
</style>
<!– HTML –>
<p class=”color_shine”>交互设计中心-72色 72COLOR.COM</p>
</code>