Welcome, Old Sport!

纯CSS3打造鼠标经过特效

by ilikecss ON 2017/04/21 468

纯CSS3打造鼠标经过特效大家好,博客转移到新服务器第一篇前端教程,顺便测试新机子的性能。今天介绍一款代码简洁,功能实用的鼠标经过的特效,纯CSS3打造的效果,可用于网站图片修饰。

HTML

<div class="bn_ad bn_ad_1 col-lg-4 col-xs-12">
    <a href="#" class="bna"><span class="hid">%u5E7F%u544A%u4F4D1</span></a>
</div>

CSS

.bn_ad a {
    display: block;
    height: 240px;
    box-shadow: 3px 3px #010101;
    border: 1px solid #010101;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}
.bn_ad_1 a {
    background-image: url(../img/tonggumeilin-1.jpg);
}.bna {
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
}
.bna:before {
    content: "";
    background-image: -webkit-linear-gradient(
      130deg,
      rgba(255,255,255,0) 20%, 
      rgba(243,235,255,1) 100%, 
      rgba(243,235,82,0) 80%
    );
    background-image: linear-gradient(
      130deg,
      rgba(243,235,255,0) 20%,
      rgba(243,235,255,1) 50%,
      rgba(243,235,255,0) 80%
    );
    width: 200%;
    height: 200%;
    position: absolute;
    top: -100%; 
    left: -200%;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}
.bna:hover:before {top: 0%; left: 100%;}

本博客的假色情网站ooxxma目前比较受市场欢迎,大家撸玩记得右下的支付宝1元爱心工程

2017上海车展模特微信

3条评论
  1. 微信已加~

  2. #2

    可入眼说道:

    效果不错




TOP