您现在的位置是：首页 > 学无止境> CSS3|HTML5网站首页学无止境CSS3|HTML5

css光泽一闪而过的效果

css3  
简介css光泽一闪而过的效果

html:

<div class="top-1 box">
    <a href="javascript:;">
        <img alt="" src="http://www.studyfx.cn/public/uploads/20190825/3994e87623b8e515e5f017379b4c9bcd.jpg" style="display:block;"></a>
    <b class="shan"></b>
</div>

css:

 .box {
    position:relative;
    overflow:hidden;
    cursor:pointer;
    margin:0 auto;
    width:1000px;
}
@-webkit-keyframes changeImg {
    from {
    left:-100%;
}
100% {
    left:150%;
}
}.shan {
    position:absolute;
    -webkit-animation:changeImg 3s ease 0s;
    -o-animation:changeImg 3s ease 0s;
    animation:changeImg 3s ease 0s;
    top:0;
    width:30%;
    height:100%;
    content:"";
    background:-webkit-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.4) 50%,rgba(255,255,255,0) 100%);
    background:-o-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.4) 50%,rgba(255,255,255,0) 100%);
    background:-moz-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.4) 50%,rgba(255,255,255,0) 100%);
    background:linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,.4) 50%,rgba(255,255,255,0) 100%);
    transform:skewX(-45deg);
    animation-iteration-count:infinite;
    -moz-animation-iteration-count:infinite;
    -webkit-animation-iteration-count:infinite;
}


上一篇：点击弹出导航效果

下一篇：css3鼠标点击立体翻转

相关文章

特别推荐

  • 层叠卡片幻灯片切换效果 阅读

  • css光泽一闪而过的效果 阅读

  • 幻灯片效果 阅读

推荐文章

点击排行

标签云

友情链接

Top