html中怎样设置logo颜色,如何通过css3给自己网站logo添加闪光效果

通过css3给自己网站logo添加闪光效果，感觉效果还不错，可以提升用户对网站或企业的品牌印象。 具体实现方法如下：

找到自己网站logo外面层的盒子(元素)，并给该元素添加以下css代码/*首先我们需要给logo的盒子设置相对定位，设置宽高，并超出部分隐藏*/

.logo{

position: relative;

width: 360px;

height: 60px;

overflow: hidden;

}

/*再给logo元素伪类before添加样式*/

.logo:before {

content: "";

position: absolute;/*添加绝对定位属性*/

top: 0;

width: 260px;

height: 60px;

transform: rotate(-45deg);/*设置旋转角度*/

background: red;

/* For Safari 5.1 to 6.0 */

background: -webkit-linear-gradient(rgba(255,255,255,0),rgba(255,255,255,0.8), rgba(255,255,255,0));

/* For Internet Explorer 10 */

background: -ms-linear-gradient(rgba(255,255,255,0),rgba(255,255,255,0.8), rgba(255,255,255,0));

/* Standard syntax */

background: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,0.8), rgba(255,255,255,0));

animation: logoAni 1s 0s linear infinite;/*添加css动效，1s代表一秒执行完，0s表示不延迟，linear表示执行效果由慢到快，infinite表示循环播放*/

}

/*再给定义的logoAni设置动画帧样式，从开始到结束的位置，可根据自己的图宽度进行设置*/

@keyframes logoAni {

0% {

left: -50px;

}

100% {

left: 250px;

}

}

注：.logo 是我网站logo盒子的类名，大家用自己的或根据自己网站实际logo图片盒子层就行

演示效果及DEMO附件下载：

此处为隐藏内容，请评论后查看隐藏内容，谢谢！