专注前端行业精选
当前位置:网站首页 > 最近更新 > 前端开发 > CSS > 正文

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

作者:鹏仔先生日期:2020-06-03浏览:1042分类: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;
	}
}


手机扫码访问

暂无评论,来添加一个吧。

取消回复欢迎 发表评论:

关灯