专注前端行业精选

使用c3动画给自己网站添加一个动态闪光logo

作者：鹏仔先生日期：2020-06-03 11:17:36浏览：2458分类：CSS

今日公司UI小姐姐浏览某网页，看到网页logo的闪光效果，然后建议我也可以给网站做一个，我看了下效果，之前也在部分网站看到过，效果也不错，今天就用c3动画给大家分享一个，先看效果如下

首先，我们需要找到自己网站logo外面套的盒子，给添加下方css代码，.logo 是我网站logo盒子的类名，大家用自己的就行

/*首先我们需要给logo的盒子设置相对定位，设置宽高，并超出部分隐藏*/
.logo{
	position: relative;
        width: 360px;
        height: 60px;
	overflow: hidden;
}

接着，我们继续下方css代码

/*表示在元素之前添加一个新内容*/
.logo :before {
	content: "";
	/*添加绝对定位属性*/
	position: absolute;
	top: 0;
	/*自行设置闪光的宽高*/
	width: 160px;
	height: 15px;
	/*设置旋转角度*/
	transform: rotate(-45deg);
	/*设置颜色与透明度，.5表示透明度为50%*/
	background: rgba(255, 255, 255, .5);
	/*使用c3动画，1s代表一秒执行完，0s表示不延迟，linear表示执行效果由慢到快，infinite表示循环播放*/
	animation: logogif 1s 0s linear infinite;
}
/*下面是设置动画关键帧，从开始到结束的位置，可根据自己的图宽度设置*/
@keyframes logogif {
	0% {
		left: 0px;
	}
	100% {
		left: 360px;
	}
}