免费个人博客模板-专注前端行业与圈内动态-分享最具价值内容
  • 首页
  • CSS
  • 使用c3动画给自己网站添加一个动态闪光logo

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

发布:鹏仔先生2019-3-7 16:15分类: CSS 标签: 效果 css 大前端

共享博客

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

共享博客


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

定位属性详情 sharedblog.cn/?post=23

/*首先我们需要给logo的盒子设置相对定位,设置宽高,并超出部分隐藏*/
.logo{
	position: relative;
        width: 360px;
        height: 60px;
	overflow: hidden;
}
    接着,我们继续下方css代码

before 元素详情 sharedblog.cn/?post=133

c3动画 animation 详情 sharedblog.cn/?post=166

/*表示在元素之前添加一个新内容*/
.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;
	}
}

需要技术支持,可联系小白鹏仔哦!

温馨提示如有转载或引用以上内容之必要,敬请将本文链接作为出处标注,谢谢合作!

赞赏

关闭

原创不易,感谢支持!

支付宝打赏

微信打赏

扫码打赏,建议金额1-10元
提醒:打赏金额将直接进入对方账号,无法退款,请您谨慎操作。
Powered By 鹏仔先生

已有 0/662 人参与

微信扫码关注鹏仔哥微信