TypechoJoeTheme

小霆教程网-小霆博客bolg

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

2020-05-29
/
0 评论
/
1,227 阅读
/
正在检测是否收录...
05/29


效果请看本站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
版权属于:

小霆教程网-小霆博客bolg

本文链接:

https://www.xiaoting6.cn/index.php/archives/80/(转载时请注明本文出处及文章链接)

评论 (0)

人生倒计时

今日已经过去小时
这周已经过去
本月已经过去
今年已经过去个月

最新回复

  1. 北京艺术培训
    2021-06-30
  2. 共享博客
    2021-02-20
  3. 站元素主机
    2021-02-06
  4. QQ情感站
    2020-06-29
  5. 你的老弟
    2020-05-09