TypechoJoeTheme

小霆教程网-小霆博客bolg

【css系列】给网站添加动态闪光logo


效果请看本站logo ↑

下面分享css3代码

    /*表示在元素之前添加一个新内容*/
.logo :before {
    content: "";
    /*添加绝对定位属性*/
    position: absolute;
    top: 0;
    /*自行设置闪光的宽高  如果遇到闪光与logo大小不符,请修改width:和height:的值*/
    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;
    }
}
赞 · 0
评论 (0)