Logo图片等扫光效果的实现

分类: 知识库时间:  2年前 (2018-06-22)阅读:  2157评论:  17

 html代码如下:

<div class="ilogo">
<h1 class="ititle">
<a href="http://www.bs-st.com/">
<img src="http://www.bs-st.com/logo.png" title="礼堂椅" alt="礼堂椅" rel="home">
<span class="iname">礼堂椅</span></a></h1>
</div>


css代码如下:


.ilogo, .ilogos {
    position: relative;
    float: left;
    margin: 18px 0 0 5px;
    width: 250px;
    max-height: 50px;
    overflow: hidden;
    transition-duration: .5s;
}
.ilogo:before {
    content: "";
    position: absolute;
    left: -665px;
    top: -460px;
    width: 250px;
    height: 15px;  /**光标的宽度,可根据实际调整**/
    background-color: rgba(255,255,255,.5);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: searchLights 1s ease-in 1s infinite;
    -o-animation: searchLights 1s ease-in 1s infinite;
    animation: searchLights 1s ease-in 1s infinite;  /**第一个数字参数控制扫光速度,数字越大越慢**/
}


Logo扫光效果实现说明:


1、用 CSS3 伪元素 :bfore 或 :after 添加一扫光层;


2、用 transform:rotate(-45deg) 旋转 45 度;


3、@ keyframes 规则来控制扫光效果的起始位置和结束位置;


4、用 CSS 控制位置和动画时间等。


评论列表:

  • 清森   发布于 1年前 (2019-06-03)  回复Ta
  • 我以前以为是图片本身做好的。
  • 新闻头条   发布于 1年前 (2019-05-11)  回复Ta
  • 文章不错支持一下,非常喜欢
  • 微信   发布于 2年前 (2019-01-07)  回复Ta
  • 非常好,谢谢提供。
  • 新闻   发布于 2年前 (2018-11-19)  回复Ta
  • 文章不错非常喜欢