客户咨询热线 15081754822
首页     关于我们     网站建设     系统开发     手机网站     模板网站     网站改版     网站维护     Logo设计     短信群发     企业邮箱     网站案例     微信开发     建站知识     解决方案     联系我们
 您现在的位置:首页 > CSS实现鼠标放上去图片翻转效果实现  
业务范围
  系统开发
  网站建设
  手机网站
  网站案例
  宣传片拍摄
  域名注册
  短信群发
  企业邮箱
建站专题
  邯郸县区建站
  建站解决方案
关于我们
  关于我们
  公司视频
  联系方式
 
 
 
 
 
 
  CSS实现鼠标放上去图片翻转效果实现


CSS实现鼠标放上去图片翻转效果实现
发布日期:2020-10-30 14:38:13  浏览次数:228次   二维码分享


    <ul class="aj-c2-list clearFix">

               <li style="background:#f6f6f6;"><a href="/ajxy/xyfm/index.shtml" target="_blank"><img src="/src/images/aj-img1.png" height="59" alt=""><p>校园风貌</p></a></li>

               <li style="background:#ececec;"><a href="/ajxy/ajwh/index.shtml" target="_blank"><img src="/src/images/aj-img2.png" alt=""><p>校园文化</p></a></li>

               <li style="background:#f6f6f6;"><a href="/ajxy/xyry/index.shtml" target="_blank"><img src="/src/images/aj-img3.png" height="59" alt=""><p>校园荣誉</p></a></li>

             </ul>




.aj-c2-list{

 width: 100%;

 margin-top: 26px;

}

.aj-c2-list li{

 width: 33.3%;

 float: left;

 height: 178px;

}

.aj-c2-list li img{

 display: block;

 margin: 0 auto;

 margin-top: 36px;

 transition: all 1s ease;

}

.aj-c2-list p{

 font-size: 18px;

 color: #61476e;

 text-align: center;

 font-weight: bold;

 margin-top: 22px;

}

.aj-c2-list li:hover img{

 transform: scale(-1,1);

}




.aj-c2-list li img{

transition: all 0.6s;

}


作者:邯郸网站制作
来源:互联网 下一条: 视频播放列表功能
关于我们 | 邯郸宣传片拍摄 | 最新动态 | 网站案例 | 联系方式
网站关键词:邯郸网站建设 | 邯郸做网站 | 邯郸网站设计 | 邯郸网页设计 | 邯郸网站制作 | 邯郸网络公司| 邯郸网站推广
客服电话:156-9004-3855 QQ:125856421 电子信箱:125856421@QQ.com
邯郸奥科网络 版权所有
客户服务
15102693855