2024年04月02日 懒猪 前端开发 前端博客 个人博客 网站制作 鹏仔先生 百变鹏仔 HTML CSS javascript JS 共享博客
今日公司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;
}
}本文链接：http://so.lmcjl.com/news/979/